The Textarea component provides a multi-line text input field for collecting longer form text content from users. It grows with its content by default; pass lines a number to fix it at that many rows instead.
Add a description to provide additional context or instructions for the textarea.
Display error messages by setting the error and errorMessage props.
Control how the textarea can be resized using the resize prop. It applies only to a fixed height — a textarea left on the default lines="auto" sizes itself, so it has no resize handle to give you.
A textarea resizes itself to fit its content. Pass lines a number to fix it at that many rows instead, which is also what gives it a resize handle.
Use the size prop to set the height of the input.
You can use the corners prop to apply custom radius to sides or corners. It works well with the Column component's -1 gap to create a seamless connection between textareas.
Manage the Textarea state with React's useState hook.
The Textarea component supports five sizes: extra small, small, medium, large, and extra large.
The same 16px font and 1.3 line-height clamps that Input applies on touch pointers apply here, for the same reason: below 16px, iOS Safari zooms on focus and does not reliably zoom back. A textarea grows with its content, so it anchors its floating label to a fixed top inset rather than centring the pair, but the gap between label and text is the one Input uses.
See Input for the full table.
Use the validate prop to add custom validation to the Textarea.
Display a character counter with color-coded feedback based on remaining characters. The counter changes color when approaching the limit.
Like Input, a textarea draws no focus ring by default. Set focusRing to outline the field on focus — see Input for the whole story.
