Form

Listbox

Reka-UI-backed listbox primitive for single or multi-select option lists.

Overview

Listbox is the Reka-UI-backed primitive for single or multi-select option lists. Auto-imports as <LListbox>.

Key Business & UX Benefits

Single and multi-select share one component, so filter panels, size pickers, and admin tables stay visually consistent across the app.
ARIA roles and arrow-key navigation come from Reka UI, removing a common accessibility gap that blocks enterprise procurement.
Predictable v-model binding lets product teams wire complex selection flows without writing custom state machines.
A shared listbox visual style means filter UX feels the same on PLP, search, and checkout, which reduces shopper friction at every step of the funnel.

Usage

Listbox Default

<Listbox v-model="selected">
    <ListboxItem v-for="opt in options" :key="opt.value" :value="opt.value">
      {{ opt.label }}
    </ListboxItem>
  </Listbox>

Feature List

`multiple` boolean (default false) toggles between single and multi-select with the same component
`modelValue` typed as `string | string[]`, so v-model carries either a single value or an array depending on `multiple`
Two `orientation` values ('horizontal', 'vertical', default 'vertical') cover stacked filters and inline chip rows
Built on reka-ui, so arrow-key navigation and ARIA roles ship without per-use wiring
Auto-imports as `<LListbox>`, paired with `<LListboxItem>` for each option
Field-aware `aria-required` and `aria-invalid` plumbing means listboxes work inside `<LField>` with no extra props

API Reference

Prop	Default	Type
`modelValue`		`string \| string[]`
`defaultValue`		`string \| string[]`
`multiple`	`false`	`boolean`
`disabled`	`false`	`boolean`
`required`	`false`	`boolean`
`invalid`	`false`	`boolean`
`id`		`string`
`orientation`	`vertical`	`"vertical" \| "horizontal"`
`selectionBehavior`	`toggle`	`"toggle" \| "replace"`

Slot	Type
`default`	`{}`

Event	Type
`update:modelValue`	`(event: "update:modelValue", value: string \| string[]): void`

Prop	Default	Type
`value`required		`string`
`disabled`	`false`	`boolean`

Slot	Type
`default`	`{}`

Edit this pageorReport an issue

Input Slider

Single-thumb or multi-thumb range slider for numeric input and range filters.

Option Tile (Image)

Image-driven variant tile for product option selection, typically color or material.