Skip to content

Combobox

Base UI

A select you can type into, for lists too long to scan.

Install

$ npx shadcn@latest add https://spotcheckui.com/r/combobox.json

Also installs @base-ui/react.

Usage

import { Combobox } from "@/components/spotcheck/combobox"

<Combobox label="Region" options={regions} value={region} onValueChange={setRegion} />

Props

  • label * RequiredstringDefault —Names the input for screen readers.
  • options * Requiredstring[]Default —
  • valuestring | nullDefault —The selected option, when you control it.
  • defaultValuestring | nullDefault —The starting option, when it manages itself.
  • onValueChange(value: string | null) => voidDefault —
  • placeholderstringDefault —
  • emptyTextstringDefault No matches.Shown when nothing matches.
  • classNamestringDefault —

Keyboard

↑ ↓Move through matches
EnterChoose a match
EscClose the list

Reduced motion

The list appears without animation.