‹ components

Combobox

draftv0.9.0·open in canvas

Typeahead select — an input that filters a listbox as you type. Pick-from-list only.

Installnpx shadcn add @cids/combobox
Live demo

Motion · tap to replay

honors reduced-motion

Panel fades in via `animate-in fade-in-0` (150ms). Filtering re-renders instantly — no list animation; search must feel wired to the keys.

Brand chip remounts on tap · highlighted tokens are named in this component's doc · spring is budgeted to human feedback only.

import { Combobox } from "@/design-system";

const [token, setToken] = useState<string>();

<Combobox
  aria-label="Search tokens"
  placeholder="Search tokens…"
  value={token}
  onValueChange={setToken}
  options={[
    { value: "sol", label: "SOL", hint: "$184.26" },
    { value: "jup", label: "JUP", hint: "$0.8123" },
    { value: "bonk", label: "BONK", hint: "$0.00002314" },
  ]}
/>

Tokens · live

Resolves in the active theme — flip the toggle above to verify.

States · from doc

Parsed from the doc. Interact with the live demo for hover/active.

**Closed**: input shows the selected label .**Open + filtering**: typing filters ;the active option tracks arrows/hover.**Disabled** : 40% opacity.

Typeahead select — an input that filters a listbox as you type. Pick-from-list only.

Anatomy

┌ Search tokens…          ┐ ← input (role=combobox, Input's look)
├─────────────────────────┤
│ SOL              $184.26│ ← option (label · hint)
│ JUP              $0.8123│ ← active: surface-container-high
└─────────────────────────┘ ← listbox, trigger-width, max-h + scroll

Props

PropTypeDefaultNotes
optionsComboboxOption<T>[]—{ value, label, hint?, disabled? }.
valueT undefined`—Controlled; always a known option.
onValueChange(value: T) => void—
placeholderstring"Search…"
emptyTextstring"No matches"Zero-match message.
disabledboolean—
aria-labelstring—Names input + listbox when no visible label.
classNamestring—Merged onto the input.

Motion

Panel fades in via animate-in fade-in-0 (150ms). Filtering re-renders

instantly — no list animation; search must feel wired to the keys.

A11y

ARIA 1.2 combobox, hand-rolled (no cmdk — keeps the component

registry-portable): input carries role="combobox",

aria-expanded, aria-controls, aria-autocomplete="list", and

aria-activedescendant pointing at the active option; options are

role="option" with aria-selected. Focus never leaves the input —

arrows move the active option, Enter selects, Escape closes, Tab

closes and moves on. Options use onMouseDown.preventDefault() so

clicking never blurs the input mid-selection.

Self-contained: copy the folder into any Tailwind+React app, or use the install command above. Docs and this page render the same file on disk — they cannot drift.