Combobox Item
<quiet-combobox-item>
An item that can be selected from a combobox control.
This component must only be used within a combobox. You can see some examples of combobox items being used in the combobox documentation.
API Jump to heading
Importing Jump to heading
The autoloader is the recommended way to import components but, if you prefer to do it manually, the following code snippets will be helpful.
To manually import <quiet-combobox-item> from the CDN, use the following code.
import 'https://cdn.jsdelivr.net/npm/@quietui/quiet-browser@1.0.0/dist/components/combobox-item/combobox-item.js';
To manually import <quiet-combobox-item> from npm, use the following code.
import '@quietui/quiet/dist/components/combobox-item/combobox-item.js';
Slots Jump to heading
Combobox Item supports the following slots. Learn more about using slots
| Name | Description |
|---|---|
| (default) | The item's label. |
icon
|
An optional icon to display at the start of the item. |
details
|
Optional details to display at the end of the item. |
Properties Jump to heading
Combobox Item has the following properties that can be set with corresponding attributes. In many cases, the attribute's name is the same as the property's name. If an attribute is different, it will be displayed after the property. Learn more about attributes and properties
| Property / Attribute | Description | Reflects | Type | Default |
|---|---|---|---|---|
value
|
The value to submit when this item is selected. If not provided, the text content is used. |
|
string
|
|
disabled
|
Disables the item. |
|
boolean
|
false
|
Methods Jump to heading
Combobox Item supports the following methods. You can obtain a reference to the element and call them like functions in JavaScript. Learn more about methods
| Name | Description | Arguments |
|---|---|---|
getLabelText() |
Gets the text content from the combobox item's label. |
CSS parts Jump to heading
Combobox Item exposes internal elements that can be styled with CSS using the selectors shown below. Learn more about CSS parts
| Name | Description | CSS selector |
|---|---|---|
icon |
The container that wraps the icon slot. |
::part(icon)
|
label |
The container that wraps the item's label. |
::part(label)
|
details |
The container that wraps the details slot. |
::part(details)
|
checkmark |
The checkmark icon shown when selected in multiple mode. |
::part(checkmark)
|
Custom States Jump to heading
Combobox Item has the following custom states. You can target them with CSS using the selectors shown below. Learn more about custom states
| Name | Description | CSS selector |
|---|---|---|
selected |
Applied when the item is selected. |
:state(selected)
|
disabled |
Applied when the item is disabled. |
:state(disabled)
|
active |
Applied when the item is active (keyboard navigation). |
:state(active)
|
Dependencies Jump to heading
Combobox Item automatically imports the following elements. Sub-dependencies are also included in this list.