## Wheel Picker (S—048)

A drum-roll time picker: drag, scroll or arrow through hours and minutes with a 3D tilt.

- URL: https://sundaeui.dev/components/wheel-picker
- Category: Forms & inputs · Art direction: Refined
- Access: Sundae Pro (authenticated install)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/wheel-picker.json`
- Tags: wheel, form, picker, time, input, ios

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.

### Usage

```tsx
import { WheelPicker } from '@/components/sundae/wheel-picker'

<WheelPicker
  columns={[{ label: 'Hour', items: hours }, { label: 'Minute', items: minutes }]}
  value={value}
  onValueChange={setValue}
/>
```

### Props

- `columns` (`{ label; items; loop? }[]`, required): One drum per column.
- `value` (`number[]`, required): Selected index per column.
- `onValueChange` (`(v: number[]) => void`, required): Called on change.
- `label` (`string`, default `'Time'`): Group label.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### 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.

### 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.

### Keyboard

- ↑ / ↓: Previous / next item
- Page Up / Down: Jump five items