Wheel Picker
NewPro
An iOS-style wheel picker on a 3D cylinder that spins with drag, wheel or keys and snaps with momentum.
Alarm
7:30 AM
Customize
5
36px
Minute step
Installation
Wheel Picker is part of Pro. After purchase you're invited to the private mekai-ui/mekai-ui-pro GitHub repository: copy wheel-picker.tsx into components/ui and run npm install motion.
Usage
import { WheelPicker } from "@/components/ui/wheel-picker";
<WheelPicker
label="Alarm time"
columns={[
{ label: "Hour", options: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], value: hour, onChange: setHour },
{ label: "Minute", options: ["00", "15", "30", "45"], value: minute, onChange: setMinute },
{ label: "Period", options: ["AM", "PM"], value: period, onChange: setPeriod },
]}
/>Props
5 properties| Property | Type | Default | Description |
|---|---|---|---|
| columns | { options, value?, defaultValue?, onChange?, label, width? }[] | — | One wheel per column. Options are strings, numbers or { value, label }. |
| itemHeight | number | 36 | Height of one row in pixels. |
| visibleCount | number | 5 | Rows visible at once. Even numbers round up to the next odd one. |
| label | string | "Picker" | Accessible name of the group. Each column is a spinbutton named by its own label. |
| className | string | — | Extra classes for the wrapper. |
Dependencies: motion