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.

Please be mindful not to enter any sensitive information

Invalid state

If the isInvalid prop is set to true, the errorMessage contents will be displayed below the input field, replacing helperText.

Error message

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

PropDefaultDescription
label-string

The label for the textarea field

isInvalid?-boolean

If true, the textarea will be invalid

isRequired?-boolean

If true the textarea will be required

isDisabled?-boolean

If true, the textarea will be disabled

helperText?-string

Text that provides additional guidance to the user

errorMessage?-string

The error message to display if isInvalid is true

onChange?-ChangeEventHandler<HTMLTextAreaElement>
placeholder?-string
resize?'vertical'ResizeProp

The resize behavior of the textarea

minRows?3number

The minimum number of rows to display without requiring scrolling or resizing. To disabled resizing use the resize prop.