Prompt input | Sodium design system

Layout

Backfill yesterday's partitions for eu-west-2 and tell me which ones were late.
ingest-prod
stackeddefault
Why did the write fail?
inline

ingest-prod
empty
Backfill yesterday's partitions for eu-west-2 and tell me which ones were late.
ingest-prod
with text
Backfill yesterday's partitions for eu-west-2 and tell me which ones were late.
ingest-prod
focus
ingest-prod
working
Backfill yesterday's partitions for eu-west-2 and tell me which ones were late.
ingest-prod
Not sent. The agent is offline.
not sent
ingest-prod
disabled

When to use it

Use: A person tells an agent what to do next with a pipeline, a job or a table.
Use: The foot of a run's thread, or one line at the head of a run's page (inline).
Not for: A form field that takes several lines of a value. Use Textarea.
Not for: A search or a filter over a list. Use Input.

7 rules

Never: Add a second primary inside the composer; your tools are ghost buttons or values, and Send stays the one slab. Because Send is the one action the composer leads with, and a second slab beside it splits the eye.
Must: Pass the run's status and onStop, so Send turns into Stop while the agent works. Because without them the person can only wait, and Escape has nothing to stop.
Must: On a failed send, set status="error" and error to a sentence; keep the text. Because the edge turns red and the sentence says why, and an instruction the person wrote is never lost.
Should: Write the placeholder as an example of an instruction for this place ("Backfill yesterday for eu-west-2"). Because a concrete example says what the agent can do here, where "Type a message" says nothing.
Never: Restyle the composer's edge, corners or height; place it with className only. Because the edge and the body carry the rest, hover, focus and failure states, and every control sits 6px inside that edge so Send is as far from the end as Attach is from the start.
Must: Make a tool in the footer 26px (--control-sm), a small Button or a value in a 26px box. Because Attach, your tools, the hint and Send share one centre line 6px above the bottom edge, and a 32px tool pushes the row taller than Send.
Must: Read the sent text from onSubmit, which trims it and never fires on an empty prompt. Because reading the textarea on a click sends spaces and sends twice on Enter.

6 states, highest first

4 checks

: The textarea is named "Message the agent" (labels.label); the hint is decoration.
: Send stays in the tab order while the prompt is empty, so it can be found, and refuses the press.
: A failed send sets aria-invalid and describes the field by its error sentence.
: Focus turns the body white with the edge --focus doubled inward and a pale halo, as in every Sodium field; Send is the real Button, so its disabled look and focus ring are the button's.

3 keys

5 edge cases

Long instruction: Grows to ten lines (six inline), then scrolls.
Enter while working: Still sends, so the product can queue it.
Only spaces: Never sends.
No field-sizing in the browser: Grows by measuring its scroll height instead.
Dark theme: Send becomes the yellow tint with a yellow line and label.

11 props

onSubmit: (text: string) => void
status: 'ready' | 'submitted' | 'streaming' | 'error' default 'ready'
onStop: () => void
onAttach: () => void
layout: 'stacked' | 'inline' default 'stacked'
value, defaultValue, onValueChange: string, string, function default ''
tools: ReactNode
error: string
minRows, maxRows: number default 2, 10 (inline 1, 6)
disabled: boolean default false
labels: PromptInputLabels default English

23 tokens