Tile Group | Calcite Design System

Tile Group can be used to organize multiple Tile components within a layout.

Overview

Tile Group supports workflows and patterns using more than one Tile. Tiles within the Tile Group are navigable via keyboard are grouped visually. Through the use of opt-in selection modes, Tile Group can facilitate interactive workflows with Tiles.

Sample

Usage

Selection workflows
Filtering patterns
Primary navigational actions
Representing a known, small quantity of items

Best Practices

While similar to the Card Group, a Tile Group has distinct capabilities and intended use cases.

Tile Groups most often contain a known quantity of Tiles, whereas Card Groups can be comprised of a variable quantity of Cards.

Accessibility

Key	Function
`Tab`	When a `calcite-tile` is focused, moves focus to next `calcite-tile` If the current focus is the last `calcite-tile`, focus will leave the component.
`Tab` and `Shift`	When a `calcite-tile` is focused, moves focus to the previous `calcite-tile`. If the current focus is the first `calcite-tile`, focus will leave the component.
`Arrow left`	When a `calcite-tile` is focused, moves focus to the previous `calcite-tile`. If the current focus is the first `calcite-tile`, focus will return to the last `calcite-tile`.
`Arrow right`	When a `calcite-tile` is focused, moves focus to the next `calcite-tile`. If the current focus is the last `calcite-tile`, focus will return to the first `calcite-tile`.
`Space`	When a `calcite-tile` is focused, when `selectionMode` is not `"none"`, selects the focused `calcite-tile`.
`Enter`	When a `calcite-tile` is focused, when `selectionMode` is not `"none"`, selects the focused `calcite-tile`.
`Home`	When a `calcite-tile` is focused, moves focus to the component's first `calcite-tile`.
`End`	When a `calcite-tile` is focused, moves focus to the component's last `calcite-tile`.

API reference

Properties

Property	Attribute	Description	Type	Default
alignment	alignment	Specifies the alignment of each `calcite-tile`'s content.	`Exclude<Alignment, "end">`	`"start"`
disabled	disabled	When `true`, interaction is prevented and the component is displayed with lower opacity.	`boolean`	`false`
labelrequired	label	Specifies an accessible label for the component.	`string`
layout	layout	Defines the layout of the component. Use `"horizontal"` for rows, and `"vertical"` for a single column.	`Extract<Layout, "horizontal" \| "vertical">`	`"horizontal"`
scale	scale	Specifies the component's size.	`Scale`	`"m"`
selectedItemsread-only		Specifies the component's selected items.	`Tile[]`
selectionAppearance	selection-appearance	Specifies the selection appearance, where: `"icon"` (displays a checkmark or dot), `"highlight"` (changes the background color), and `"border"` (displays a border). [Deprecated] The `"border"` value is deprecated in v5.0.0, removal target v6.0.0 - Use `"highlight"` instead.	`Extract<"icon" \| "highlight" \| "border", SelectionAppearance>`	`"icon"`
selectionMode	selection-mode	Specifies the selection mode, where: `"multiple"` (allows any number of selected items), `"single"` (allows only one selected item), `"single-persist"` (allows only one selected item and prevents de-selection), and `"none"` (allows no selected items).	`Extract<"multiple" \| "none" \| "single" \| "single-persist", SelectionMode>`	`"none"`

Slots

Name	Description
default (unnamed)	A slot for adding `calcite-tile` elements.

Events

Name	Description	Behavior
calciteTileGroupSelect	Fires when the component's selection changes.	bubblescomposed

Methods

Name	Description	Signature
componentOnReady	Creates a promise that resolves once the component is fully loaded.	`componentOnReady(): Promise<this>`