Chip Group

Chip Group provides consistent spacing, accessible keyboard navigation, and selection modes to multiple Chips.

Overview

Chip Group supports workflows and patterns using more than one Chip. Chips are predictably spaced within the Chip Group, and opt-in selection modes can facilitate workflows with interactive Chips.

Usage

  • Selection workflows
  • Filtering patterns
  • Toggling of categorical data

Sample

5 samples
1
2
3
4
5
6
7
<calcite-chip-group label="demo-group-label">
    <calcite-chip value="biome-a" label="Biome A">Biome A</calcite-chip>
    <calcite-chip value="biome-b" label="Biome B">Biome B</calcite-chip>
    <calcite-chip value="biome-d" label="Biome C">Biome C</calcite-chip>
    <calcite-chip value="biome-d" label="Biome D">Biome D</calcite-chip>
    <calcite-chip value="biome-e" label="Biome E">Biome E</calcite-chip>
</calcite-chip-group>
v3.0.3

Accessibility

Keyboard navigation

KeyFunction
TabMoves focus to the next calcite-chip. When calcite-chip is closable, moves focus in and out of the "Close" button. If the current focus is the last calcite-chip, focus will leave the component.
Tab and ShiftMoves focus to the previous calcite-chip. When calcite-chip is closeable, moves focus in and out of the "Close" button. If the current focus is the first calcite-chip, focus will leave the component.
Arrow leftMoves focus to the previous calcite-chip. If the current focus is the first calcite-chip, focus will return to the last calcite-chip.
Arrow rightMoves focus to the next calcite-chip. If the current focus is the last calcite-chip, focus will return to the first calcite-chip.
SpaceWhen selectionMode is not "none", selects the focused calcite-chip. When calcite-chip is closeable and focused, hides the component.
EnterWhen selectionMode is not "none", selects the focused calcite-chip. When calcite-chip is closeable and focused, hides the component.
HomeMoves focus to the component's first calcite-chip.
EndMoves focus to the component's last calcite-chip.

API reference

Properties

PropertyAttributeDescriptionTypeDefault
disableddisabledWhen true, interaction is prevented and the component is displayed with lower opacity.booleanfalse
labelrequiredlabelAccessible name for the component.string
scalescaleSpecifies the size of the component. Child calcite-chips inherit the component's value."l" | "m" | "s""m"
selectedItemsread-onlySpecifies the component's selected items.Array<HTMLCalciteChipElement>
selectionModeselection-modeSpecifies the selection mode of the component, where: "multiple" allows any number of selections, "single" allows only one selection, "single-persist" allows one selection and prevents de-selection, and "none" does not allow any selections."multiple" | "none" | "single" | "single-persist""none"

Slots

NameDescription
default (unnamed)A slot for adding one or more calcite-chips.

Events

NameDescriptionBehavior
calciteChipGroupSelectFires when the component's selection changes.bubblescomposed

Methods

NameDescriptionSignature
componentOnReadyCreate a promise that resolves once component is fully loaded.componentOnReady(): Promise<void>
setFocusSets focus on the component's first focusable element.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