select

Single/multi-select dropdown with search and virtualisation support.

A full-featured select component following the WAI-ARIA listbox popup pattern. Supports declarative <SelectItem> children, a search filter, multiple selection with checkboxes, and a data-driven options prop for virtualised large lists.

Installation

pnpm add @fluixi/select

Usage

Single select

import {
  Select, SelectTrigger, SelectValue, SelectPortal,
  SelectContent, SelectItem,
} from '@fluixi/select';

<Select value={value()} onChange={setValue}>
  <SelectTrigger>
    <SelectValue placeholder="Pick one…" />
  </SelectTrigger>
  <SelectPortal>
    <SelectContent>
      <SelectItem value="a">Apple</SelectItem>
      <SelectItem value="b">Banana</SelectItem>
    </SelectContent>
  </SelectPortal>
</Select>

Multi-select with search

<Select selectionMode="multiple" value={values()} onValuesChange={setValues}>
  <SelectTrigger><SelectValue /></SelectTrigger>
  <SelectPortal>
    <SelectContent>
      <SelectSearch placeholder="Filter…" />
      <SelectItem value="a">Apple</SelectItem>
      <SelectItem value="b">Banana</SelectItem>
    </SelectContent>
  </SelectPortal>
</Select>

Virtualised large list

<Select options={thousandsOfOptions} value={value()} onChange={setValue}>
  <SelectTrigger><SelectValue /></SelectTrigger>
  <SelectPortal><SelectContent /></SelectPortal>
</Select>

Parts

Part	Description
`Select`	Root. `value`/`defaultValue`/`onChange` (single) or `onValuesChange` (multi); `selectionMode`; `placement`; `options` for data-driven mode.
`SelectTrigger`	Button that opens the listbox.
`SelectValue`	Displays the selected label(s); `placeholder` when nothing is selected.
`SelectPortal`	Portals content to `<body>` while open.
`SelectContent`	The floating listbox container.
`SelectItem`	A single option. `value`, `textValue`, `disabled`.
`SelectSearch`	Filter input; items show only when matching.

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