List boxes are versatile controls that allow users to select from a list of values. Beyond that common characteristic, list boxes can vary in appearance and function. The two forms are the basic rectangular (or scrolling) list box, for which the list of values is always visible, and the drop-down list box (or picklist), for which the list appears only on demand. Functionally, there are two main types of list boxes: single-selection and multiple-selection list boxes.
The following decision tree will help you choose the list box type appropriate for your context.
Single-Selection List Boxes
In a single-selection list box, only one item in the list of values can be selected at a time. The function is similar to that of option buttons, but a list box can more easily display a large number of values. Single-selection list boxes can be in either the basic or drop-down form. Drop-down list boxes are always single-selection.
In a basic list box, the selected value is highlighted. Clicking another value moves the highlight to the new selection. In the following figure, the value “Chocolate” is selected.
Basic list box
In its closed state, a drop-down list box displays the currently selected value for the control. To change the value, the user opens the list and clicks another value. The selected value then is displayed in the closed list box. Highlighting denotes input focus (not selection, such as in the basic list box). The user clicks a highlighted value to select it. The following figure shows the drop-down list box in its closed and opened states.
Drop-down list box
Although drop-down list boxes are an effective way to conserve space and reduce clutter, they require more user effort to browse and select an item than does a single-selection list box.
Optionally, drop-down list boxes can also be editable. Sometimes called a drop-down combo list box, such a control combines the functionality of an editable text box with a drop-down list box. This is useful when you require the flexibility of a text box yet want to assist users by providing a convenient list of strings they might want to enter.
Drop-down combo list box
A drop-down combo list box combines the characteristics of a text box with those of a drop-down list box. The text box and its associated list box have a dependent relationship. As the user types text in the box, the list scrolls to the nearest match.
A disadvantage of the drop-down combo list box is that it’s visually indistinguishable from a regular drop-down list box. That is, the user’s ability to type text isn’t very discoverable. For that reason, you might consider using the scrolling combo list box (sometimes called an extended combo box), which functions similarly but uses a separate text box to indicate that the user can type an entry.
Scrolling combo list box
Multiple-Selection List Boxes
Extended- and multiple-selection list boxes follow the same conventions for height and width as do single-selection list boxes. Their function is similar to that of check boxes, but multiple-selection list boxes can more easily display many values.
If you allow extended selection, users can employ SHIFT+click and CTRL+click to select groups of contiguous and disjointed values, respectively.
Basic list box with extended selection
Multiple-selection list boxes are generally visually identical to single-selection list boxes. To better expose the multiple-selection functionality, consider using a list view control instead.