TextArea
TextArea allows for multi-line input.
Props
Usage guidelines
- Allowing users to input long portions of free-form text while ensuring all text entered remains visible.
- Allowing users to type free-form options that get converted into Tags within the TextArea.
- For inputs that expect a certain format, like a date or email. Use a DatePicker or TextField instead.
Example
A TextArea
will expand to fill the width of the parent container.
Example: Disabled
Example: Helper Text
Whenever you want to provide more information about a form field, you should use helperText
.
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.
Example: ref
A TextArea
with an anchor ref to a Popover component
You can include Tag elements in the input using the tags
prop.
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.
Autofocus
TextArea
intentionally lacks support for autofocus. Generally speaking,
autofocus interrupts normal page flow for screen readers making it an
anti-pattern for accessibility.
onSubmit
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 TextArea
in a form
and attach an onSubmit
handler to that form
.