Wheel picker

When to use #

Use it for

Touch-first pickers for months, hours and similar short lists.
Combine several wheels for a date or time.

Skip it when

The list is long and searchable; use a combobox.

Installation #

terminal

pnpm dlx shadcn@latest add https://caliperui.site/r/wheel-picker.json

Adds its 2 files to components/ui/, each with its own stylesheet, and installs their packages. No account needed. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage #

This is the code behind the preview above.

example.tsx

import { useState } from "react"
import { WheelPicker } from "@/components/ui/wheel-picker"

export function MonthWheel() {
  const months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
  const [month, setMonth] = useState("march");
  return (
    <div className="w-48">
      <WheelPicker label="Month" options={months.map((label) => ({ value: label.toLowerCase(), label }))} value={month} onValueChange={setMonth} />
    </div>
  );
}

API reference #

WheelPicker

component

PropTypeDefault

label *string—

options *readonly WheelOption[]—

valuestring—

defaultValuestring—

onValueChange((value: string) => void)—

namestring—

classNamestring—

It exposes listbox and option semantics, with aria-hidden, aria-label and aria-selected kept in step with state.

KeyBehaviour

↓Moves to the next item or value.

↑Moves to the previous item or value.

HomeJumps to the first item or the minimum.

EndJumps to the last item or the maximum.

Motion #

It declares no animation in its component source. Any transition comes from its stylesheet, which uses the duration tokens that collapse to instant under prefers-reduced-motion.