Wheel Picker

iOS-style picker wheel: momentum, 3D cylinder, date and time presets. Pro · Forms and input › Date and time

iOS-style picker wheels: drag, flick or scroll a column and it coasts and snaps to an option. Each column is a listbox: arrows, Page Up/Down, Home/End and type-ahead move the selection.

Installation

npx valyro-cli@latest login
npx valyro-cli@latest add wheel-picker

npm install valyro-ui-pro

import 'valyro-ui-pro/styles.css';
import { WheelPicker } from 'valyro-ui-pro';

Props

Prop	Type	Default
`columns` *	`WheelPickerColumn[]`		Wheels from left to right, each with its own key, accessible label and options.
`value`	`string[]`		Selected option value per column, in column order.
`defaultValue`	`string[]`		Initial `value` when uncontrolled.
`onValueChange`	`(value: string[]) => void`		Called when a wheel comes to rest on a new option (not on every row it passes).
`visibleCount`	`number`	`5`	Rows the drum shows (default 5).
`loop`	`boolean`	`false`	Every column wraps around (a column's own `loop` wins).
`disabled`	`boolean`	`false`	Locks every wheel: dragging, scrolling and keys are ignored and the columns leave the tab order.
`invalid`	`boolean`	`false`	Error state, e.g. from a FormField: aria-invalid on every column (an explicit `aria-invalid` wins).

Related components

Date Picker — Date selection
Date Range Picker — Date range selection
Date Field — Date typed segment by segment in the locale order
Time Picker — Time selection
Time Field — Time typed segment by segment, 24-hour or AM/PM
Date Of Birth Input — Date of birth as three selects in locale order
Text Input — Text fields
Textarea — Multiline text input
Search Input — Search field
Mentions Input — Text with @mentions and #tags, async suggestions
Tags Input — Tag entry
Select — Pick one option from a list

Previous: Time Field · Next: Date Of Birth Input · All Forms and input