Picker Curved Wheel

ProNew

A vertical list picker bent like a drum, with rows that turn away from the middle as they scroll.

Customize

This item has no props to tune. Use the lens above to change theme, density, direction and more.


pnpm dlx shadcn@latest add @tealmac-pro/picker-curved-wheel

Prop	Type	Default	Description
`options`	`{ value: string; label: string; disabled?: boolean }[]`	`-`	Rows in the wheel.
`label`	`string`	`-`	Accessible name of the listbox.
`value`	`string`	`-`	Controlled value.
`defaultValue`	`string`	`first value`	Initial value.
`onValueChange`	`(value: string) => void`	`-`	Called when the selection changes.
`itemHeight`	`number`	`40`	Row height in px.
`rows`	`number`	`5`	Visible rows (use an odd number).

Row curvature is a transform and opacity set from the scroll position in one animation frame per scroll event.
With prefers-reduced-motion: reduce rows stay flat and scrolling to a selection is instant.
A listbox with aria-activedescendant; the selected row has aria-selected.
Scroll, drag and click all select the row that lands in the centre band.

Guide and examples


pnpm dlx shadcn@latest add @tealmac-pro/picker-curved-wheel

Prop	Type	Default	Description
`options`	`{ value: string; label: string; disabled?: boolean }[]`	`-`	Rows in the wheel.
`label`	`string`	`-`	Accessible name of the listbox.
`value`	`string`	`-`	Controlled value.
`defaultValue`	`string`	`first value`	Initial value.
`onValueChange`	`(value: string) => void`	`-`	Called when the selection changes.
`itemHeight`	`number`	`40`	Row height in px.
`rows`	`number`	`5`	Visible rows (use an odd number).

Row curvature is a transform and opacity set from the scroll position in one animation frame per scroll event.
With prefers-reduced-motion: reduce rows stay flat and scrolling to a selection is instant.
A listbox with aria-activedescendant; the selected row has aria-selected.
Scroll, drag and click all select the row that lands in the centre band.