The select component enables users to select an item from a predefined list.
Basic select component – live example
When to Use
Don’t use the select component :
- If users need to choose between only two options. Use a switch instead.
- You need to offer a very large set of options. In this case, use a combo box
- You need to display more than one attribute or search on multiple attributes. In this case, use an input field with a select dialog / value help.
- All available options need to be displayed right away. In this case, use radio buttons.
- Input field: Displays the selected value.
- Value/Text: The content that is selected.
- Dropdown button: Expands and collapses the option list.
- Option list: Contains the selectable values.
Anatomy of the select component
Use the two-column layout if you need to display additional information for each option, such as currencies or abbreviations.
Select with a two-column layout – live example
The width of the option list adapts to its content.
Select with adjustable width – live example
Basic Select with Icons
You can display an icon for each option.
Select with icons
Behavior and Interaction
If the select component is editable, the user can select an item by first clicking on the dropdown button and then choosing a specific option from the list.
On mobile phones, the option list is displayed as a full screen dialog.