Description
ONGOING
A text field is a single-line text input control. It allows users to enter a small amount of text or numeric data in one line.
 |
Types
Type | Usage |
|---|---|
Basic text field | The most common input field. The user can insert text or numeric data. |
Secured text field | Used when text needs to be secured. |
Usage & Behavior
General guidelines
Structure
The text field consists of:
Preceding label - a meaningful label describing the information the user needs to provide.
Input Field.
(Optional) Hint text - example text shown within the input field.
 |
States
State | Default | Filled |
|---|---|---|
Regular | |  |
Hover |  |  |
Active |  |  |
Disabled |  |  |
Read Only |  |  |
Error |  |  |
Warning |  |  |
Focused |  |  |
Focused, Hover |  |  |
Focused, Active |  |  |
Focused, Disabled |  |  |
Interaction
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 the text field, if no text has been added, the hint text will reappear.
If a character limit was set, reaching the limit will prevent the user from keeping typing.
When used as a secured field (for example, password), the characters are hidden, also when typing (displayed as dots).
 |
Validations and errors
Please refer to Field validation page for more information.
A text field with a warning will have an orange border and a warning icon, as displayed below:
 |
A text field with an error will have a red border and an error icon, as displayed below:
 |
Best practices
Use the text field if:
The user needs to enter a short, single-line text (plain text, password, URL, phone number, or email address) or number.
Do not use the text field 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, use a Text Area.
The user needs to perform a search. In this case, use a Search Field.
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.
Proactively guide users to prevent errors. Help them to identify and fix errors as they occur.
When filling a secured text field, allow the user to temporarily view the inserted input.
Accessibility compliance
Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility
Design
Zeplin link | Screen thumbnail |
|---|---|
 |