listbox

Single/multi-select listbox with typeahead, search and virtualisation.

A full-featured listbox following the WAI-ARIA listbox pattern. Supports both declarative <ListboxOption> children and a data-driven VirtualListbox for large lists.

Installation

pnpm add @fluixi/listbox

Usage

Declarative

import { Listbox, ListboxOption, ListboxGroup, ListboxGroupLabel, ListboxSearch } from '@fluixi/listbox';

<Listbox selectionMode="multiple" defaultValue={['a']} onValuesChange={setValues}>
  <ListboxSearch placeholder="Filter…" />
  <ListboxGroup>
    <ListboxGroupLabel>Fruits</ListboxGroupLabel>
    <ListboxOption value="a">Apple</ListboxOption>
    <ListboxOption value="b">Banana</ListboxOption>
    <ListboxOption value="c" disabled>Cherry</ListboxOption>
  </ListboxGroup>
</Listbox>

Virtualised (large lists)

import { VirtualListbox } from '@fluixi/listbox';

<VirtualListbox
  options={items}
  selectionMode="single"
  value={selected()}
  onChange={setSelected}
  rowHeight={32}
  height={240}
/>

Parts

Part	Description
`Listbox`	Root. `selectionMode` (`single` \| `multiple`); controlled `value`/`defaultValue`/`onChange`/`onValuesChange`.
`ListboxOption`	A single option. `value`, `disabled`, `textValue` for typeahead.
`ListboxGroup`	Groups options under a label.
`ListboxGroupLabel`	Heading for a group.
`ListboxSearch`	Filter input; items register only when they match the query.
`VirtualListbox`	Data-driven virtualized list. `options: {value,label?,disabled?}[]`, fixed `rowHeight`.

Part of the Fluixi UI component library. Made with ☕ by the Fluixi team.