Overview
Tile Select Group is used to house a number of Tile Selects in a layout. This component includes helpful properties for layout
and switching between radio-style and checkbox-style selections.
Usage
- Onboarding experiences
- Visually prominent radio-style selection
- Visually prominent checkbox-style selections
Sample
<calcite-tile-select-group>
<calcite-tile-select checked input-enabled input-alignment="end" icon="rangefinder" heading="Field operator"
description="This role allows users in the field to create new Reports, and view and edit existing Reports and Attachments">
</calcite-tile-select>
<calcite-tile-select input-enabled input-alignment="end" icon="knowledge-graph-dashboard"
heading="Office coordinator"
description="This role allows teammates on-base to view, duplicate, and create meaningful insights from Reports">
</calcite-tile-select>
</calcite-tile-select-group>
Best practices
Refer to Tile Select for best practices.
Accessibility
Keyboard navigation
Key | Function |
---|---|
Arrow left | Moves focus and selection to the previous calcite-tile-select . If the current focus and selection is the first calcite-tile-select , focus and selection will cycle to the last calcite-tile-select . |
Arrow right | Moves focus and selection to next calcite-tile-select . If the current focus and selection is the last calcite-tile-select , focus and selection will cycle to the first calcite-tile-select . |
Arrow down | Moves focus and selection to the previous calcite-tile-select . If the current focus and selection is the first calcite-tile-select , focus and selection will cycle to the last calcite-tile-select . |
Arrow up | Moves focus and selection to next calcite-tile-select . If the current focus and selection is the last calcite-tile-select , focus and selection will cycle to the first calcite-tile-select . |
Tab | Moves focus in and out of component. |
Tab and Shift | Moves focus in and out of component. |
Writing and copy
Refer to Tile Select for writing and copy guidelines.
API reference
Properties
Property | Attribute | Description | Type | Default |
---|---|---|---|---|
disabled | disabled | When true , interaction is prevented and the component is displayed with lower opacity. | boolean | false |
layout | layout | Defines the layout of the component.
Use "horizontal" for rows, and "vertical" for a single column. | "horizontal" | "vertical" | "horizontal" |
Slots
Name | Description |
---|---|
default (unnamed) | A slot for adding calcite-tile-select elements. |
Methods
Name | Description | Signature |
---|---|---|
componentOnReady | Create a promise that resolves once component is fully loaded. | componentOnReady(): Promise<void> |