Example
Related
- TextField — Use a when the expected input is a single line of text.
Props
Label
Every text area must have a label.
If you do not provide a visible label, you must specify an aria-label or aria-labelledby attribute for accessibility.
Required
A text area can be marked as required by setting the isRequired prop.
The asterisk symbol used to visually indicate a required field is not part of the label text itself, and will not be read by assistive technology.
Description
The description communicates a hint or helpful information, such as specific requirements for correctly filling out the field.
Error message
The errorMessage communicates validation errors when field requirements aren’t met. Prompting the user to adjust their input.
Disabled
A text area can be disabled by setting the isDisabled prop. This can be used to maintain layout continuity and communicate that a field may become available later.
Read only
The isReadOnly prop makes a field’s text content immutable. Unlike isDisabled, the field remains focusable and the contents can still be copied.
Patterns
Help text punctuation
Help text (e.g. descriptions and error messages) should be written as a complete sentence, with a period at the end. This is to ensure that assistive technology pauses at the end of each block of text, making it easier to understand for the user.
<TextArea label="Comment" description="Your comment may contain up to 280 characters." errorMessage="This field is required."/>Dimensions
By default, the height of the TextArea will grow and shrink to fit the content as the user types.
Providing a height prop will set the height of the TextArea to a fixed value, and allow the user to scroll the content.