Textarea
Accessible multi-line React text field that shares the TextInput label, helper, and error contract, with rows, resize control, and fill styles. RTL ready.
Textarea shares the TextInput field contract. Set rows for the initial height and resize="none" to lock it.
When to use
Use Textarea for free text longer than a line: complaint details, justification notes, or feedback. Set rows to show the expected length, and use resize="none" only when the layout cannot grow. For a single short value, use TextInput.
If you enforce a maximum length, show the remaining count in helperText so users are not surprised on submit.
Examples
Props
Props declared by Textarea. Native attributes of the underlying element pass through.
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "default" | "filled-lighter" | "filled-darker" | ||
label | react.ReactNode | Visible field label, auto-associated to the textarea via htmlFor/id. | |
helperText | react.ReactNode | Hint shown below the field. Hidden while an error message is showing. | |
errorMessage | react.ReactNode | Message shown below the field when error is true. | |
error | boolean | Marks the field invalid: sets aria-invalid and error styling. | |
resize | "vertical" | "none" | Vertical resize handle (none locks it for fixed layouts). Horizontal/both omitted - they break form layout. |
Accessibility
The label, helper text, and error message use the same wiring as TextInput: htmlFor for the label and aria-describedby for the messages, with aria-invalid on error.
Keep the default height generous, because keyboard users cannot drag the resize handle. Announce character limits in text rather than color.