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

Show code snippetCopy code snippet
Edit sample on Codepen
v1.0.0-beta.83
Toggle preview themeToggle preview direction

Best practices

Refer to Tile Select for best practices.

Accessibility

Keyboard navigation

KeyFunction
Arrow leftMove 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 rightMove 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 downMove 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 upMove 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
TabMove focus in and out of component
Tab and ShiftMove focus in and out of component

Writing and copy

Refer to Tile Select for writing and copy guidelines.

API reference

calcite-tile-select-group
v1.0.0-beta.83

Properties

PropertyAttributeDescriptionTypeValues
disableddisabled

The disabled state of the tile select.

booleanA boolean property should be present, or not
truefalse
layoutlayout

Tiles by default move horizontally, stacking with each row, vertical allows single-column layouts

optional
typedChoose from a set of typed values
horizontal (default)vertical

Slots

NameDescription
default (unnamed)

A slot for adding `calcite-tile-select`s.

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