Anatomy
Note: Image is not to scale
- Label
- Value
- Border
- Browser Default drag icon
Options
Resize
The text area can prevent reize by setting canResize to false.
Helper text
The text area has optional helper text.
Behavior
Default
The text area can resize by default.
Error
Success
Required
Guidance
Do not use textarea for single or short inputs
Textarea are for multiline text such as a sentence or a paragraph.
API Reference
| Prop | Description | Type | Default | Required |
|---|---|---|---|---|
| defaultValue | The initial input element value for uncontrolled components | string | ---- | False |
| disabled | The underlying textarea element disabled attribute | enum boolean | ---- | False |
| error | if the element has an error | enum boolean | ---- | False |
| errorMessage | Text displayed below the input to describe the cause of the error | enum ReactNode | ---- | False |
| helperText | Text displayed below the input to provide additional context | enum ReactNode | ---- | False |
| label | Label (use instead of Placeholder) | string | ---- | True |
| id | An id attribute to allow the <InputTextarea> to be associated with a <label> element for accessibility purposes | string | ---- | True |
| name | A name attribute to set the name of the associated data point submitted to the server when the form is submitted. | string | ---- | True |
| onBlur | Callback executed when the input fires a blur event | FocusEventHandler<HTMLTextAreaElement> | ---- | False |
| onChange | Callback executed when the input fires a change event | (event: ChangeEvent<HTMLTextAreaElement>) => void | ---- | False |
| onFocus | Callback executed when the input fires a focus event | FocusEventHandler<HTMLTextAreaElement> | ---- | False |
| required | The input elements required attribute | enum boolean | ---- | False |
| value | The input element value for controlled components | string | ---- | False |
| canResize | Enable to allow for the text area to be resized by the user. | enum boolean | false | ---- | False |