||

Wheel Picker

Documentation Index

Fetch the complete documentation index at: /llms.txt. Use this file to discover all available pages before exploring further.

A draggable, momentum-based cylindrical picker with keyboard and optional sound feedback.

wheel-picker-demo

Overview

Wheel Picker is suited to short ordered choices such as times, durations, or compact numeric ranges. Drag, wheel, click, and keyboard input all settle on the same row detents.

Installation
npx honestui@latest add wheel-picker

Usage

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

<WheelPicker options={["09:00", "09:30", "10:00"]} defaultValue="09:30" aria-label="Meeting time" />

Accessibility

Provide an accessible label and keep option labels concise. Keyboard users can move by row, jump to the ends, and select without drag. Sound is off by default and should remain optional.

API Reference
PropTypeDefaultDescription
options*WheelPickerOption[]–Strings or { value, label } options.
valuestring–Controlled selected value.
defaultValuestring–Initial uncontrolled value.
onValueChange(value: string) => void–Runs after selection settles.
visibleCountnumber5Visible rows; use an odd number.
itemHeightnumber36Row height in pixels.
soundbooleanfalsePlays a short tick when the selected row changes.
disabledbooleanfalseDisables interaction.