Skip to content

Combobox

Type to filter a long list, then pick one value or several as chips. Tapping a checked item removes it.

Sourcecomponents/combobox.tsx

One value

Several values

Usage

Combobox usage
import { Search } from "lucide-react";import { Combobox, ComboboxContent, ComboboxEmpty, ComboboxInput, ComboboxItem, ComboboxList } from "@/components/combobox";import { Field, FieldLabel } from "@/components/field";
export function ComboboxUsage({ timezones }: { timezones: string[] }) {  return (    <Field>      <FieldLabel>Time zone</FieldLabel>      <Combobox items={timezones}>        <ComboboxInput placeholder="Search time zones" />        <ComboboxContent>          <ComboboxEmpty />          <ComboboxList>            {(item: string) => (              <ComboboxItem key={item} value={item}>                {item}              </ComboboxItem>            )}          </ComboboxList>        </ComboboxContent>      </Combobox>    </Field>  );}

When to use

Use when

Picking from a list long enough to search, one value or several as chips (multiple + ComboboxChips). Tapping a checked item removes it

Don’t use when

A handful of options (use Select or Radio Group); running actions (use Command)