| Table of Contents |
|---|
Description
...
Preceding label - a meaningful label describing the information the user needs to provide.
Input Field.
(Optional) Guiding / hint text (optional) - a short description of the expected input text, shown within the input field.
A show/hide password button (secured text fields only, optional).
...
States
State | Default | Filled |
|---|---|---|
Regular |  |  |
Hover |  |  |
Active |  |  |
Disabled |  |  |
Read Only |  |  |
Error |  |  |
Warning |  |  |
Focused |  |  |
Focused, Hover |  |  |
Focused, Active |  |  |
Focused, Disabled |  |  |
...
On hover over the text field, the mouse cursor will change to a text cursor.
On click:
Where 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 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.
As text is entered it will appear from the left-hand side.
Text characters may be masked (secured text field only).
Once the cursor reaches the end of the field, it will stop and new characters will be added at that point. The start of the text string will disappear on the left-hand side of the field.
If a character limit has been set, reaching the limit will prevent the user from entering any more characters.
When the user clicks away and the field becomes inactive:
if the text string exceeds the width of the field, the start of the text string will come back into view.
if no text has been added the hint text will reappear.
Validations and errors
Please refer to the Field Validation page for more information.
A text field 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.
Additional Inputs
...
Numeric text fields will prevent any characters other than numbers from being entered.
...
When Caps lock or Num lock are on, secured text
...
fields (e.g.
...
password)
...
When typing, characters are masked.
The field can contain a show/hide password button.
In case Caps lock or Num lock are on, a corresponding tooltip will appear (see Common Messages Repository).
...
will show a message warning the user - see the Common Messages Repository for wording.
Best practices
Use:
where the user needs to enter a short, single-line text in plain text, such as a password, URL, phone number or email address.
...
the user needs to enter dates and times → use a Date Picker or a Time Picker.
the user needs to increase or decrease a numeric value → use aNumeric Stepper.
the user needs to enter a lot of text → use a Text Area.
the user needs to perform a search → use a Search Field.
...