Guidelines for drop-down lists

Applies to Windows and Windows Phone

A sample of what a standard drop-down list control looks like

Description

A drop-down list lets users make a choice among a list values. A drop-down list is a list in which the selected item is always visible, and the others are visible on demand by clicking a drop-down button. In HTML, a drop-down list is known as a select control in flyout mode. In XAML, a drop-down list is known as a combo box. With a drop-down list, users can choose one and only one option.

You can also create a list that displays all items without any additional interaction. It supports both single selection and multiple selection. In HTML, this kind of list is known as a select control in inline mode. In XAML, this list is known as a list box. For more info, see Guidelines for list boxes (or select).

Examples

Here is an example of a drop-down list. The items in the list are only visible when the user selects the drop-down button.

A screenshot of the Bing Food and Drink app that illustrates the standard drop-down list control

Here is an example of a list box in which all items in the list are always visible.

Is this the right control?

Use a drop-down list control to let users select a single value from a set of items that can be adequately represented using single lines of text.

Don't use this controls to display items that contain multiple lines of text or images. Use a list view or grid view instead.

When there are fewer than five items, consider using radio buttons (if only one item can be selected) or check boxes (if multiple items can be selected) instead.

Use a drop-down list 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 a list box might draw more attention to the options than necessary. You can save space and minimize distraction by using a drop-down list.

Dos and Don'ts

  • Limit the drop-down list item’s text content to a single line.
  • Sort items in a drop-down list in a logical order, such as grouping related options together, placing most common options first, or using alphabetical order. Sort names in alphabetical order, numbers in numeric order, and dates in chronological order.
  • Add padding of 27 pixels on the right side of your content to keep the scrollbars from overlapping the content.

Related topics

For designers
Guidelines for list boxes (or select)
Guidelines for flyouts
Guidelines for message dialogs
Guidelines for radio buttons
Guidelines for check boxes
Guidelines for toggle switches
Guidelines for grid views and list views
Guidelines for semantic zoom
Guidelines for sliders
Laying out your UI
For developers (HTML)
select element | select object
Adding select controls
For developers (XAML)
ComboBox class
Adding combo boxes and list boxes

 

 

Show:
© 2014 Microsoft