Guidelines for list boxes (or select)
A list box (also known as a select) gives the user a way to choose usually one item, but sometimes several, from a list of items. Items in a list box can be scrolled if there isn't space to show all of them.
.png "Windows Phone app: list box")
Example
.png "A screenshot that illustrates the standard inline select control")
Is this the right control?
Use a list box when the items are important enough to display prominently. A list box should draw the user's attention to the full set of alternatives in an important choice. If you can, set the size of a list box so that its list of items doesn't need to be panned or scrolled. Between 3 and 9 items is the sweet spot for a list box. And a list box works well when its items can vary dynamically.
Factors that indicate against using a list box include:
- There are a very small number of items. A single-select list box that always has the same 2 options might be better presented as radio buttons. Even consider radio buttons when there are 3, or even 4, static items.
- The list box is single-select and it always has the same 2 options where one can be implied as ‘not' the other—such as “on” and “off.” Use a single check box or a toggle switch.
- There are a very large number of items. A better choice for long lists are grid view and list view. For very long lists of grouped data, semantic zoom is preferred.
- The items are contiguous numeric values. Consider a slider.
- The selection items are of secondary importance in the flow of your app or the default option is recommended for most users in most situations. Use a drop-down list instead.
Recommendations
- Verify that the purpose of the list box, and which items are currently selected, is clear.
- Reserve visual effects and animations for touch feedback, and for the selected state of items.
- Limit the list box item's text content to a single line. If the items are visuals, you can customize the size. If an item contains multiple lines of text or images, use a grid view or list view instead.
- If the list box is auto-sized and its items are dynamic, consider how the list box will resize and what will happen to visuals around it. A fixed-sized list box with dynamic items will not resize, but will allow scrolling.
- Use the default font unless your brand guidelines tell you to use another.
- Sort items in a list box 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.
- Don't use a list box to perform commands or to dynamically show or hide other controls.
Additional usage guidance
Appearance and interaction
A list box is always open (in contrast to a drop-down list). Its items can be text strings, or numeric values, or they can be customized to be any other visuals. You're encouraged to be creative. Users are comfortable interacting directly with the content of an app. So you may choose to show the actual content on offer, perhaps drawings or photos of products. Just remember that an item should always give visual feedback when it's tapped, and it should be clear when an item is selected.
A list box control presents its list of items vertically by default. If you want to present items horizontally—particularly if the items are graphics or photos—then it is possible to customize the layout of list box items. If you want items laid out in a horizontal or vertical wrap grid then you can do that, too. Or just use a grid view which lays out items that way by default.
As the user interacts with them, items give feedback by changing state and therefore appearance. Normal, pressed, unselected, selected, and disabled are examples of list box item states.
Tapping an item selects it and, in multi-select mode, tapping a selected item deselects it. In single-select mode, tapping another item transfers selection to that item. A vertical swipe of a finger causes the list of items to scroll up or down with inertia. A list box has a scroll bar whose position indicates the user's relative location within the list of items, and whose size indicates the proportion of items in view. The scroll bar is only visible while scrolling.
Related topics
For designers
Guidelines for drop-down lists
Guidelines for toggle switches
Guidelines for grid views and list views
For developers (XAML)
Adding combo boxes and list boxes
For developers (HTML)