A custom select whose highlight glides between options on a spring and whose arrow rotates open. Supports arrow keys, Home, End, Enter, Escape and type-ahead.
Deploy region
npx shadcn@latest add https://hyperblur.dev/r/select-glide.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/select-glide.tsx.
import { GlideSelect } from "@/components/hyperblur/select-glide"
<GlideSelect options={[{ value: "fra", label: "Frankfurt" }, { value: "iad", label: "Virginia" }]} defaultValue="fra" onChange={(v) => console.log(v)} />| Prop | Type | Default | Description |
|---|---|---|---|
| options | GlideOption[] | sample regions | Options with value and label, and optionally hint and disabled. |
| value | string | Controlled selected value. Pair with onChange. | |
| defaultValue | string | Initially selected value when uncontrolled. | |
| onChange | (value: string, option: GlideOption) => void | Called when the selection changes. | |
| placeholder | string | "Select an option" | Text shown while nothing is selected. |
| label | string | "Select" | Accessible name of the control and its list. |
| accent | string | "#2f7bff" | Color of the highlight, focus ring and check mark. |
| disabled | boolean | false | Disables the control. |
| defaultOpen | boolean | false | Start with the list open. |