Combobox (Autocomplete)

Installation

Install @vinui/react from GitHub with pnpm, then import its stylesheet once, in your root layout or entry file:

pnpm add github:vindotski/vinui#path:packages/react

import '@vinui/react/styles.css';

Usage

An autocomplete input built on Headless UI's Combobox. Pass the options and how to display them; filtering is handled for you:

import { Combobox, ComboboxOption } from '@vinui/react';

<Combobox
  aria-label="Assignee"
  placeholder="Search people…"
  options={people}
  displayValue={(person) => person?.name ?? ''}
  value={person}
  onChange={setPerson}
>
  {(person) => <ComboboxOption value={person}>{person.name}</ComboboxOption>}
</Combobox>;

• Options are filtered by a case-insensitive match on displayValue; pass filter to match differently (e.g. on email too).
• emptyMessage is shown when nothing matches (default "No results found").
• immediate opens the options on focus. Use by for object values and name to submit with a form.
• invalid gives a red border and sets aria-invalid, like the other fields.

More to come

Detailed examples, keyboard interaction and the full component API are on their way.