Description
ONGOING
A text area is a multi-line text input control.
Used when the expected user input is long.
 |
Usage & Behavior
General guidelines
Structure
The text area consists of:
Label - a meaningful label of what information the user needs to provide.
Input Field (the input field can display a hint text).
 |
States
State | Default | Filled |
|---|---|---|
Regular | |  |
Hover |  |  |
Active |  |  |
Disabled |  |  |
Read Only |  |  |
Error |  |  |
Warning |  |  |
Focused |  |  |
Focused Hover |  |  |
Focused Active |  |  |
Interaction
Hover - hovering the text area will change the cursor to text cursor.
When text exists and the field is active -
Clicking the text area will place the cursor at the cursor position.
Double clicking a word inside the text area will select that word.
Triple clicking the text area will select the whole text in the text area, if exists.
When text was not inserted and the field is active -
Clicking the field will place the cursor at the beginning and the hint text will disappear.
Non active - If no text was inserted, the hint text will be displayed again when the field will lose focus.
If a character limit was set, reaching the limit will prevent the user from keeping typing.
In special cases, the text area height will be increased manually, according to the length of the text.
Validations and errors
Please refer to Field validation page for more information.
A text area with a warning will have an orange border and a warning icon, as displayed below:
 |
A text area with an error will have a red border and an error icon, as displayed below:
 |
The orange/red border will be removed when the content is updated to a valid.
Best practices
For short input, use the text field component.
Always provide a clear and meaningful label for any input field.
Where appropriate, help users by providing hint texts which describes the expected value of the field.
Accessibility compliance
Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility
Design
Zeplin link | Screen thumbnail |
|---|---|
 |