With the select control users can select a value, or multiple values, from a set of items with text labels. The select control has two modes of operation: drop-down list mode and list box mode.
Use the select control to let users select one or more values from a set of items that can be adequately represented using single lines of text.
When there are fewer than eight items, consider using radio buttons (if only one item can be selected) or check boxes (if multiple items can be selected) instead.
The select control has two modes: Drop-down list mode and List box mode.
In this mode, the select control conserves on-screen space by showing only the currently-selected item.
Users must tap a faceplate, which opens a drop-down, to see other selectable items. Users can select only one item in this mode.
- Use this mode when the selection items are of secondary importance in the flow of your app.
If the default option is recommended for most users in most situations, showing all the items by using the list box mode might draw more attention to the options than necessary. You can save space and minimize distraction by using the drop-down list mode.
Use this mode when you need to save space.
Use the select control’s drop-down list mode to conserve on-screen real estate. The drop-down list mode lets you provide users with a variety of choices, but uses a small footprint.
In this mode, the select control is always open and displays all its items without any additional interaction. This mode supports both single selection and multiple selection.
When using this mode, set the select control's size so that it is large enough to display all its items without the user having to pan or scroll.
- Use this mode when there are fewer then 10 items and the items are important enough to display prominently.
- Use this mode for multi-selection.
If there are fewer then 10 items and they should be prominently displayed, use the list box mode. If you have more than ten items and want to enable multi-selection, use a ListView.
Here's an example of an appropriate use of the select control in list box mode:
In this example, there are only a handful of different fruits to choose from. They are simple items, but they’re also an important aspect of the app itself. By using the inline mode, the selectable options are visible at all times.
- Guidelines for buttons
- Guidelines for radio buttons
- Guidelines for toggle switches
- Guidelines for checkboxes