Wheel Picker · paneui

Alarm set for 7:30 AM

Installation

pnpm dlx shadcn@latest add @paneui/wheel-picker

Usage

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

<WheelPicker aria-label="Size" options={["S", "M", "L"]} defaultValue="M" />

Composition

WheelPickerGroup (optional)
└── WheelPicker

Examples

Single Wheel

Use a single wheel for one short list, such as sizes or quantities.

Disabled Options

Use for options that exist but can't be picked right now.

Rows and Height

In a Form

Disabled

Keyboard

The wheel is a listbox. Up/Down move one row, PageUp/PageDown a window, and Home/End jump to the ends. Touch and trackpads scroll natively with momentum; mouse users can drag and fling. The drum never rests on a disabled option and nudges to the nearest enabled row.

Motion

With reduced motion the drum is flat, rows slide straight, and keyboard or click jumps are instant.

Other pickers: Color Picker, Date Range Picker.

API Reference

WheelPicker

One scroll wheel. Also accepts every prop of div.

options*: readonly (string | { value: string; label: ReactNode; textValue?: string; disabled?: boolean })[]; Rows of the wheel. textValue is the accessible text when label isn't a string.
value: string; Controlled selected value.
defaultValue: string; Initial value when uncontrolled. Defaults to the first option.
onValueChange: (value: string) => void; Fires once the drum settles on a new row (after momentum, snap, a click or a key).
visibleCount= 5 (or the group's): number; Rows visible through the window.
itemHeight= 36 (or the group's): number; Row height in px.
disabled= false: boolean; Dim the wheel and stop scrolling, dragging and keys.
name: string; Name of a hidden input carrying the value, for forms.
aria-label: string; Accessible name for the listbox. Always set one.

Prop	Type	Default	Description
options*	readonly (string \| { value: string; label: ReactNode; textValue?: string; disabled?: boolean })[]	—	Rows of the wheel. `textValue` is the accessible text when `label` isn't a string.
value	string	—	Controlled selected value.
defaultValue	string	—	Initial value when uncontrolled. Defaults to the first option.
onValueChange	(value: string) => void	—	Fires once the drum settles on a new row (after momentum, snap, a click or a key).
visibleCount	number	5 (or the group's)	Rows visible through the window.
itemHeight	number	36 (or the group's)	Row height in px.
disabled	boolean	false	Dim the wheel and stop scrolling, dragging and keys.
name	string	—	Name of a hidden input carrying the value, for forms.
aria-label	string	—	Accessible name for the listbox. Always set one.

data-disabled: Present when disabled.

Data attribute	Description
data-disabled	Present when `disabled`.

WheelPickerGroup

Lays several wheels side by side on one raised surface with a single selection band. Also accepts every prop of div.

itemHeight= 36: number; Row height for every wheel inside.
visibleCount= 5: number; Visible rows for every wheel inside.

Prop	Type	Default	Description
itemHeight	number	36	Row height for every wheel inside.
visibleCount	number	5	Visible rows for every wheel inside.