Combobox is an input and dropdown-based selection, which allows for quick filtering of single and multi-selections.
Overview
Combobox is designed for situations where a dropdown or list has a large amount of choices to sift through. The type-ahead property of Combobox allows the user to quickly type and search for available selections.
Multi-select Combobox utilizes Chips to display selected items, which can quickly be deleted by selecting the "Closable" icon or pressing the Backspace key when focused.
Usage
- Multi-select purposes
- Filtering
Sample
Best practices
To disable the ability to clear a selection when selection is set to "single-persist", set the clear property to true.
Accessibility
Keyboard navigation
| Key | Function |
|---|---|
Backspace | When the component is focused and contains a selected calcite-combobox-item will remove the most recently added from the component. |
Space | If the component is not open, opens the component. |
Arrow up | Once the component is open and in focus, moves focus to previous calcite-combobox-item. If the current focus is the first calcite-combobox-item, focus will cycle to the last calcite-combobox-item. |
Arrow down | Once the component is open and in focus, move focus to next calcite-combobox-item. If the current focus is the last calcite-combobox-item, focus will cycle to the first calcite-combobox-item. |
Enter | If the component is open and a calcite-combobox-item is active, will toggle it's selected state. |
Esc | If the component is open, closes the component. |
Tab | Moves focus in and out of the component. |
Tab and Shift | Moves focus in and out of the component. |