Description
A text area is a multi-line text input control. It is used where the user is expected to enter a lot of text.
Usage & Behavior
General guidelines
Structure
The text area consists of:
Preceding label - a meaningful label describing the information the user needs to provide.
Input Field.
(Optional) Guiding/hint text - a short description of the expected input text, shown within the input field.
States
State | Default | Filled |
|---|---|---|
Regular | |  |
Hover |  |  |
Active |  |  |
Disabled |  |  |
Read Only |  |  |
Error |  |  |
Warning |  |  |
Focused |  |  |
Focused, Hover |  |  |
Focused, Active |  |  |
Interaction
On hover over the text area, the mouse cursor will change to a text cursor.
On click:
Where no text has been added to the text area:
a text cursor will appear at the beginning of the text area.
the hint text will disappear.
Where text already exists in the text area:
a text cursor will appear in the position where the user clicks.
double-clicking a word inside the text area will select that word.
triple-clicking the text area will select all of the text.
When the text area becomes inactive (user clicks away) the hint text will reappear, if no other text has been added.
If a character limit has been set, reaching the limit will prevent the user from entering any more characters.
In special cases, the height of the text area will increase automatically in response to the amount of entered text.
Validations and errors
Please refer to the Field Validation page for more information.
A text area with a warning will have an orange border and a warning icon, as shown below:
A text area with an error will have a red border and an error icon, as shown below:
The orange or red border will be removed when the content is updated and becomes valid.
Best practices
Use:
where the user only needs to enter a large amount of text
Don’t Use:
where the user only needs to enter a short amount of text → use a Text Field.
General
Always provide a clear and meaningful preceding Label for any input field.
Where appropriate, help users by providing a guiding/hint text describing the expected input text.
Accessibility compliance
Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.
Focus management
Keyboard | Description |
|---|---|
Tab | Navigates to the next component. |
Shift + Tab | Navigates to the previous component. |
Space | Acts as within a text input. |
Enter | Acts as within a text input. |
Esc | N/A |
Arrows | Acts as within a text input. |
Mouse | Description |
|---|---|
Right click | Set Focus state on component |
Design
Zeplin link | Screen thumbnail |
|---|---|
 |