| Table of Contents |
|---|
...
On hover over the text field, the mouse cursor will change to a text cursor.
On click:
Where no text has been added to the field:
a text cursor will appear at the beginning of the text field.
the hint text will disappear.
Where text already exists in the field:
a text cursor will appear in the position where the user clicks.
double-clicking a word inside the text field will select that word.
triple-clicking the text field will select all of the text.
When the text field 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.
For secured fields (such as password), the characters are hidden, even when typing. They will be masked instead:
 |
Validations and errors
Please refer to the Field validationValidation page for more information.
A text field with a warning will have an orange border and a warning icon, as shown below:
...
Always provide a clear and meaningful preceding label Label for any input field.
Where appropriate, help users by providing a guiding/hint text describing the expected input text.
When the user is filling in a secured text field, allow them to temporarily view the text.
...
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. |
Design
Zeplin link | Screen thumbnail |
|---|---|
 |
...