Browse components
Option Wheel
iOS-style picker wheel: rows curve around a 3D cylinder, snap into place and respond to wheel, drag, touch and arrow keys.
Installation
npx shadcn@latest add @glint-ui/option-wheelFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/option-wheel.json
Usage
import { OptionWheel } from "@/components/ui/option-wheel";
<OptionWheel options={["Small", "Medium", "Large"]} onChange={(v) => setSize(v)} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| options | ReactNode | — | string[] of choices. |
| defaultIndex | number | 0 | Initially selected index. |
| itemHeight | number | 40 | Row height in px. |
| visibleCount | number | 5 | Rows visible at once. |
| curvature | number | 20 | Degrees each row turns away from the center. |
| loop | boolean | false | Loop the wheel so it never hits an end. |
| label | string | "Options" | Accessible name. |
| onChange | ReactNode | — | (value: string, index: number) => void |
| className | string | — | Extra classes for the root element. |