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
