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 inserted into added to the field:
A text cursor will appear at the beginning of the input text field.
The hint text will disappear.
Where text already exists in the field:
A text cursor will appear in the place position where the user clickedclicks.
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 displayed as dots instead:
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:
...
A text field with an error will have a red border and an error icon, as shown below:
The orange or red border will be removed when the content is updated and becomes valid.
Best practices
Use:
When Where the user needs to enter a short, single-line text (in plain text, such as a password, URL, phone number, or email address) , or a number.
Don’t use if:
The user needs to enter dates and times → use a Date Picker or a Time Picker.
The user needs to enter a lot of text → use a Text Area.
The user needs to perform a search → use a Search Field.
...