Why Use This Pattern
A ComboBox allows the user to choose one of the several choices. It features a text field with a small down arrow button. The user can type a value in the text field or click the down arrow button to display a drop-down list. The ComboBox can be editable, in which case The user can type entries into the TextInput portion of the ComboBox that are not in the list.
What is the Solution
A ComboBox is a combination of a drop-down list or list box and a single-line textbox, allowing the user either to enter a value directly into the text box or choose one item from a list of mutually-exclusive predefined values. A ComboBox differs from a drop-down list in that users can enter a value that does not exist in the list, while with a drop-down list users are limited to values in the list.
A ComboBox consists of a text box, a free form input field, and a drop-down arrow. When the drop-down arrow is clicked, a drop-down list of available values is opened.
The width of the ComboBox should be as wide as the longest possible string plus 5 pixels padding on the left and the right. As an example; if the ComboBox display years it should be 4 characters wide plus the 5 pixels padding.
Keyboard and Accessibility
Ensure that users can access the drop down arrow, as well as make and submit the choice using only the keyboard.
Sort list items in a logical order, such as grouping highly related options together, placing most common options first, or using alphabetical order.
- Sort names in alphabetical order, numbers in numeric order, and dates in chronological order.
- Lists with 12 or more items should be sorted alphabetically to make items easier to find.
- Place options that represent All or None at the beginning of the list, regardless of the sort order of the remaining items.
- Limit the length of the input text whenever possible. For example, if the valid input is a number between 0 and 999, use a ComboBox that is limited to three characters.
- If there are many possible options, focus the list contents on the most likely options. Because users can enter values that do not appear in the list, ComboBoxes do not have to list all choices, only the likely choices or a representative sample.