Listbox
Accessible list selection
Parts: ListboxRoot, ListboxContent, ListboxFilter, ListboxItem, ListboxItemIndicator, ListboxGroup, ListboxGroupLabel, ListboxVirtualizer
ListboxRoot
Props
| Prop | Type | Default | |
|---|---|---|---|
as | `AsTag \ | Component` | "div" |
asChild | boolean | - | |
by | `string \ | ((a: AcceptableValue, b: AcceptableVal...` | - |
defaultValue | `AcceptableValue \ | AcceptableValue[]` | - |
dir | `"ltr" \ | "rtl"` | - |
disabled | boolean | - | |
highlightOnHover | boolean | - | |
modelValue | `AcceptableValue \ | AcceptableValue[]` | - |
multiple | boolean | - | |
name | string | - | |
orientation | `"vertical" \ | "horizontal"` | "vertical" |
selectionBehavior | `"toggle" \ | "replace"` | "toggle" |
Emits
| Event | Payload |
|---|---|
entryFocus | [event: CustomEvent<any>] |
highlight | [payload: { ref: HTMLElement; value: Acceptable... |
leave | [event: Event] |
update:modelValue | [value: AcceptableValue] |
Slots
| Slot | Type | ||
|---|---|---|---|
modelValue | `AcceptableValue \ | AcceptableValue[] \ | undefined` |
ListboxContent
Props
| Prop | Type | Default | |
|---|---|---|---|
as | `AsTag \ | Component` | "div" |
asChild | boolean | - |
ListboxFilter
Props
| Prop | Type | Default | |
|---|---|---|---|
as | `AsTag \ | Component` | "input" |
asChild | boolean | - | |
autoFocus | boolean | - | |
modelValue | string | - |
Emits
| Event | Payload |
|---|---|
update:modelValue | [string] |
Slots
| Slot | Type | |
|---|---|---|
modelValue | `string \ | undefined` |
ListboxItem
Props
| Prop | Type | Default | |
|---|---|---|---|
as | `AsTag \ | Component` | "div" |
asChild | boolean | - | |
disabled | boolean | - | |
value* | AcceptableValue | - |
Emits
| Event | Payload |
|---|---|
select | [event: SelectEvent<AcceptableValue>] |
ListboxItemIndicator
Props
| Prop | Type | Default | |
|---|---|---|---|
as | `AsTag \ | Component` | "span" |
asChild | boolean | - |
ListboxGroup
Props
| Prop | Type | Default | |
|---|---|---|---|
as | `AsTag \ | Component` | "div" |
asChild | boolean | - |
ListboxGroupLabel
Props
| Prop | Type | Default | |
|---|---|---|---|
as | `AsTag \ | Component` | "div" |
asChild | boolean | - | |
for | string | - |
ListboxVirtualizer
Props
| Prop | Type | Default |
|---|---|---|
estimateSize | number | - |
options* | AcceptableValue[] | - |
textContent | ((option: AcceptableValue) => string) | - |
Slots
| Slot | Type | ||||
|---|---|---|---|---|---|
option | `string \ | number \ | false \ | true \ | Record<string,...` |
virtualizer | `Virtualizer<Element \ | Window, Element>` | |||
virtualItem | VirtualItem<Element> |