Form

Combobox

A searchable select on a real text input. Filtering built in, empty state included.

Show code

"use client";

import {
  Combobox,
  ComboboxContent,
  ComboboxEmpty,
  ComboboxInput,
  ComboboxItem,
  ComboboxList,
} from "@/registry/lilt/ui/combobox";

const plants = [
  "Basil",
  "Chamomile",
  "Fern",
  "Lavender",
  "Marigold",
  "Nasturtium",
  "Rosemary",
  "Sunflower",
];

export default function ComboboxDemo() {
  return (
    <div className="w-full max-w-72">
      <Combobox items={plants}>
        <ComboboxInput
          aria-label="Garden plant"
          placeholder="Pick a garden plant"
        />
        <ComboboxContent>
          <ComboboxEmpty />
          <ComboboxList>
            {(plant: string) => (
              <ComboboxItem key={plant} value={plant}>
                {plant}
              </ComboboxItem>
            )}
          </ComboboxList>
        </ComboboxContent>
      </Combobox>
    </div>
  );
}

Installation

npx shadcn@latest add @lilt/combobox

Accessibility

A real text input with combobox semantics — arrows navigate, Enter selects, Escape closes.
Give it a visible label or wrap it in a Field; the clear and open buttons carry their own aria-labels.