Combobox Item | Calcite Design System | Esri Developer

Child component of Combobox

API reference

Properties

Property	Attribute	Description	Type	Default
active	active	When `true`, the component is active.	`boolean`	`false`
ancestors		Specifies the parent and grandparent `calcite-combobox-item`s, which are set on `calcite-combobox`.	`ComboboxChildElement[]`
description	description	Specifies a description for the component. Displays below the heading.	`string`
disabled	disabled	When `true`, prevents interaction and decreases the component's opacity.	`boolean`	`false`
filterDisabled	filter-disabled	When `true`, omits the component from the `calcite-combobox` filtered search results.	`boolean`	`false`
guid	guid	The `id` attribute of the component. When omitted, a globally unique identifier is used.	`string`
headingrequired	heading	Specifies the component's heading text.	`string`
icon	icon	Specifies an icon to display.	`IconName`
iconFlipRtl	icon-flip-rtl	When `true` and the element direction is right-to-left (`"rtl"`), flips the component`s` icon`.	`boolean`	`false`
label	label	Specifies an accessible label for the component.	`any`
metadata		Specifies additional metadata to the component for use in filtering.	`Record<string, unknown>`
selected	selected	When `true`, the component is selected.	`boolean`	`false`
shortHeading	short-heading	Specifies the component's short heading. When provided, the short heading will be displayed in the component's selection. It is recommended to use 5 characters or fewer.	`string`
value	value	The component's value. Falls back to `heading` if not provided.	`any`

Slots

Name	Description
default (unnamed)	A slot for adding nested `calcite-combobox-item`s.
content-end	A slot for adding non-actionable elements after the component's content.
content-start	A slot for adding non-actionable elements before the component's content.

Styles

Name	Description
--calcite-combobox-item-border-color	deprecated in v3.3.0, removal target v6.0.0 - Specifies the component's border color.
--calcite-combobox-text-color	Specifies the component's text and `icon` color.
--calcite-combobox-text-color-hover	Specifies the component's text and `icon` color when hovered.
--calcite-combobox-item-background-color-active	When `active`, specifies the component's background color.
--calcite-combobox-item-background-color-hover	Specifies the component's background color when hovered.
--calcite-combobox-item-shadow	Specifies the component's shadow.
--calcite-combobox-selected-icon-color	Specifies the component's `selected` indicator icon color.
--calcite-combobox-description-text-color	Specifies the component's `description` and `shortHeading` text color.
--calcite-combobox-description-text-color-press	Specifies the component's `description` and `shortHeading` text color when hovered.
--calcite-combobox-heading-text-color	Specifies the component's `heading` text color.

Events

Name	Description	Behavior
calciteComboboxItemChange	Fires whenever the component is selected or unselected.	bubblescomposed

Methods

Name	Description	Signature
componentOnReady	Creates a promise that resolves once the component is fully loaded.	`componentOnReady(): Promise<this>`