Tile Select Group
A layout component built with Calcite Tile Selects.
Overview
Tile Select Group is used to house a number of Tile Selects in a layout. This component includes helpful props for alignment and switching between radio-style and checkbox-style selections.
Usage
- Multiple Tile Selects in a layout
- Onboarding experiences
- Layout selection
- Format selection
- Visually prominent radio-style selection
- Visually prominent checkbox-style selections
Sample
Edit sample on Codepen
Best practices
Refer to Tile Select for best practices.
Accessibility
Keyboard navigation
| Key | Function |
|---|---|
Arrow left | Move focus and selection to previous item. If the current focus and selection is the first item, the focus and selection will cycle to the end |
Arrow right | Move focus and selection to next item. If the current focus and selection is the last item, the focus and selection will cycle to the beginning |
Arrow down | Move focus and selection to previous item. If the current focus and selection is the first item, the focus and selection will cycle to the end |
Arrow up | Move focus and selection to next item. If the current focus and selection is the last item, the focus and selection will cycle to the beginning |
Tab | Move focus in and out of component |
Tab and Shift | Move focus in and out of component |
Writing and copy
Refer to Tile Select for writing and copy guidelines.
API reference
calcite-tile-select-group
Properties
| Property | Attribute | Description | Type | Values |
|---|---|---|---|---|
| disabled | disabled | The disabled state of the tile select. | truefalse | |
| layout | layout | Tiles by default move horizontally, stacking with each row, vertical allows single-column layouts | horizontal (default)vertical |
Slots
| Name | Description |
|---|---|
| default (unnamed) | A slot for adding `calcite-tile-select`s. |