Overview

Dropdown

Usage

When to use
Use when you have a list of options for users to choose from in a compact way. Commonly used in forms and as a filtering function in lists.
Simple dropdown
Users are able to choose one option from the list.
Grouped dropdown
Options are grouped into meaningful sections for users to easily scan and select.
Dropdown with search
Users can type into a search field to filter out their choice.
Multiple-selection dropdown
Users can select multiple options from the dropdown list. The multiple-selection dropdown also supports grouped sections and the search functionality.
How best to use
When to use a default option
Offer a default option when you know the user's preference based on historical data, when there's only one option in the dropdown, or if you want to speed up the process. Otherwise, there's no need to set a default.
Do
Use it when the input should be in a structured format for validation and analysis. Otherwise, alternative patterns may work better, such as text input.
Do
Organise, sort, and group the list of options logically. Depending on context, you may want to present the most frequently used option at the top.
Caution
Only offer a long list of options if they're logical and understandable to users, such as a list of countries, country codes, or page zoom levels.
When not to use
Don't use it when you want the users to read or compare all options
Don't use a dropdown if it's important for users to read and compare all options carefully. Instead, use radios where all information is presented upfront.
⁠
Don't use it when radios are a better alternative
Dropdowns take more time to select options compared to radios, so choose radios over dropdowns whenever appropriate.
⁠
Don't use it when typing may be faster
If you're asking for a familiar piece of information from users, such as their birthdays or age, allow them to type instead of choosing from a dropdown.
Component comparison table
Component
Usage
Number of options
Checkbox
Use for selecting one or more options out of a list of independent, always visible options.
Commonly used for one to 6 options. If you have many options, consider organising them into subsections for easy reading.
Radio
Use for selecting one option out of a list of mutually exclusive, always visible options.
Commonly used for 2 to 6 options. Unsuitable for too many options
Chip
Use when selecting one or more short options, stacked horizontally.
Commonly used for at least 2 and up to 9 options.
Switch
Use for toggling between 2 opposing states like a digital switch. Best for adjusting settings.
For 2 built-in, opposing options.
Dropdown
Use when selecting one or more options out of a list that expands when the users interact with it.
When there's one or more options. Commonly used for scenarios with more than 6 options.