headcn/ui

Installation

npx headcn@latest add listbox

Usage

Listboxes are built using the Listbox, ListboxButton, ListboxSelectedOption, ListboxOptions, and ListboxOption components.

The ListboxButton will automatically open/close the ListboxOptions when clicked, and when the listbox is open, the list of options receives focus and is automatically navigable via the keyboard.

import {
  Listbox,
  ListboxButton,
  ListboxOption,
  ListboxOptions,
} from "@/components/ui/listbox"

<Listbox<Person>
  value={selectedPerson}
  onChange={(value) => value && setSelected(value.id)}
  __demoMode
>
  <ListboxButton>
    {selectedPerson?.name}
    <ChevronDownIcon className="fill-muted-foreground group-data-hover:fill-foreground size-4" />
  </ListboxButton>
 
  <ListboxOptions anchor="bottom" transition>
    {people.map((person) => (
      <ListboxOption<Person> key={person.id} value={person}>
        <div className="text-foreground text-sm/6">{person.name}</div>
        <CheckIcon className="fill-foreground invisible size-4 group-data-selected:visible" />
      </ListboxOption>
    ))}
  </ListboxOptions>
</Listbox>