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
Comparison
Most often used when the workflow requires multiple selections.
Best when the number of selectable items is finite and small.
Often used for accepting custom values and both single and multiple selection.
Most often used with very long or unpredictable lengths of items.
Best for programmatically returning responses based on user input.
Does not accept custom values or multiple selections.
Recommendations
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. |