Tile Select

deprecated in v2.9Refer to the Tile component documentation.

Learn more

Overview

Tile Selects are Tiles which can be used functionally like Radio Buttons or Checkboxes.

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

Below are important guidelines on using the Tile Select component.

Do use checkbox-style Tile Selects for choosing mutliple relevant items.

Avoid using the checkbox-style for common form interactions, and avoid forming questions in Tile Selects.

Do use Tile Selects when selections can benefit from descriptions to make a choice.

Avoid using Tile Selects for unconventional interactions like sorting.

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

Property	Attribute	Description	Type	Default
checked	checked	When `true`, the component is checked.	`boolean`	`false`
description	description	A description for the component, which displays below the heading.	`string`
disabled	disabled	When `true`, interaction is prevented and the component is displayed with lower opacity.	`boolean`	`false`
heading	heading	The component header text, which displays between the icon and description.	`string`
icon	icon	Specifies an icon to display.	`string`
iconFlipRtl	icon-flip-rtl	When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`).	`boolean`	`false`
inputAlignment	input-alignment	When `inputEnabled` is `true`, specifies the placement of the interactive input on the component.	`"end" \| "start"`	`"start"`
inputEnabled	input-enabled	When `true`, displays an interactive input based on the `type` property.	`boolean`	`false`
name	name	Specifies the name of the component on form submission.	`any`
type	type	Specifies the selection mode of the component, where: `"radio"` is for single selection, and `"checkbox"` is for multiple selections.	`"checkbox" \| "radio"`	`"radio"`
value	value	The component's value.	`any`
width	width	Specifies the width of the component.	`"auto" \| "full"`	`"auto"`

Name	Description
default (unnamed)	A slot for adding custom content.

Name	Description	Behavior
calciteTileSelectChange	Emits a custom change event. For checkboxes it emits when checked or unchecked. For radios it only emits when checked.	bubblescomposed

Name	Description	Signature
componentOnReady	Create a promise that resolves once component is fully loaded.	`componentOnReady(): Promise<void>`
setFocus	Sets focus on the component.	`setFocus(): Promise<void>`