Chip

Chips are commonly used in filtering and as categorical identifiers. Chips can be contained within a Chip Group to provide keyboard functionality, consistent spacing, and facilitate selection workflows and filtering patterns.

Overview

Chips are small, feature-rich components that can be used independently or in groups. Chips are used in Combobox and other scenarios that have a filtering interaction.

Chips can be themed to convey a variety of information, can contain Icons, Avatars, or images as visual cues. Additionally, Chips can be closed and visually hidden by a user.

Usage

  • Labeling
  • Status badges
  • Contextual counts or context for information.

Sample

5 samples
1
2
3
<calcite-chip value="Alluvial" label="Alluvial">
    Alluvial
</calcite-chip>
v3.0.3

Accessibility

Keyboard navigation

KeyFunction
TabWhen closable is true, moves focus in and out of the "Close" button.
Tab and ShiftWhen closable is true, moves focus in and out of the "Close" button.
EnterWhen closable is true and focus is on the "Close" button, hides the component.
SpaceWhen closable is true and focus is on the "Close" button, hides the component.

API reference

Properties

PropertyAttributeDescriptionTypeDefault
appearanceappearanceSpecifies the appearance style of the component."outline" | "outline-fill" | "solid""solid"
closableclosableWhen true, a close button is added to the component.booleanfalse
closedclosedWhen true, hides the component.booleanfalse
closeOnDeleteclose-on-deleteWhen true, the component closes when the Delete or Backspace key is pressed while focused.booleanfalse
disableddisabledWhen true, interaction is prevented and the component is displayed with lower opacity.booleanfalse
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
kindkindSpecifies the kind of the component, which will apply to border and background if applicable."brand" | "inverse" | "neutral""neutral"
labelrequiredlabelAccessible name for the component.string
messageOverridesUse this property to override individual strings used by the component.{ dismissLabel?: string; }
scalescaleSpecifies the size of the component. When contained in a parent calcite-chip-group inherits the parent's scale value."l" | "m" | "s""m"
selectedselectedWhen true, the component is selected.booleanfalse
valuevalueThe component's value.any

Slots

NameDescription
default (unnamed)A slot for adding text.
imageA slot for adding an image.

Styles

NameDescription
--calcite-chip-background-colorSpecifies the component's background color.
--calcite-chip-border-colorSpecifies the component's border color.
--calcite-chip-corner-radiusSpecifies the component's corner radius.
--calcite-chip-text-colorSpecifies the component's text color.
--calcite-chip-icon-colorSpecifies the component's icon color.
--calcite-chip-close-icon-colorSpecifies the component's close element icon color.
--calcite-chip-select-icon-colorSpecifies the component's selection element icon color.
--calcite-chip-select-icon-color-pressedSpecifies the component's selection element icon color when active.

Events

NameDescriptionBehavior
calciteChipCloseFires when the component's close button is selected.bubblescomposed
calciteChipSelectFires when the selected state of the component changes.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