Listbox (Select)

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

A select menu built on Headless UI's Listbox. It behaves like a native <select> (keyboard, typeahead, form submission) but options can contain anything, such as icons:

import { Listbox, ListboxOption } from '@vinui/react';

const [person, setPerson] = useState(people[0]);

<Listbox aria-label="Assignee" value={person} onChange={setPerson} by="id" placeholder="Select…">
  {people.map((p) => (
    <ListboxOption key={p.id} value={p}>
      {p.name}
    </ListboxOption>
  ))}
</Listbox>;

• The selected option is shown in the button using the same content as in the list.
• Use by (a property name or a function) when values are objects.
• Pass name to submit the value with a form.
• invalid gives a red border, like the other fields; pair it with an ErrorMessage in the Field.

More to come

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