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 can contain either text-only values (a) or text values with an icon in front (b). Keep the text values as short as possible because the list uses single lines only. Values that are too long may be truncated. This is especially important when you use icons.

Only use icons if they help users better identify or understand the presented options. To set icons, use the icon property for each list entry.

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 with an icon as a trigger for sorting, 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.

Width of the Option List

By default, the width of the option list adapts to the width of the longest entry. The maximum width of the option list is set to 600 px.

Text Wrap in the Option List

The option list doesn’t support horizontal scrolling. By default, entries that exceed the maximum width of 600 px for the dropdown are truncated. If you expect the dropdown to contain longer entries, we recommend wrapping items in the option list to enable users to read the full text, (property: wrapItemsText). If wrapping is enabled, the text can wrap to multiple lines.