TextArea will expand to fill the width of the parent container.
Example: Helper Text
Whenever you want to provide more information about a form field, you should use
Example: Error message
A TextArea can display its own error message.
To use our errors, simply pass in an
errorMessage when there is an error present and we will handle the rest.
TextArea with an anchor ref to a Popover component
You can include Tag elements in the input using the
Note that the
TextArea component does not internally manage tags. That should be handled in the application state through the component's event callbacks. We recommend creating new tags on enter key presses, and removing them on backspaces when the cursor is in the beginning of the field. We also recommend filtering out empty tags.
This example showcases the recommended behavior.
TextArea intentionally lacks support for autofocus. Generally speaking,
autofocus interrupts normal page flow for screen readers making it an
anti-pattern for accessibility.
TextArea is commonly used as an input in forms alongside submit buttons.
In these cases, users expect that pressing Enter or Return with the input
focused will submit the form.
Out of the box,
TextArea doesn't expose an
onSubmit handler or
individual key event handlers due to the complexities of handling these
properly. Instead, developers are encouraged to wrap the
form and attach an
onSubmit handler to that