Text area

A text area allows users to enter a longer paragraph of text.

Examples

Basic

Invalid

Validated

  
Share your thoughts.

Vertically resizable

Horizontally resizable

Uncontrolled

Disabled

Read only

Auto resizing

Props

TextArea

*required
NameTypeDefaultDescription
aria-labelstringCustom flag to show that the text area requires an associated id or aria-label.
autoResizebooleanFlag to modify height based on contents.
classNamestringAdditional classes added to the text area.
isDisabledbooleanFlag to show if the text area is disabled.
isRequiredbooleanFlag to show if the text area is required.
onChange(event: React.ChangeEvent<HTMLTextAreaElement>, value: string) => voidA callback for when the text area value changes.
readOnlyVariant'default' | 'plain'Read only variant.
resizeOrientation'horizontal' | 'vertical' | 'both'Sets the orientation to limit the resize to
validated'success' | 'warning' | 'error' | 'default'Value to indicate if the text area is modified to show that validation state. If set to success, text area will be modified to indicate valid state. If set to error, text area will be modified to indicate error state.
valuestring | numberValue of the text area.

CSS variables

Expand or collapse columnSelectorVariableValue