Tile Select Group

deprecated in v2.9Refer to the Tile Group component documentation.
Learn more

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

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

Sample

3 samples
1
2
3
4
5
6
7
8
9
<calcite-tile-select-group>
    <calcite-tile-select checked input-enabled input-alignment="end" icon="rangefinder" heading="Field operator"
        description="This role allows users in the field to create new Reports, and view and edit existing Reports and Attachments">
    </calcite-tile-select>
    <calcite-tile-select input-enabled input-alignment="end" icon="knowledge-graph-dashboard"
        heading="Office coordinator"
        description="This role allows teammates on-base to view, duplicate, and create meaningful insights from Reports">
    </calcite-tile-select>
</calcite-tile-select-group>
v3.0.3

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

PropertyAttributeDescriptionTypeDefault
disableddisabledWhen true, interaction is prevented and the component is displayed with lower opacity.booleanfalse
layoutlayoutDefines the layout of the component. Use "horizontal" for rows, and "vertical" for a single column."horizontal" | "vertical""horizontal"

Slots

NameDescription
default (unnamed)A slot for adding calcite-tile-select elements.

Methods

NameDescriptionSignature
componentOnReadyCreate a promise that resolves once component is fully loaded.componentOnReady(): 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