◇

Listbox

7 parts

Anatomy

Import the parts and compose them. Each part forwards attributes to its underlying element.

vue

import {
  ListboxRoot,
  ListboxContent,
  ListboxItem,
  ListboxItemIndicator,
  ListboxGroup,
  ListboxGroupLabel,
  ListboxFilter,
} from '@robonen/primitives/listbox';

<ListboxRoot>
  <ListboxContent />
  <ListboxItem />
  <ListboxItemIndicator />
  <ListboxGroup />
  <ListboxGroupLabel />
  <ListboxFilter />
</ListboxRoot>

API Reference

ListboxRoot

Root

Prop	Type	Default	Description
`modelValue`?	`U \| U[]`	—	Controlled value. Use `v-model`.
`defaultValue`?	`U \| U[]`	—	Uncontrolled initial value.
`multiple`?	`boolean`	—	Allow multiple selection.
`orientation`?	`ListboxOrientation`	`'vertical'`	Navigation orientation.
`dir`?	`ListboxDirection`	—	Reading direction. Falls back to `ConfigProvider`.
`disabled`?	`boolean`	—	Disable the whole listbox.
`selectionBehavior`?	`ListboxSelectionBehavior`	`'toggle'`	How selection behaves in `multiple` mode.
`highlightOnHover`?	`boolean`	—	Highlight items on hover.
`by`?	`string \| ((a: U, b: U) => boolean)`	—	Compare objects by key or custom comparator.

ListboxContent

Content

No props or events — renders its element and forwards attributes.

ListboxItem

Item

Prop	Type	Default	Description
`value`	`U`	—	The value of the item.
`disabled`?	`boolean`	—	Disable this item.

ListboxItemIndicator

ItemIndicator

No props or events — renders its element and forwards attributes.

ListboxGroup

Group

No props or events — renders its element and forwards attributes.

ListboxGroupLabel

GroupLabel

No props or events — renders its element and forwards attributes.

ListboxFilter

Filter

Prop	Type	Default	Description
`modelValue`?	`string`	—	Controlled input value.
`autoFocus`?	`boolean`	—	Focus on mount.
`disabled`?	`boolean`	—	Disable input.