Wheel pickerPro

• Picking times, dates and quantities on touch screens.
• Short ordered lists where scrolling feels natural.

• Long lists people search: use a combobox.
• Desktop forms where typing is faster.

Import it from @/components/ui/wheel-picker after installing.

import * as React from "react";
import { WheelPicker } from "@/components/ui/wheel-picker";

const hours = Array.from({ length: 12 }, (_, i) => ({ value: String(i + 1), label: String(i + 1) }));

export function HourPicker() {
  const [hour, setHour] = React.useState("9");
  return <WheelPicker aria-label="Hour" options={hours} value={hour} onValueChange={setHour} />;
}

• A listbox using aria-activedescendant; the centered option is aria-selected.
• Each wheel needs its own label (Hour, Minute…).

• Rows tilt and fade with distance from the center; scroll snapping settles each flick; keys scroll smoothly.

• Native scrolling, so flicks feel right on touch; combine several wheels in a flex row.

• Transforms are recalculated from scroll position; fine for lists up to a few hundred rows.

• onValueChange fires after scrolling stops (110ms), not on every row passed.