#Overview
Input fields allow users to enter information into the system.
Along with dropdowns, they play an important role in the registration and checkout process in our online store.
See Forms for related guidelines and general best practices.
#When to use
- In a form
- To enter a discount code
- To name something (such as a new watch list)
- To enter numbers in range filters (such as a price range filter)
- Date input (such as date of birth)
- Number-only (such as a reference number or IBAN)
- Phone number
- Password
- Search
#Don’t use for
- Choosing from a list of options (use a Dropdown)
#Anatomy
- Field Label: Describes the purpose of the field
- IconBefore (optional): Static icon to to support the label by providing visual context
- Help text (optional): Critical information to help the user complete the field correctly
- Placeholder text (optional): Non-critical information to help the user complete the field correctly
- Container
- IconAfter (optional): Interactive icon to perform an action (such as show or hide password)
- Error text: Displayed in error state
- Optional indicator (optional): Display if field is not mandatory
- Info (optional): Triggers additional, non-critical information in a Popover
#Spacing
#Best practices
#Mark optional fields
Do
Always note when an input field is optional.
Don't
Do not mark mandatory fields.
#An ellipsis indicates truncation
Do
Use an ellipsis to truncate an input.
Don't
Do not make users guess if the input is longer.
#Error messages are displayed inline
Do
Error messages are always displayed inline, below the field.
Don't
Do not use an alert to display an error for a single input field.
#Assist users with help text
Do
An example of a correct input can be provided as help text when necessary.
Don't
Do not show critical information only as a placeholder. This text disappears when the user starts typing and is no longer helpful.
#Display non-critical information in a popover
Do
A popover can display information that is not critical to a successful user experience.
Don't
Do not show critical information in a popover, because a popover is hidden by default.
#Types of input fields
#Text
#Text with character count
#Text area
#Date
#Phone number
#Number-only
#Password
The eye icon allows users to show or hide their password. When the eye icon is closed, the password is not visible. Clicking or tapping the closed eye changes the icon to an open eye and makes the password visible, and vice versa.
#Search
#States
#Galaxus
#Digitec
- Normal
- Focus-visible
- Filled
- Disabled
- Error
#Validation
Error messages appear in form fields when a user input is incorrect or missing. Users should be alerted to incorrect user input after deselecting it (onBlur).
If a form field can only be validated after submitting, the error should be explained and a solution offered.
Since the error replaces the help text, the help text should be included as the last part of the error message.
Error messages should be clear, short and understandable, and formulated from the user's perspective.
