| Table of Contents |
|---|
...
Preceding label - a meaningful label describing the information the user needs to provide.
Input Field.
(Optional) Hint text - example text a short description of the expected input text, shown within the input field.
...
On hover over the text field, the mouse cursor will change to a text cursor.
On click:
Where no text has been inserted into the field:
A text cursor will appear at the beginning of the input field.
The hint text will disappear.
Where text already exists in the field:
A text cursor will appear in the place where the user clicked.
Double-clicking a word inside the text field will select that word.
Triple-clicking the text field will select all of the text.
Clicking away from When the text field becomes inactive the hint text will reappear, if no other text has been added, the hint text will reappear.
If a character limit was has been set, reaching the limit will prevent the user from keeping typingentering any more characters.
When used as a secured field (for example, For secured fields (such as password), the characters are hidden, also even when typing (. They will be displayed as dots ).instead:
 |
Validations and errors
Please refer to to the Field validation page for more information.
A text field with a warning will have an orange border and a warning icon, as displayed shown below:
 |
A text field with an error will have a red border and an error icon, as displayed shown below:
 |
Best practices
Use
...
:
- The
When the user needs to enter a short, single-line text (plain text, password, URL, phone number, or email address) or number.Do not
Don’t use
...
if:
The user needs to enter dates and times
. In this case,→ use a Date Picker or a Time Picker.
The user needs to enter
long texts. In this case,a lot of text → use a Text Area.
The user needs to perform a search
. In this case,→ use a Search Field.
Always provide a clear and meaningful preceding label for any input field.
Where appropriate, help users by providing a hint texts which describes text describing the expected value of the fieldinput text.
Proactively guide users to prevent errors. Help them Help users to identify and fix errors as they occur.
When the user is filling in a secured text field, allow the user them to temporarily view the inserted inputtext.
Accessibility compliance
Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.
Design
Zeplin link | Screen thumbnail |
|---|---|
 |
...