1. A ComboBox consists of a text box and a drop-down arrow button.
2. Click on the text box to highlight the text area and start typing
3. Enter a character to view pre-ser values
Enter any letter that matches text in the list will indicate the letter with a bold font style.
4. Highlight on hover.
If the user uses the mouse to hover over the list, the row will be highlighted in blue, and can be move up and down the list by using the up and down arrow keys from the keyboard
5. Drop down list of pre-defined values.
Clicking the drop-down arrow opens a drop-down list of predefined values. The down arrow button will appear as pressed-down style as on-click. Uses the mouse to hover over the list, the row will be highlighted in blight lue, and can be move up and down the list by using the up and down arrow keys from the keyboard
6. Populate value by selecting from list.
Clicking a value in the list selects the value and populates the text box with that value. The list automatically scrolls to the value that is the exact or nearest match to the typed text. The matched text in the list is indicated by a bold font style and highlighted in blue to indicate the selected state.
7. Highlight on hover
Use the mouse to hover over the list again, the row will be highlighted for visual guidance when hovering each row.
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.
When to Use This Pattern
- You want to allow the user to select a single value from a list or to specify a new value that does not exist in the list.
- The list of available values is long (exceeds 30 items) and space is constrained.
- The auto-complete or auto-filter options would help the user to find the required values in a long list.
Do Not Use This Pattern
- The user needs to select multiple values (use checkboxes or a list box).
- There are less than 7 options and the user needs to see them all at once (use radio buttons).
- The user cannot add a value to the list (use a drop-down list).