Search for a command to run...
Multi-line text input. Defaults to the same bordered chrome as `Input`; auto-grows with content via `field-sizing-content`.
Textarea uses CSS field-sizing: content so the height grows with the user's input — no JS resize listeners. rows sets the initial height; min-h-20 is the default floor.
Forwards every <textarea> HTML prop. Common ones worth highlighting:
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "default" | "unstyled" | "default" | default renders bordered input chrome; unstyled strips all chrome — no border, shadow, or focus ring — and lights up only on invalid state. |
rows | number | — | Initial height (in lines). The field grows past this as the user types. |
placeholder | string | — | Shown in text-fg-mid when empty. |
disabled | boolean | false | Dims to 50% opacity and disables interaction. |
aria-invalid | boolean | false | Flips border or outline to the destructive color. |
Use Textarea whenever the input can run more than one line — feedback, replies, descriptions. The auto-grow saves the user from manual resizing.
Set rows to the height of a typical message. Too tall reads as "I need a lot of words"
when most users will write one line; too short forces immediate scroll.
variant="unstyled" only when a parent surface already provides the field boundary.Use Textarea for single-line input. Input reads as more decisive and keeps Enter as a submit
affordance (Textarea takes Enter as a newline).
Drop the aria-invalid plumbing — without it, the destructive state never lights up on
validation errors, leaving the user guessing.