Guidelines for drop-down lists
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).
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.
Here is an example of a list box in which all items in the list are always visible.
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.
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.
- 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.
- 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