Description
ONGOING
A text field is a single-line text input control used to allow users to enter small amount of text or numeric data in one line.
Usage & Behavior
General guidelines
Structure
The text field consists of:
Label - a meaningful label of what information the user needs to provide.
Input Field (the input field can display a hint text).
States
Interaction
Hover - hovering the text field will change the cursor to text cursor.
Active -
Clicking the text field will place the cursor at the cursor position and the hint text will disappear.
Double clicking a word inside the textfield will select that word.
Triple clicking the text field will select the whole text in the text field, if exists.
Non active - If no text was inserted, the hint text will be displayed again when the field will lose focus.
If a character limit was set, reaching the limit will prevent the user from keeping typing.
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.
Text fields should indicate their state - enabled/disabled, empty/filled, valid/invalid.
Proactively guide users to prevent errors. Help them to identify and fix errors as they occur.
Provide an indicator when the field is required.
Accessibility compliance
<<In general each component should be A11y complied, please follow the 3 guidelines linked below. At the very least we should document that each component is in compliance with each of the 3>>
Design
Zeplin link | Screen thumbnail |
|---|---|
 |
Current appearances in our products
WFM → Calendar → Employee Filter
WFM → Queue Analytics → Create Statistics View
