Swatch Group provides consistent spacing, accessible keyboard navigation, and selection modes to multiple Swatches.
Overview
Swatch Group supports workflows and patterns using more than one Swatch. Use Swatch Group to facilitate selection, filtering, and toggling workflows.
Usage
- Facilitate selection of colors or patterns
- Filtering patterns
- Toggling of categorical data
Sample
Best practices
Use Swatch Groups to enable users to select from multiple swatches. For display-only scenarios, use individual Swatches. When enabling selection, choose the selection that best matches your workflow requirements.
Accessibility
Keyboard navigation
| Key | Function |
|---|---|
Tab | Moves focus to the next calcite-swatch. If the current focus is the last calcite-swatch, focus will leave the component. |
Tab and Shift | Moves focus to the previous calcite-swatch. If the current focus is the first calcite-swatch, focus will leave the component. |
Arrow left | Moves focus to the previous calcite-swatch. If the current focus is the first calcite-swatch, focus will return to the last calcite-swatch. |
Arrow right | Moves focus to the next calcite-swatch. If the current focus is the last calcite-swatch, focus will return to the first calcite-swatch. |
Space | When selection is not "none", selects the focused calcite-swatch. |
Enter | When selection is not "none", selects the focused calcite-swatch. |
Home | Moves focus to the component's first calcite-swatch. |
End | Moves focus to the component's last calcite-swatch. |
API reference
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
| disabled | disabled | When present, interaction is prevented and the component is displayed with lower opacity. | boolean | false |
| label | label | Accessible name for the component. | string | |
| scale | scale | Specifies the size of the component. Child calcite-swatchs inherit the component's value. | "l" | "m" | "s" | "m" |
| selectedItems | Specifies the component's selected items. | Array<HTMLCalciteSwatchElement> | ||
| selectionMode | selection-mode | Specifies the selection mode of the component, where:
"multiple" allows any number of selections,
"single" allows only one selection,
"single-persist" allows one selection and prevents de-selection, and
"none" does not allow any selections. | "multiple" | "none" | "single" | "single-persist" | "none" |
Slots
| Name | Description |
|---|---|
| default (unnamed) | A slot for adding one or more calcite-swatchs. |
Events
| Name | Description | Behavior |
|---|---|---|
| calciteSwatchGroupSelect | Fires when the component's selection changes. |
Methods
| Name | Description | Signature |
|---|---|---|
| componentOnReady | Create a promise that resolves once component is fully loaded. | componentOnReady(): Promise<void> |
| setFocus | Sets focus on the component's first focusable element. | setFocus(options?: FocusOptions): Promise<void> |