| Name | Type | Default | Description |
|---|---|---|---|
autoResize | boolean | false
| Enables the Text Area to resize itself automatically. |
className | string | | Additional CSS classes. |
defaultValue | string | | If 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. |
disabled | boolean | | Disable the control. The browser defaults to false. |
displayCharCount | boolean | false
| Display a live character count in relation to the maxLength. |
hardStop | boolean | true
| Allow or disallow a value beyond the maxLength. |
id | string | | Sets 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. |
info | ReactNode | | It is recommended to pass a simple string to offer guidance. Text will be styled based on status prop. |
label | ReactNode | | Pass a string or a fragment with an Icon and string. |
labelHidden | boolean | | Visually hides the label region. |
maxLength | number | | Maximum length of characters that can be input. |
minLength | number | | Minimum length of characters that can be input. |
name | string | | Sets html name attribute for the underlying control. Useful for mapping to a data field. |
onChange | ChangeEventHandler<HTMLTextAreaElement> | | |
placeholder | string | | Placeholder text. The browser defaults to an empty string. |
readOnly | boolean | | Makes the input non editable and non clickable. The browser defaults to false. |
required | boolean | | Indicate if the field is required. The browser defaults to false. |
resizable | boolean | false
| Allows the user to resize the Text Area. |
status | 'success' |'warning' |'error' | | Set visual state based on a validation state. |
value | string | | Creates a controlled input and sets the value. Requires an onChange handler to update value. value + onChange is the recommended method per React team. |
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.
Usage
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.
Related components
Properties
Custom theming
You can override the styles of the TextArea component by setting a custom theme on the Configuration component.
Theme properties
{
'min-height':'3.75rem',padding:'components.form-control.padding'// → components.form-control.padding}}}