Three wheels for a time. Set time waits until every wheel has settled.
FreeWeb and MobileMotion
Preview
npx shadcn add @fetaui/wheel-pickerPlaygroundPickup time08:41 AM Saved 08:41
Scroll or drag a column
Evening, by five minutesPickup time11:05 PM
Scroll or drag a column
Icons animation
Motion
Installation
Terminal· bash
npx shadcn add @fetaui/wheel-picker
Accessibility
- Each wheel is a spinbutton with a text value.
- Set time is disabled while a wheel moves.
Motion
- Wheels flick with inertia and settle on a 260 and 28 spring.
- Numbers blur slightly while moving.
- With reduced motion, wheels step a row at a time, with no blur.
Responsive behavior
- 34 px rows at 300 px wide on Web, and 40 px rows at full width on Mobile.
Performance
- Reels move on motion values, so a drag does not re-render React.
- The scroll settle timer and running spring are stopped on unmount.
Note for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Import
WheelPickerfrom@/components/fetaui/wheel-picker. It composesButton. valueis 24 hour text, read when it mounts. Remount with akeyto change it from outside.onValueChangefires on Set time only, and Set time is disabled until the wheels settle.- Cancel shows only with
onCancel.titledefaults to Pickup time.
Related
Time FieldComponentA segmented time input. Each part is a spin button you can type into or step.Date PickerComponentA pill field that opens a month in a floating surface.Detent DialComponentA rotary control that clicks into steps.Stay PickerComponentPick a stay night by night, with prices in the grid. A range cannot cross a booked night.