React Select & Combobox
Two pickers sharing one option model. Select is a listbox: arrows navigate, Enter commits, Escape closes, and typing jumps by typeahead — even while closed. Combobox filters as you type across labels and descriptions. Options carry an optional description line and a disabled state, and the selected option shows a petrol check.
Select — arrows, Enter, Escape, and typeahead all work.
Combobox — type to filter, e.g. "bga".
Installation
npx shadcn@latest add "http://localhost:3000/registry/select.json"
Usage
Loading...
Props
Shared by Select and Combobox:
| Prop | Type | Default | Description |
|---|---|---|---|
| options | SelectOption[] | — | { value, label, description?, disabled? } |
| value | string | — | Selected option value |
| onChange | (value: string) => void | — | Selection callback |
| placeholder | string | "Select…" | Trigger / input placeholder |
| disabled | boolean | false | Disables the control |
| invalid | boolean | false | Error styling + aria-invalid |
Combobox additionally accepts emptyMessage (default "No results.").
New components every week
Get the week's new Kelvin UI components and templates in one short email. No spam, unsubscribe anytime.