Autosize or regular textarea
Textarea component supports Input and Input.Wrapper component features and all textarea element props. The Textarea documentation does not include all features supported by the component – see the Input documentation to learn about all available features.
Set loading prop to display a loading indicator. By default, the loader is displayed on the right side of the input. You can change the position with the loadingPosition prop to 'left' or 'right' . This is useful for async operations like API calls, searches, or validations:
Textarea can be used with uncontrolled forms the same way as a native textarea element. Set the name attribute to include textarea value in FormData object on form submission. To control the initial value in uncontrolled forms, use the defaultValue prop.
Example usage of uncontrolled Textarea with FormData :
Use bottomSection prop to render content inside the input border at the bottom. This is useful for displaying character counters, hints, or other supplementary information:
The autosize textarea height grows until maxRows are reached or indefinitely if maxRows is not set:
By default, resize is none ; to enable it, set the resize prop to vertical or both :
Textarea supports the Styles API ; you can add styles to any inner element of the component with the classNames prop. Follow the Styles API documentation to learn more.
Component Styles API
Hover over selectors to highlight corresponding elements
If Textarea is used without the label prop, it will not be announced properly by screen readers:
Set aria-label to make the input accessible. In this case the label will not be visible, but screen readers will announce it:
If the label prop is set, the input will be accessible and it is not required to set aria-label :