Human-Computer Interaction Resource Network
Home > Tutorials > Designing User Interfaces > 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:
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.
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.