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 | heading instead. | string | |
| value | value | The component's value. | any |
Slots
| Name | Description |
|---|---|
| default (unnamed) | A slot for adding nested calcite-combobox-items. |
| 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 | |
| --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. |
Methods
| Name | Description | Signature |
|---|---|---|
| componentOnReady | Create a promise that resolves once component is fully loaded. | componentOnReady(): Promise<void> |