Listbox Item
<quiet-listbox-item>
Listbox items represent individual choices within a listbox.
This component must only be used within a listbox. You can see some examples of listbox items being used in the listbox 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-listbox-item> from the CDN, use the following code.
import 'https://cdn.jsdelivr.net/npm/@quietui/quiet-browser@1.0.0/dist/components/listbox-item/listbox-item.js';
To manually import <quiet-listbox-item> from npm, use the following code.
import '@quietui/quiet/dist/components/listbox-item/listbox-item.js';
Slots Jump to heading
Listbox Item supports the following slots. Learn more about using slots
| Name | Description |
|---|---|
| (default) |
The listbox item's label. For plain-text labels, you can use the label attribute
instead.
|
Properties Jump to heading
Listbox 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 |
|---|---|---|---|---|
label
|
The listbox item's label. If you need to provide HTML in the label, use the label slot
instead.
|
|
string
|
|
description
|
The listbox item's description. If you need to provide HTML in the description, use the
description slot instead.
|
|
string
|
|
value
|
The listbox item's value. |
|
string
|
''
|
selected
|
The listbox item's selected state. |
|
boolean
|
false
|
disabled
|
Disables the listbox item. |
|
boolean
|
false
|
Custom States Jump to heading
Listbox 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 listbox item is selected. |
:state(selected)
|
disabled |
Applied when the listbox item is disabled. |
:state(disabled)
|
controller-disabled |
Applied when the listbox controller is disabled. |
:state(controller-disabled)
|
controller-focused |
Applied when the listbox controller focused. |
:state(controller-focused)
|
controller-readonly |
Applied when the listbox controller is readonly. |
:state(controller-readonly)
|
Dependencies Jump to heading
Listbox Item automatically imports the following elements. Sub-dependencies are also included in this list.