Textarea
Multi-line text input with label, helper copy, and validation through Field.
Base UI
Textarea is the multi-line control for notes, message bodies, bios, and other long-form values. It uses the same field layout as Textfield for label, description, and error copy, so long answers match the rest of the form.
Pass rows, placeholder, and standard textarea attributes on the control; validation flows through Base UI Field the same way as single-line inputs. fitContent grows the control with its value; resize opts into a native drag handle (vertical, horizontal, or both) when users need more room. Width fill comes from a parent Stack with fullWidth / expandChildren — Textarea has no fullWidth prop and no addon slots.
When to use
- Values that naturally span multiple lines (feedback, release notes, comments)
- Fields that should grow with typing (
fitContent) or offer a resize handle
When not to use
- Single-line identifiers or short values → Textfield
- Prefix, search glyph, or trailing action chrome → Textfield addons (Textarea has none)
Related
- Textfield — single-line input with optional addons
- Fieldset — section legend when several fields share a group
Common examples
Message body
A labeled message with helper copy and Field validation is the baseline long-form input. Pair it with a submit button in a Stack — no extra Field wrapper around Textarea itself.
Fit content
fitContent grows the control with its value via field-sizing: content. Keep a small rows floor; the field still respects min-block-size. Use this when notes should expand as the user types instead of forcing a drag handle.
Vertical resize
Combine resize="vertical" with fitContent when the field should grow with content and still offer a drag handle for extra room. Omitted resize keeps the handle off (none).
Ask your agent
Add a feedback section with a labeled Message textarea about four rows tall and a send button. Show a validation error after the user edits if the message is empty or under 12 characters.Last updated on