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.

Usage

  • Onboarding experiences
  • Layout selection
  • Format selection
  • Visually prominent radio-style selection
  • Visually prominent checkbox-style selections

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

Properties

PropertyAttributeDescriptionTypeDefault
checkedcheckedWhen true, the component is checked.booleanfalse
descriptiondescriptionA description for the component, which displays below the heading.string
disableddisabledWhen true, interaction is prevented and the component is displayed with lower opacity.booleanfalse
headingheadingThe component header text, which displays between the icon and description.string
iconiconSpecifies an icon to display.string
iconFlipRtlicon-flip-rtlWhen true, the icon will be flipped when the element direction is right-to-left ("rtl").booleanfalse
inputAlignmentinput-alignmentWhen inputEnabled is true, specifies the placement of the interactive input on the component."end" | "start""start"
inputEnabledinput-enabledWhen true, displays an interactive input based on the type property.booleanfalse
namenameSpecifies the name of the component on form submission.any
typetypeSpecifies the selection mode of the component, where: "radio" is for single selection, and "checkbox" is for multiple selections."checkbox" | "radio""radio"
valuevalueThe component's value.any
widthwidthSpecifies the width of the component."auto" | "full""auto"

Slots

NameDescription
default (unnamed)A slot for adding custom content.

Events

NameDescriptionBehavior
calciteTileSelectChangeEmits a custom change event. For checkboxes it emits when checked or unchecked. For radios it only emits when checked.bubblescomposed

Methods

NameDescriptionSignature
componentOnReadyCreate a promise that resolves once component is fully loaded.componentOnReady(): Promise<void>
setFocusSets focus on the component.setFocus(): Promise<void>

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

You can no longer sign into this site. Go to your ArcGIS portal or the ArcGIS Location Platform dashboard to perform management tasks.

Your ArcGIS portal

Create, manage, and access API keys and OAuth 2.0 developer credentials, hosted layers, and data services.

Your ArcGIS Location Platform dashboard

Manage billing, monitor service usage, and access additional resources.

Learn more about these changes in the What's new in Esri Developers June 2024 blog post.

Close