Skip to content

TextArea

TextArea is a multi-line plain-text input for free-form text.
Figma logo
  • TextAreaField is a field element that wraps TextArea with label, helper, and validation text.
  • Use CharacterCount when enforcing character limits in order to provide instant user feedback.
  • TextAreaField will occupy the width of its parent by default
  • The native rows prop can be used to set the initial height of the input
  • TextArea is user-resizable by default using the drag handle in the lower-right corner

Disabled states should be used with caution.

It may sometimes be necessary to hide labels, but label text must still be made available for screen readers. This example uses visuallyHidden to visually hide the label.

React props
NameTypeDefaultDescription
after  ReactNodeContent shown after the input value. By default this content is not interactive and will ignore pointer events. Any interactive elements must be styled with pointer-events: auto;
before  ReactNodeContent shown before the input value. By default this content is not interactive and will ignore pointer events. Any interactive elements must be styled with pointer-events: auto;
children  RequiredReactNodeIndividual options related to the group.
counter  ReactNodeIndicator of a limit placed on a field, e.g. maximum character count or remaining hours. Frequently used with CharacterCount.
disabled  booleanIf true, the element will be disabled.
helperText  ReactNodeAdditional descriptive information for the input.
invalid  booleanfalseIf true, the input will be shown in an invalid state.
label  RequiredReactNodeLabel for the associated input.
name  RequiredstringName of the input. Submitted with the form as part of a name/value pair.
optionalText  stringText used to indicate that a field is not required.
validationText  ReactNodeValidation message associated with the input.

TextArea can be tested by following the same patterns as TextField.