Autocomplete Item | Calcite Design System | Esri Developer

Child component of Autocomplete

API reference

Properties

Property	Attribute	Description	Type	Default
description	description	Specifies a description for the component. Displays below the `label`.	`string \| undefined`
disabled	disabled	When `true`, interaction is prevented and the component is displayed with lower opacity.	`boolean`	`false`
headingrequired	heading	Specifies the component's heading text.	`string`
iconEnd	icon-end	Specifies an icon to display at the end of the component.	`IconName \| undefined`
iconFlipRtl	icon-flip-rtl	Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`).	`FlipContext \| undefined`
iconStart	icon-start	Specifies an icon to display at the start of the component.	`IconName \| undefined`
label	label	Specifies an accessible label for the component.	`string \| undefined`
selected	selected	When `true`, the component is selected. The parent `calcite-autocomplete` synchronizes this property with its non-empty `value`; declarative selection is preserved when no initial value is provided, but is cleared when a controlled value is explicitly reset.	`boolean`	`false`
value	value	Specifies the component's value.	`string`

Slots

Name	Description
content-end	A slot for adding non-actionable elements after content of the component.
content-start	A slot for adding non-actionable elements before content of the component.

Styles

Name	Description
--calcite-autocomplete-background-color	Specifies the component's background color.
--calcite-autocomplete-description-text-color	Specifies the text color of the component's `description`.
--calcite-autocomplete-heading-text-color	Specifies the text color of the component's `heading`.
--calcite-autocomplete-text-color	Specifies the component's text color.

Events

Name	Description	Behavior
calciteAutocompleteItemSelect	Fires when selection is requested.	bubblescomposed

Methods

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