Skip to content

Combobox Item

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 items, which are set on `calcite-combobox`.	`Array<HTMLCalciteComboboxItemElement \| HTMLCalciteComboboxItemGroupElement>`
description	description	A description for the component, which displays below the heading.	`string`
disabled	disabled	When `true`, interaction is prevented and the component is displayed with lower 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`
heading	heading	The component's text.	`string`
icon	icon	Specifies an icon to display.	`string`
iconFlipRtl	icon-flip-rtl	When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`).	`boolean`	`false`
label	label	The component's label.	`any`
metadata		Provides additional metadata to the component used in filtering.	`{ [x: string]: unknown; }`
selected	selected	When `true`, the component is selected.	`boolean`	`false`
shortHeading	short-heading	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`
textLabel	text-label	deprecatedUse `heading` instead. The component's text.	`string`
valuerequired	value	The component's value.	`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	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	Specifies the component's background color when active.
--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	Create a promise that resolves once component is fully loaded.	`componentOnReady(): Promise<void>`