Founding price: $35, then $79.99 after 23:59 UTC on 4 November, then $79.99
Get ProAn iOS-style drum picker of one or more scroll-snap columns with looping, typeahead and keyboard control, for times, dates and any short list.
This item has no props to tune. Use the lens above to change theme, density, direction and more.
Use it on touch screens where a drum is the natural control: a time of day, a short list of durations, a quantity. It gives immediate feedback and needs no keyboard.
On desktop prefer time-field or date-field, which are faster to type into.
| Prop | Type | Default | Description |
|---|---|---|---|
| columns | WheelColumn[] | - | { id, label, options: { value, label, disabled? }[], loop?, width?, align? }. |
| value / defaultValue | Record<string, string> | first options | Selected option value per column id. |
| onValueChange | (value, changedColumnId) => void | - | Called when a column settles on a new option. |
| itemHeight | number | 36 | Row height in px. |
| visibleItems | 3 | 5 | 7 | 5 | Visible rows. |
| label / disabled | - | Picker / false | Group name and disabled state. |
| Keys | Action |
|---|---|
| Up / Down | Previous or next option; a looping column wraps |
| Page Up / Page Down | Jump by a visible page |
| Home / End | First and last option |
| Type a label | Jumps to the first option that starts with the typed text |
| Touch / wheel / drag | Scrolls and snaps to the nearest row, which becomes the value |
listbox with aria-activedescendant and option rows with aria-selected; the group is named by label.aria-hidden, so screen readers see each option once.prefers-reduced-motion.