Tile Select

Calcite Tile Selects are visually prominent containers that can be used as radio-style and checkbox-style selections.

Overview

Tile Selects are Tiles which can be used functionally like Radio Buttons or Checkboxes. This component is great for interactions when selections require clear headings and descriptions.

Consider Tile Select Group for layout builds.

Consider Tile for a non-selectable version of this component.

Usage

  • 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

Below are important guidelines on using the Tile Select component.

Do Tile Select Check
Do use checkbox-style Tile Selects for choosing mutliple relevant items.
Avoid Tile Select Check
Avoid using the checkbox-style for common form interactions, and avoid forming questions in Tile Selects.
Do Tile Select Radio
Do use Tile Selects when selections can benefit from descriptions to make a choice.
Avoid Tile Select Radio
Avoid using Tile Selects for unconventional interactions like sorting.

Writing and copy

Text for Tile Selects should be on the shorter side, and as concise as possible.

  • Use sentence case for heading and description
  • End description with proper punctuation
  • Avoid forming questions in Tile Selects
  • Recommended heading character maximum: 50
  • Recommended description character maximum: 175

API reference

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

Properties

PropertyAttributeDescriptionTypeValues
checkedchecked

The checked state of the tile select.

booleanA boolean property should be present, or not
truefalse
descriptiondescription

The description text that appears beneath the heading of the tile.

optional
stringA custom string
undefined
disableddisabled

The disabled state of the tile select.

booleanA boolean property should be present, or not
truefalse
headingheading

The heading text that appears between the icon and description of the tile.

optional
stringA custom string
undefined
hiddenhidden

The hidden state of the tile select.

booleanA boolean property should be present, or not
truefalse
iconicon

The icon that appears at the top of the tile.

optional
iconAccepts a Calcite UI Icon string
inputAlignmentinput-alignment

The side of the tile that the radio or checkbox appears on when inputEnabled is true.

typedChoose from a set of typed values
endstart (default)
inputEnabledinput-enabled

Display an interactive radio or checkbox.

booleanA boolean property should be present, or not
truefalse
namename

The name of the tile select. This name will appear in form submissions as either a radio or checkbox identifier based on the `type` property.

typedChoose from a set of typed values
any
typetype

The selection mode of the tile select: radio (single) or checkbox (multiple).

typedChoose from a set of typed values
checkboxradio (default)
valuevalue

The value of the tile select. This value will appear in form submissions when this tile select is checked.

optional
typedChoose from a set of typed values
any
widthwidth

specify the width of the tile, defaults to auto

typedChoose from a set of typed values
auto (default)full

Events

NameDescriptionDetail
calciteTileSelectChange

Emits a custom change event. For checkboxes, it emits when the checkbox is checked or unchecked. For radios it only emits when it is checked.

bubblescomposedcancelable
any

Methods

NameDescriptionSignatureReturns
setFocus

Sets focus on the component.

setFocus() => Promise<void>Promise<void>

Slots

NameDescription
default (unnamed)

A slot for adding custom content.

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