Combobox
Searchable select with fuzzy filtering and a gliding highlight.
A combobox is a select you can type into: it filters long lists such as countries, users, frameworks. Cuelark's combobox pairs a popover with the command list, so results filter fuzzily and the highlight glides as you arrow through.
Preview
Installation
pnpm dlx shadcn@latest add https://ui.cuelark.com/r/combobox.jsonThe CLI also installs the Cuelark theme tokens and the components it builds on. With the @cuelark namespace configured, use @cuelark/combobox.
Usage
import { Combobox } from "@/components/ui/combobox";
<Combobox options={[{ value: "next", label: "Next.js" }]} placeholder="Framework" />Motion
Opens with popIn; the highlight glides between results (inherited from Command).
Scale it with --cl-motion (0 off, 1 default, 1.5 expressive) on any ancestor. Reduced-motion preferences always switch it off.
API reference
Combobox
| Prop | Type | Default | Description |
|---|---|---|---|
| options | { value; label; keywords?; disabled? }[] | — | The choices. |
| value / defaultValue | string | — | Controlled or initial value. |
| onValueChange | (value: string) => void | — | Called on select (empty string when cleared). |
| placeholder · searchPlaceholder · emptyText | string | — | Copy. |
Accessibility
- The trigger is role=combobox with aria-expanded.
- Typing filters; arrows move; Enter selects; Esc closes.
FAQ
Also searched as: react combobox · searchable select · autocomplete dropdown · shadcn combobox · select with search