Dropdowns are floating lists that can be revealed by an event such as a button click or select tag.
Overview
Dropdowns can be single or multi-selectable lists. Every Dropdown Item must have a parent Dropdown Group.
Usage
- Filter and sort interactions
- Selection lists
Sample
Accessibility
Keyboard navigation
| Key | Function |
|---|---|
Arrow down | If the component is not open, opens the component. When open, moves focus to next non-disabled calcite-dropdown-item. If the current focus is the last calcite-dropdown-item, focus will cycle to the first calcite-dropdown-item. |
Arrow up | If the component is not open, opens the component. When open, moves focus to previous non-disabled calcite-dropdown-item. If the current focus is the first calcite-dropdown-item, the focus will cycle to the last calcite-dropdown-item. |
Esc | If the component is open, closes the component. |
Home | Moves focus to the component's first calcite-dropdown-item. |
End | Moves focus to the component's last calcite-dropdown-item. |
Enter | Selects the active calcite-dropdown-item and when close is false (default), closes the component. |
Space | Selects the active calcite-dropdown-item and when close is false (default), closes the component. |
Tab | Moves focus in and out of the component. |
Tab and Shift | Moves focus in and out of the component. |