Guidelines for the Select control (Windows Store apps)
Note Pre-Release Content: This topic is currently being adapted to apply to both Windows 8.1 and Windows Phone (code-named "Blue"). To view the Windows 8.1 version of this topic, click here.
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.
Is this the right control?
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.
Don't use the select control to display items that contain multiple lines of text or images. Use a ListView instead.
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.
Choose the right mode
The select control has two modes: Drop-down list mode and List box mode.
When to use the drop-down list mode
In this mode, the select control conserves on-screen space by showing only the currently-selected item.
.png "A select control in drop-down list mode")
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.
When to use the list box mode
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.
.png "A list box in inline mode")