Chip Group provides consistent spacing, accessible keyboard navigation, and selection modes to multiple Chips.
Overview
Chip Group supports workflows and patterns using more than one Chip. Chips are predictably spaced within the Chip Group, and opt-in selection modes can facilitate workflows with interactive Chips.
Usage
- Selection workflows
- Filtering patterns
- Toggling of categorical data
Sample
Accessibility
Keyboard navigation
| Key | Function |
|---|---|
Tab | Moves focus to the next calcite-chip. When calcite-chip is closable, moves focus in and out of the "Close" button. If the current focus is the last calcite-chip, focus will leave the component. |
Tab and Shift | Moves focus to the previous calcite-chip. When calcite-chip is closeable, moves focus in and out of the "Close" button. If the current focus is the first calcite-chip, focus will leave the component. |
Arrow left | Moves focus to the previous calcite-chip. If the current focus is the first calcite-chip, focus will return to the last calcite-chip. |
Arrow right | Moves focus to the next calcite-chip. If the current focus is the last calcite-chip, focus will return to the first calcite-chip. |
Space | When selection is not "none", selects the focused calcite-chip. When calcite-chip is closeable and focused, hides the component. |
Enter | When selection is not "none", selects the focused calcite-chip. When calcite-chip is closeable and focused, hides the component. |
Home | Moves focus to the component's first calcite-chip. |
End | Moves focus to the component's last calcite-chip. |