Use select if:

• Users need to select one item exclusively from a short list of options (for example, fewer than 12 items).
• The values of the option list are of secondary importance and do not need to be displayed right away.

Do not use select if:

• Users need to choose between two options, such as On or Off and Yes or No. In this case, consider using a switch control instead.
• Users need to pick one item from a very large set of options. In this case, consider using the combo box instead.
• You need to display more than one attribute. In this case, consider using the input field with a select dialog or a value help dialog instead.
• The user needs to search on multiple attributes. In this case, consider using the input field with select dialog or value help dialog instead.
• Your use case requires all available options to be displayed right away, without any user interaction. In this case, consider using radio buttons or a radio button group instead.

Size S

Size M

Size L

Select Trigger

The trigger to open the option list is either the Select field (1), which also displays the current selection, or an icon (3).

Option List

The option list (2) displays all the items available to the user. The selection is always highlighted. Selecting another option from the list moves the highlight to the selected option.

Full Screen Title Bar for Size S

Opening the select control on a smartphone brings up the option list in full screen mode. The full screen mode can be closed using the icon on the top right corner (5).

The option list contains text values only. Keep the text values as short as possible because the list uses single lines only. Values that are too long may be truncated.

If you need to indicate that none of the selection options are selected, or you need to allow the user not to select an option, provide (None) (1) as an option and place it at the beginning of the list.

If you need to indicate that all items apply, for example, as a list filter, provide All as an option and place it at the beginning of the list.

If your use case requires a blank input field instead of (None), use a combo box instead.

If the select control is placed in a toolbar as an icon-only version for grouping or filtering a set of items, consider the following guideline:

Sort, Group, and Filter:

• (Not sorted)
  Note: In most cases, this option is not necessary; just show the default sort settings instead.
• (Not filtered)
• (Not grouped)

For more information about the toolbar, see toolbar overview.

Define a default selection whenever possible (2). If the selected item is not specified, the first one is selected.

Logical: Sort items into a meaningful order. Group related options together and show the most common options first, followed by less common options. Sort the options alphabetically if more than eight select options are available. This helps the user find the right option quickly.