List Boxes: Design Guidelines

List boxes allow users to select from a list of values.

If a list box is a superior or subordinate control, follow the Subordination guidelines.

Make a drop-down list box as wide as the longest value it contains, plus 30 percent (for expansion during localization). Drop-down list boxes do not scroll horizontally and don’t have InfoTips that reveal obscured values, so users can read only what you make visible in the control.
Vertically, make the list large enough to display three to eight items when open.
If the values in a drop-down list represent a property for which the current state is mixed, display no selected value. In the closed state, the control should appear to be empty.
Do not move focus from the drop-down list after the user selects a value in the list. Moving focus surprises and disorients the user. For example, do not open a new surface as soon as a selection is made.
Exceptions: If the drop-down list is in a toolbar, you may move focus upon selection. Also, if the drop-down list has subordinate controls that become active when a value in the list is selected, you may move focus to the first of the subordinate controls.

Allow multiple selection by default.

Developer Note:

Multiple Selection: To allow multiple selection in a basic list box, set the style bit LBS_MULTIPLESEL.
If you allow extended selection, cue users with instructional text such as “Select one or more x.” Without such a cue, users will have to experiment with list boxes to see if extended selection is available.

Developer Note:

Extended Selection To allow extended selection in a basic list box, set the style bit LBS_EXTENDEDSEL.
Do not embed check boxes in a list box in order to create a custom check-box list. This would not be accessible, and a common-control alternative is available. Use a list-view control with the check-box style instead.
Allow horizontal scrolling. Even if the longest value is entirely visible in English, it might not be when localized. When you allow a horizontal scroll bar to appear as needed, localizers won't have to request this functional change later.

Developer Note:

Horizontal ScrollingTo allow horizontal scrolling in a basic list box, set the style bit WS_HSCROLL.
When sizing a list box, show as many of the values as space allows. Minimally, make the box height no fewer than three values and generally no more than eight, unless the size of the list varies with the size of the window.
As much as possible, make the width of the box the same as the longest probable value in the list.

See Also