combobox

Editable input with a consumer-filtered floating suggestion list.

A combobox follows the ARIA combobox pattern: a text input keeps focus while the user types, and a popup listbox shows filtered suggestions. Filtering is consumer-managed — @fluixi/combobox drives the ARIA wiring and keyboard behaviour; you supply the filtered items.

Installation

pnpm add @fluixi/combobox

Usage

import {
  Combobox, ComboboxControl, ComboboxInput, ComboboxTrigger,
  ComboboxPortal, ComboboxContent, ComboboxItem,
} from '@fluixi/combobox';

const [query, setQuery] = createSignal('');
const filtered = createMemo(() =>
  fruits.filter(f => f.toLowerCase().includes(query().toLowerCase()))
);

<Combobox value={selected()} onChange={setSelected}>
  <ComboboxControl>
    <ComboboxInput value={query()} onInput={e => setQuery(e.target.value)} />
    <ComboboxTrigger />
  </ComboboxControl>
  <ComboboxPortal>
    <ComboboxContent>
      <For each={filtered}>
        {item => <ComboboxItem value={item}>{item}</ComboboxItem>}
      </For>
    </ComboboxContent>
  </ComboboxPortal>
</Combobox>

Parts

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