ComboBox helps users to select an item from a large list of options without scrolling. The typeahead functionality makes this selection process quicker, easier and reduces errors. Users can see a list of available options when they click on the component and then filter the list as they type. Once they’ve made their selection, it populates the field and the overlay list closes.
| Key | Function |
|---|
| Tab |
- If the combo box is single-select and if focus is above the combo box, Tab sets focus on the component. When focused, combo box has a visible text cursor and the list is opened.
- If the combo box is multi-select and if the focus is above the combo box, Tab sets focus on the pill list if pills are present. If no pills are present then focus is set on the input.
- If the list is open, Tab moves focus to the next focusable element in the tab order and selects the current active option.
|
| Shift + Tab |
- If the combo box is single-select and focus is below the combo box, this action sets focus on the input.
- If the combo box is multi-select and focus is below the combo box, this action sets focus on the input.
- If the combo box is multi-select and focus is on the input, this action sets focus on the pill list if pills are present. If no pills are present the previous focusable element in the tab order is focused.
- If the list is open, Tab moves focus to the previous focusable element in the tab order and selects the current active option.
|
| Enter |
- If the list is open and focus is on a option that is not disabled, Enter makes a selection.
- If the combo box is single-select, the list closes.
- If the combo box is multi-select, the list remains open.
|
| Space |
- Space types a space character into the input field.
|
| Escape |
- If the list is open, closes the list without making a selection, existing text in input field remains. Focus remains on combo box.
- If the list is closed, does nothing. Focus remains on combo box.
|
| Up arrow |
- If the list is open, moves visual focus to the previous option in the list. Focus does not wrap.
- If the list is closed, opens the list and moves visual focus to the last option in the list.
|
| Down arrow |
- If the list is open, moves visual focus to the next option in the list. Focus does not wrap.
- If the list is closed, opens the list and moves visual focus to the first option in the list.
|
| Left arrow / Right arrow |
- This action moves focus between the input and the pill list in a multi-select combo box.
|
| Home |
- When focus is within the combo box, this action moves focus to the first option.
|
| End |
- When focus is within the combo box, this action moves focus to the last option.
|
| Page up |
- When focus is within the dropdown, this action moves focus to the item before the first visible option.
|
| Page down |
- When focus is within the dropdown, this action moves focus to the item after the last visible option.
|
