registry
@automindzsheets 01–77shadcn 4.x
SHEET 18

Combobox

ui / form

Searchable single-select built on Popover + Command.

type
ui
files
1
registry deps
button, command, popover
npm deps
lucide-react

installs

  • components/ui/combobox.tsx
  • Popover + Command, keyboard first
  • Extra match keywords per option
  • Hidden input for plain form posts

Variations

one state per section

01

Selected value

Type to filter on label or keywords (“india” finds Mumbai). Clear with the × or by re-picking the selected row.

fluid

value: eu-west-1

02

Nothing selected

Placeholder uses muted ink, so an empty control never reads as a chosen value. One option is disabled in the list.

fluid
03

Loading options

Async options: spinner on the trigger and in the list, instead of an empty dropdown that looks broken.

fluid
04

Invalid

invalid sets aria-invalid, so the destructive ring and the screen-reader state come from the same prop.

fluid

Required before you can continue.

05

Disabled

No hover, no press, no clear button — the affordances leave with the interactivity.

fluid