Basic select component – live example

When to Use

Use the select component:

• If users need to select only one item from a short list of options.
• If the values in the option list are of secondary importance and do not need to be displayed right away.

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 combobox
• You need to display more than one attribute or search on multiple attributes. In this case, use an input with a select dialog / value help.
• All available options need to be displayed right away. In this case, use radio buttons.

Anatomy

1. Input field: Displays the selected value.
2. Value/Text: The content that is selected.
3. Dropdown button: Expands and collapses the option list.
4. Option list: Contains the selectable values.

Variants

Two-Column Layout

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

Adjustable Width

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.

Related Links