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 | - | string The label for the textarea field |
isInvalid? | - | boolean If |
isRequired? | - | boolean If |
isDisabled? | - | boolean If |
helperText? | - | string Text that provides additional guidance to the user |
errorMessage? | - | string The error message to display if |
onChange? | - | ChangeEventHandler<HTMLTextAreaElement> |
placeholder? | - | string |
resize? | 'vertical' | ResizeProp The resize behavior of the textarea |
minRows? | 3 | number The minimum number of rows to display without requiring scrolling or resizing.
To disabled resizing use the |