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-items, 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 | |
| heading | 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 components 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-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 | 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. |
Methods
| Name | Description | Signature |
|---|---|---|
| componentOnReady | Create a promise that resolves once component is fully loaded. | componentOnReady(): Promise<this> |