| Table of Contents |
|---|
...
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.
(Optional) A character count, where there is a restrictive limit to the amount of text which can be entered. The count shows:
the number of characters currently entered in the text field, and
the maximum number of characters allowedremaining characters count a user can enter.
States
State | Default | Filled |
|---|---|---|
Regular |  | |
Hover |  |  |
Active |  |  |
Disabled |  |  |
Read-Only |  |  |
Error |  |  |
Warning |  |  |
Focused |  |  |
Focused, Hover |  |  |
Focused, Active |  |  |
...
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), if no text has been added the hint text will reappear.
The character count will increase as text is entered. (See Validations and errors below for when the character limit is reached).
In special cases, the height of the text area will increase automatically in response to the amount of entered text.
A vertical scrollbar may be used where the user enters more lines of text than the text area can show.
...
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:
...
The orange or red border will be removed when the content is updated and becomes valid.
Character count
When the character count is reached, the count of the characters currently entered in the text area will become red and bold.
The user should not be stopped from entering more characters when the limit is reached.
...
Best practices
Use:
where the user only needs to enter a large amount of text
...