Wheel Picker
A drum-roll time picker: drag, scroll or arrow through hours and minutes with a 3D tilt.
wheel-picker.tsxwheel-picker.css
Checking access…
Overview
Each column is a short drum with items tilting away from the selection band. Drag vertically, use the scroll wheel, or focus a column and use the arrow keys.
Works for any short list, not just time: sizes, quantities, years.
When to use
- Alarm, reminder and duration pickers on touch-first UIs.
When not to use
- Dates far in the past or future: a calendar or text field is faster.
Installation
$
pnpm dlx shadcn@latest add https://sundaeui.dev/r/wheel-picker.json$
npx shadcn@latest add https://sundaeui.dev/r/wheel-picker.json$
yarn dlx shadcn@latest add https://sundaeui.dev/r/wheel-picker.json$
bunx --bun shadcn@latest add https://sundaeui.dev/r/wheel-picker.jsonWorks in any React project. Files are written to components/sundae/. Read the source in the stage’s Code view. Pro assets need a personal token. See authenticated installs.
- No dependencies beyond React 18 or later.
- Copy wheel-picker.tsx and wheel-picker.css into components/sundae/.
- The CSS file is imported by the component, so no extra configuration is needed.
- Import the component and use it as shown below.
Usage
import { WheelPicker } from '@/components/sundae/wheel-picker'
<WheelPicker
columns={[{ label: 'Hour', items: hours }, { label: 'Minute', items: minutes }]}
value={value}
onValueChange={setValue}
/>Props
| Prop | Type | Default |
|---|---|---|
columns*One drum per column. | { label; items; loop? }[] | — |
value*Selected index per column. | number[] | — |
onValueChange*Called on change. | (v: number[]) => void | — |
labelGroup label. | string | 'Time' |
fillSurface: dark or light. | 'dark' | 'light' | 'dark' |
Accessibility
- Each column is role="spinbutton" with aria-valuetext set to the visible item.
- The group has an accessible name.
- Reduced motion removes the tilt transition.
Customization
- Every colour is a CSS custom property on the root class; override them in your own stylesheet.
- fill="light" switches the built-in light palette.
Keyboard
- ↑ / ↓
- Previous / next item
- Page Up / Down
- Jump five items
FAQ
- Is Wheel Picker free?
- Wheel Picker is part of Sundae Pro. The live preview is open to everyone; the source installs with a Pro account.
- How do I install Wheel Picker?
- Run npx shadcn@latest add https://sundaeui.dev/r/wheel-picker.json. The files are written to components/sundae/. It has no dependencies beyond React 18 or later.
- Does Wheel Picker support keyboard and screen readers?
- Each column is role="spinbutton" with aria-valuetext set to the visible item. The group has an accessible name.
- Does Wheel Picker respect reduced motion?
- Reduced motion removes the tilt transition.
More like this
All forms →Time Field
Forms · RefinedOTP Field
Forms · RefinedPassword Strength
Forms · RefinedPhone Input
Forms · RefinedSettings List
Forms · RefinedUnit Input
Forms · Refined