Skip to content
Pinky UI

mobile

Wheel Picker

A scrollable value picker with a fixed centre selection window; inertia is native scroll-snap, not a physics loop.

  • mobile
  • picker
  • scroll-snap
  • value
Related pattern

Momentum comes from the platform's own scroll physics; the component only owns selection and the centre window.

Live preview

1
2
3
4
5
6
7
8
9
10
11
12

Quick usage

usage
import { WheelPicker } from "@pinky-ui/systems";

<WheelPicker label="Hour" options={hours} value={hour} onValueChange={setHour} />

Install

Add @pinky-ui/systems as a dependency, or use the CLI to copy this component's source directly into your project — no dependency to manage, fully editable.

shell
npm install @pinky-ui/systems

Prefer to run the whole repository locally instead?

repository
git clone https://github.com/florash/Pinky-UI.git
cd Pinky-UI
npm install
npm run dev

Accessibility

  • Every gesture has a labelled button or keyboard path, and primary controls meet a 44px touch target.
  • State remains readable without relying on colour or motion.

Performance

  • Interaction state is local and bounded; gesture updates do not require a page-wide render loop.
  • Timers and listeners are cleaned up on unmount.

Reduced motion

The same state change resolves immediately; travel, scale and spring motion are removed without removing the interaction.

When to use

  • Touch-first product surfaces where the next action should stay close to the hand.

When not to use

  • Desktop-only workflows or interactions whose gesture would hide the only available action.

Skill

Purpose

A scrollable value picker with a fixed centre selection window — the familiar time/date picker interaction, built on native scroll-snap rather than a custom physics loop.

Use when

Choosing one value from a short, ordered set — hours, quantities, durations — where scrolling through options feels more natural than a dropdown or a row of buttons.

Avoid

  • Long or unbounded option sets; scroll-snap stays legible for a few dozen items, not hundreds
  • Multi-select — this is a single-value picker
  • Free-form numeric entry where a native number input is more direct

Interaction

Momentum and inertia are the browser's own scroll-snap-type: y mandatory behaviour, not simulated physics — this is deliberate: the platform already does this correctly and consistently across touch and trackpad. A short debounce after scrolling settles reads the centred item and commits it.

Accessibility

role="listbox" with role="option" children and aria-selected on the current value. Arrow Up/Down move one item, Home/End jump to the ends — the picker is fully usable without a scroll gesture.

Reduced motion

Programmatic scrolling (keyboard selection, value changes) uses instant scroll rather than smooth scroll when motion is reduced; the centre selection window itself never animates.

Composition and anti-patterns

Don't wrap picker items in Jelly or Tilt — a wheel full of independently wobbling rows fights the platform-native scroll feel this component exists to preserve.

Open this skill on its own page