Textarea
An input component that allows users to input multiple lines of text.
Examples
Helper text and placeholder
The helperText prop can be used to provide additional information about the input field below it.
Additionally, the placeholder prop can be used to show the user how to format the data we are asking for.
Invalid state
If the isInvalid prop is set to true, the errorMessage contents will be displayed below the
input field, replacing helperText.
Resizing
By default, the textarea will resize vertically to fit its content.
It can also be set to 'both', ''horizontal or 'none'. Using 'none' disables the resize behavior.
Minimum amount of rows
To define what number of rows the textarea should be displayed with initially, you can use the minRows prop.
API Reference
| Prop | Default | Description |
|---|---|---|
label | - | stringThe label for the textarea field |
isInvalid? | - | booleanIf |
isRequired? | - | booleanIf |
isDisabled? | - | booleanIf |
helperText? | - | stringText that provides additional guidance to the user |
errorMessage? | - | stringThe error message to display if |
onChange? | - | ChangeEventHandler<HTMLTextAreaElement> |
placeholder? | - | string |
resize? | 'vertical' | ResizePropThe resize behavior of the textarea |
minRows? | 3 | numberThe minimum number of rows to display without requiring scrolling or resizing.
To disabled resizing use the |