Tile Select Group

A layout component built with Tile Selects.

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

  • Multiple Tile Selects in a layout
  • Onboarding experiences
  • Layout selection
  • Format selection
  • Visually prominent radio-style selection
  • Visually prominent checkbox-style selections

Sample

Best practices

Refer to Tile Select for best practices.

Accessibility

Keyboard navigation

KeyFunction
Arrow leftMoves 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 rightMoves 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 downMoves 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 upMoves 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.
TabMoves focus in and out of component.
Tab and ShiftMoves focus in and out of component.

Writing and copy

Refer to Tile Select for writing and copy guidelines.

API reference

Properties

Slots

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.