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. |