Home > Tutorials > Designing User Interfaces > Combo Boxes

Combo Boxes

There is no commonly agreed upon name and implementation for the type of interface component discussed in this section.

Combo boxes are mainly found in Windows. The Windows interface guidelines (Microsoft, 1995) describe three components that consist of a combination of a text field and a list:

  • a drop-down list box is a combination of non-editable text field and a drop-down list (Microsoft, 1995, 152-153)
  • a combo box is a combination of an editable text field and a permanently displayed list (Microsoft, 1995, 159-160)
  • a drop-down combo box is a combination of an editable text field and a drop-down list (Microsoft, 1995, 160-161)

Although the first component is not called a combo box, in the Windows API, all three components are derived from the combobox class and represent different combo box styles:

Combo Box Style Component
CBS_SIMPLE combo box
CBS_DROPDOWN drop-down combo box
CBS_DROPDOWNLIST drop-down list box

In the Java Foundation Classes (JFC), a combo box is a combination of a text field and a drop-down list. The text field can be non-editable or editable. This corresponds to the definitions of drop-down list boxes and a drop-down combo boxes in the Windows interface guidelines.

Java Foundation Classes Windows
non-editable combo box drop-down list box
editable combo box drop-down combo box

Most other windowing systems do not have such a combination of text field and permanent or drop-down list. Instead, they provide similar functionality through a combination of button and pop-up menu. On the Macintosh, it is called pop-up menu button (Apple, 1997, 26-27), in the NeXTSTEP user interface guidelines, it is referred to as pop-up list (NeXTSTEP, 1992, 136), and in OSF/Motif, it is described as an option menu that pops up from on option button (OSF/Motif, 1993, 6-41).

What is common between these different components is that they enable users to select one item from a list of mutually exclusive items. This is similar to a group of radio buttons or a single-selection list. However, these components have the advantage that they take up less space than a comparable group of radio buttons or a list.

The combination of text field and list has a number of advantages over the combination of button and pop-up menu. The list has a scroll bar. The number of items can exceed the size of the list. In contrast, the pop-up menu at the most can fill the height of the screen. Using an editable text field also provides for faster item selection in certain circumstances.

In the following we adopt the perspective of the Java Foundation Classes and describe a combo box as a combination of text field and drop-down list.

Multiple-Selection Combo Boxes

Generally, a combo box enables users to select a single item from a list of items. However, we have encountered cases where users needed to be able to select one or more items from a list. This is similar to a group of check boxes or a multiple-selection list. However, in these cases a group of check boxes or a multiple-selection list would have taken up more space than was available.

For such cases we designed a multiple-selection combo box that is similar in appearance and behavior to a regular single-selection combo box except that it allows users to select more than one item. The selected items were displayed separated by a comma in the text field.

More on multiple-selection combo boxes in a future update.

In the next update, we want to discuss some more advanced issues, such as combo boxes that include recent selected items and auto-completion of text entries.

Top