Wheel Picker

A touch-friendly picker with natural momentum scrolling, infinite options, keyboard navigation, and type-ahead search.

Last updated August 12, 2026

CreditsModifiedPublished

Copied from Chánh Đại's React Wheel Picker.

Adds a gesture boundary that stops touch events from reaching a containing Drawer, so the picker's inertial scroll is not cancelled by swipe-to-dismiss
Uses a direction-isolated LTR picker surface so numeric wheels remain naturally ordered inside RTL interfaces

Overview

Installation

$ npx shadcn@latest add https://ui.persian-labs.ir/r/wheel-picker.json

Usage

import {
  WheelPicker,
  WheelPickerWrapper,
  type WheelPickerOption,
} from "@/components/ui/wheel-picker"
 
const options: WheelPickerOption[] = [
  { label: "React", value: "react" },
  { label: "Vue", value: "vue" },
  { label: "Svelte", value: "svelte" },
]
 
export function Example() {
  return (
    <WheelPickerWrapper>
      <WheelPicker options={options} defaultValue="react" />
    </WheelPickerWrapper>
  )
}

Examples

Inside a Dialog

The wheel works normally when placed in a focus-trapped Dialog.

Inside a Drawer

The wrapper isolates the wheel's touch gesture, preventing the Drawer from cancelling inertial scrolling.

Inside a Responsive Dialog

On mobile this composition becomes a Drawer and retains the same protected wheel gesture.

RTL

Persian labels work in RTL layouts while the wheel's scrolling surface keeps a predictable numeric direction.

API Reference

For option types, data attributes, and the complete upstream guide, see React Wheel Picker documentation.

WheelPickerWrapper

Prop	Type	Default	Description
className	string	—	Additional classes for the picker container.
children	ReactNode	required	One or more WheelPicker components.

WheelPicker

Prop	Type	Default	Description
options	WheelPickerOption<T>[]	required	Options displayed in the wheel.
value	T	—	The selected value in controlled mode.
defaultValue	T	—	The initial selected value in uncontrolled mode.
onValueChange	(value: T) => void	—	Called when the selected value changes.
infinite	boolean	false	Enables infinite scrolling through the options.
visibleCount	number	20	Number of visible options; use a multiple of four.
dragSensitivity	number	3	Controls drag responsiveness.
scrollSensitivity	number	5	Controls mouse-wheel responsiveness.
optionItemHeight	number	30	Height of each option in pixels.
classNames	WheelPickerClassNames	—	Classes for option, highlight wrapper, and highlight item slots.

Edit this page on GitHub

PreviousTypography NextIranian Bank