Textarea
A multi-line text input component for longer text content and messages.
Sizes
regular is the default. small uses smaller text for dense forms and side panels.
Error states
Set error for the error style and errorMessage for the text below the field.
Disabled
A disabled textarea can't be focused or edited.
Read only
A read-only textarea can be focused and copied from, but not edited.
Chromeless
variant="chromeless" drops the field's background, border, padding, shadow, and
hover tint so the text sits on whatever surface it is embedded in. Reach for it
when editing text in place — in a document, a card, or a title row — where a
visible input box would read as a form rather than as the text being edited. The
surrounding container supplies the affordance instead.
Prefer this over re-styling a control field through contentClassName: the
control surface sets dark:, hover:, and focus-visible: classes that a
caller's unprefixed overrides cannot reach.
Properties
Label text for the textarea field
Placeholder text when textarea is empty
Whether the textarea is disabled
Default: false
Whether the textarea is read-only
Default: false
Whether the textarea is required
Default: false
Size of the textarea
Default: regular
Whether the field renders its own surface. 'chromeless' drops the background, border, padding, shadow, and hover tint for editing text in place.
Default: control
Native field ID, overridden by inputRest.id. Generated when both are omitted.
Helper text displayed below the textarea
Controlled textarea value
Whether to display the textarea in error state
Default: false
Error message shown below the textarea while error is true
Callback function to handle input change
End label to display below the textarea
Whether to use fixed or content field sizing
Default: true
Additional CSS classes to apply to the textarea container
Additional CSS classes to apply to the textarea element
Extra props spread onto the native textarea element
Ref to the container element