A searchable select. Type to filter with highlighted matches, move with the arrow keys, group options and close with Escape.
npx shadcn@latest add https://hyperblur.dev/r/select-command.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/select-command.tsx.
import { SelectCommand } from "@/components/hyperblur/select-command"
<SelectCommand placeholder="Pick a city" options={[{ value: "lis", label: "Lisbon", group: "Europe" }, { value: "tok", label: "Tokyo", group: "Asia" }]} />| Prop | Type | Default | Description |
|---|---|---|---|
| options | { value: string; label: string; group?: string; description?: string; disabled?: boolean }[] | required | Options to choose from. Options sharing a group are listed under one heading. |
| value | string | Controlled value. Pair with onValueChange. | |
| defaultValue | string | Initial value when uncontrolled. | |
| onValueChange | (value: string) => void | Called with the chosen value. | |
| placeholder | string | "Select an option" | Trigger text while nothing is chosen. |
| searchPlaceholder | string | "Search..." | Placeholder of the search field. |
| emptyText | string | "No results found" | Text shown when the search matches nothing. |
| maxHeight | number | 240 | Maximum height of the list in pixels. |
| placement | "bottom" | "top" | "bottom" | Open below or above the trigger. |
| defaultOpen | boolean | false | Start with the list open. |
| label | string | "Select" | Accessible name of the control. |
| name | string | Adds a hidden input with the chosen value. | |
| disabled | boolean | false | Disable the select. |
| accent | string | "#2f7bff" | Focus and active row color. |