WheelPicker
A scroll-snapping wheel of values — seed-design's picker, for dates, times and any bounded range.
Unlike the rest of crisp, this one is measured from seed-design: it is a touch-first control for choosing from a bounded range, and it composes into date and time pickers. Each column is an ordinary scroll container with scroll-snap-type: y mandatory and rows that snap centred, so flicking behaves natively on every platform and there is no JavaScript animation to fight.
Installation
npm install @crisp-ui-kit/crispProps
Prop
Type
onValueChange reports every column, not just the one that moved, so a consumer can hand the result straight to state without merging it themselves.
Measurements
From @seed-design/css:
| small | medium | |
|---|---|---|
| viewport height | 180px | 220px |
| row height | 36px | 44px |
| font / line | 20/27px | 26/35px |
| fade height | min(40%, 108px) | min(40%, 132px) |
The selection band is inset 16px, radius 8px. Rows outside it sit at a muted grey and the selected row at the primary foreground, with the edges faded so the column reads as a wheel rather than a list.
Accessibility
Each column is a listbox that takes focus, with its own accessible name. ↑/↓ move the selection, Home/End jump to the ends, and the selection clamps at both ends rather than wrapping — a wheel is a range, not a carousel.
The focus ring is drawn on the selected row and only for keyboard focus (:focus-visible): someone who just tapped a row does not need to be told which one they hit.