#Overview
Dropdowns allow users to choose one option from a list of options.
Along with input fields, 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
- Choosing from a list of options
#Don’t use for
- Typing a simple input (use an Input Field)
- More complex content (use a Selector)
- If less than 5 options, consider using a Radio Button
#Anatomy
- Field Label: Describes the purpose of the field
- IconBefore (optional): Static icon to to support the label by providing visual context. This is rarely used and should only be included if really necessary.
- Help text (optional): Critical information to help the user complete the field correctly
- Placeholder text: Non-critical instruction to prompt the user to choose an option. The default text we use for all dropdowns is “Please choose”.
- Container
- IconAfter: Interactive chevron icon to open or close the dropdown
- 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
#Contents of a dropdown should always be visible
Do
The entire contents of a dropdown should always be visible in the user's viewport.
Don't
The contents of a dropdown should not be hidden so that it forces the user to scroll.
#“Please choose” is not a selectable option
Do
The “Please choose” copy is a placeholder for when an option is not yet chosen.
Don't
“Please choose” should not be selectable inside the dropdown options.
#Use free-form input for many options
Do
If there are more than 10 options, a free-form input (such as a multi-select) is recommended so that users can search for a specific option.
Don't
If there are less than 10 options, a dropdown should not contain a free-form input.
#Mark optional fields
Do
Always note when a dropdown is optional.
Don't
Do not mark mandatory fields.
#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 dropdown.
See Input Field for more best practices that are also relevant to a dropdown.
#Types of dropdowns
#Standard
#Country
#Free-form input
#Multi-select
Multi-select is an advanced type of free-form input, as it displays chips to indicate the chosen options. For example, it is used to edit product specifications on a Product Detail Page (PDP).
Chips will appear if an option is chosen from the dropdown or typed into the field. They can be removed by tapping or clicking the clear (x) icon.
#States
#Galaxus
#Digitec
- Normal
- Active
- Filled
- Disabled
- Error
#Behavior
If there is enough room below a dropdown to open the list, it will open below by default.
If the dropdown is at the bottom of the interface, the list of options will open above to prevent the user having to scroll.
#Validation
See Input Field.