TextArea

TextAreas allow users to enter larger portions of text, typically as part of a Form. The TextArea component only allows for basic Text. If you require more styling options to be applied to the text input, refer to the RichTextEditor documentation.

For more information on how to use the features and props for this component, check out the developer documentation.

TextAreas, like Inputs, can be controlled or uncontrolled components. For a controlled component, make use of the value and onChange props. For an uncontrolled component, use the defaultValue prop. The TextArea component allows for standard Form field structures such as being set required, disabled, or readOnly, as well as including a label, status, or info.

The TextArea component can restrict the length of a message through props such as maxLength, displayCharCount, and hardStop. It can also enforce a minLength to the input. If you would like the TextArea to grow or shrink in height depending on the content of the input, pass the autoResize prop. You can also allow users to adjust the size of the TextArea component themselves by enabling the resizable prop.

NameTypeDefaultDescription
autoResizebooleanfalse Enables the Text Area to resize itself automatically.
classNamestringAdditional CSS classes.
defaultValuestringIf you wish to use an uncontrolled input, pass a defaultValue prop and a ref to access the input's native value prop or by other DOM ref means.
disabledbooleanDisable the control. The browser defaults to false.
displayCharCountbooleanfalse Display a live character count in relation to the maxLength.
hardStopbooleantrue Allow or disallow a value beyond the maxLength.
idstringSets DOM id for the control and associates label element via 'for' attribute. If an id is not pass, a random id will be generated for any render.
infoReactNodeIt is recommended to pass a simple string to offer guidance. Text will be styled based on status prop.
labelReactNodePass a string or a fragment with an Icon and string.
labelHiddenbooleanVisually hides the label region.
maxLengthnumberMaximum length of characters that can be input.
minLengthnumberMinimum length of characters that can be input.
namestringSets html name attribute for the underlying control. Useful for mapping to a data field.
onChangeChangeEventHandler<HTMLTextAreaElement>
placeholderstringPlaceholder text. The browser defaults to an empty string.
readOnlybooleanMakes the input non editable and non clickable. The browser defaults to false.
requiredbooleanIndicate if the field is required. The browser defaults to false.
resizablebooleanfalse Allows the user to resize the Text Area.
status
'success' |'warning' |'error' 
Set visual state based on a validation state.
valuestringCreates a controlled input and sets the value. Requires an onChange handler to update value. value + onChange is the recommended method per React team.

You can override the styles of the TextArea component by setting a custom theme on the Configuration component.

{
      •       'min-height': '3.75rem',
      •       padding: 'components.form-control.padding' // → components.form-control.padding
      •     }
    •   }
}