Best practices
When to use
- Use to let a user choose a single option from an dropdown menu.
- Use when you have 4 or more options to choose from.
- Use when the number of options are dynamic.
- Use helper and placeholder text to provide additional, non-critical instructions.
When not to use
- Avoid using selects when there is less than 4 options. Consider using radio buttons instead.
- Avoid using select fields for navigational purposes.
- Don’t combine different list item types in the same dropdown menu.
Anatomy
- Label (optional): Text that clearly indicate the user about the content they need to enter in the field.
- Dropdown field: The dropdown field is used as the default trigger element. Alternatively a button can be used instead for e.g. actionable purposes. Check the examples for more info.
- Helper text (optional): Assistive text that can provide additional aid or context to the user.
- Dropdown menu: A customisable menu
- Icon before (optional)
- Dropdown item
- Error text
- Scrollbar
- Selected icon: Selected dropdown items are marked with a checkmark icon.
Menu variants
There are 4 types of dropdown menu items to choose from: Default, Text & details, Product, and With icon.
Icons
Icons can be displayed when the “With icon” variant is selected:
Text & details
For situations where an assistive detail text is needed to compliment the primary text.
Product
For lists of products there is a dedicated dropdown menu to make it easier for customers to scan the product ID:
Content guidelines
|
✅ Do |
🛑 Don’t |
|---|---|
|
When organizing dropdown menu items, sort the list in a logical. In most cases ascending, arranging numbers from smallest to largest and text from A to Z. |
- Keep dropdown item names to a single line. - Avoid using all caps for dropdown items. - Avoid using punctuation for dropdown items. |