Usage & Type 

The list box is a box that displays a list of items where users can select one item from. If the number of items exceeds the box size, a vertical scrollbar is activated. The list box is read-only.

 

Figure 1: Example of the list box control.

 

Usage

A list box offers a set of choices from which a user can select one item. If the number of items exceeds the control size, a vertical scrollbar is activated. An item in the list box is called list box item. The list box is read-only.

Note: The list box control does not render a descriptive label automatically. Use the label control to add a description. See there, how you can change text attributes if you need to highlight the label, for example, make it bold (see figure 1).

 

Choosing the Appropriate Selection Control

A list box is similar in function to a dropdown list box - both offer a list of items where users can select one item from, that is, both are single-selection lists.

Note: For very small item numbers (2-6) and if the users should see all alternatives, use radio buttons.

 

Design Options for Lists

HTMLB offers several controls for displaying and editing data sets and for selecting from data sets.

·        Checkbox: multiple selection from small data sets (static).

·        Radio Button: single selection from small data sets (static).

·        List Box: Single selection from small data sets (static).

·        List Box: Single selection from small to medium data sets (dynamic or static)

·        Item List: Display of small to medium data sets in one column - ordered or unordered (static)

·        Table View: Display and editing of data sets in a variety of display variants - in ore ore more columns (dynamic), single- or multiple-selection possible

 

Note: The cases of checkbox and radio button groups are not discussed here; see Forms - Using Checkboxes and Forms - Using Radio Buttons for details on the layout options for these controls.

 

Dropdown List Box vs. List Box

The overview above showed that a list box is similar in function to a dropdown list box - both offer a list of items where users can select one item from, that is, both are single-selection lists. Here you find criteria for choosing between both controls. In addition, we provide hints when a set of radio buttons is the appropriate choice.

Figure 1: Dropdown list box (left) vs. list box

 

When Use a List Box?

·        If there is more space on the page.

·        For larger item numbers.

·        If users need to know the context of the current selection, that is, the item set or at least part of it.

·        If users need to carefully consider their choice.

·        For users with low mouse abilities.

 

When Use a Dropdown List Box?

·        In table views.

·        If space is limited - it occupies one line only.

·        For smaller item numbers (up to 20 items).

·        If users only need to know the current selection, not the whole set.

·        In shufflers

 

When Use Radio Buttons?

For very small item numbers (2-6) and if the users should immediately see all available alternatives, use radio buttons.

Use larger radio button sets only in special cases, where it is important that all options are visible, where users are untrained, and/or where an application imitates a paper-form, such as a Web-based questionnaire or ordering form.

Note: For multiple choices use checkboxes instead of radio buttons.

 

Item List vs. List Box

Both item lists and list boxes can be used for displaying a set of options. While list boxes can also be used for selecting items we focus here on the display aspect. Item lists are static lists with a "paper-like" appearance; they can be ordered or unordered. List boxes, however, have a "form-like" appearance and also may contain more items than are visible.

If you consider to use a list box, you may check whether a table might also be a valid design option. We also provide some hints for this option.

Figure 2: Item list (ordered, left) vs. list box

 

When Use an Item List?

·        In paper-like applications, such as news, articles, etc.

·        If it is possible to display all items or if the page or application as a whole can be scrolled.

·        If the number of items is fixed

 

When Use a List Box?

·        In form-like applications, typically together with other form elements, such as input fields and selection elements.

·        If a selection is needed.

·        If space may not suffice to display the whole list.

·        If the application or page cannot be scrolled in order to display more items.

·        If bullets or numbers should not appear.

 

When May a Table View Be Used?

In the following, we list scenarios, where a table view may be used instead of a list box. Note that this an option to consider, not a recommendation. The only exception is multiple-selection, which is available for the table view only.

Typically, you would use the table view in the transparent design for this application. Also note that a table view introduces "visual overhead", such as the title, column headers, and scroll buttons.

·        In form-like applications where the data form a separate information unit that cannot be mixed with fields.

·        Where a multiple-column display is needed.

·        Where scroll buttons are preferred over scrollbars (page-wise scrolling).

·        Where multiple-selection is needed (this is currently not possible with list boxes)

Note: Static multiple-selection can also be implemented using a checkbox group.

 

Design-Relevant Attributes

You can set the number of displayed lines of a list box (size), its width (width), and whether it is enabled or disabled (Boolean attribute disabled).

See Control API for List Box for details.

 

Related Controls

Dropdown List Box, Item List, Radio Button, Table View, Tree View