Wheel Picker

"use client";

import * as React from "react";

About#

The <WheelPicker /> component is built on top of react-wheel-picker.

Installation#

pnpmnpmyarnbun
pnpm dlx shadcn@latest add junwen-k/ui-x/wheel-picker
Copy

Usage#

Copyimport { WheelPicker, WheelPickerWrapper } from "@/components/ui/wheel-picker";

Copy<WheelPickerWrapper>
  <WheelPicker />
</WheelPickerWrapper>

Examples#

Default#

"use client";

import * as React from "react";

Form#

"use client";

import { getHours, getMinutes, setHours, setMinutes } from "date-fns";

Accessibility#

Each <WheelPicker /> column is keyboard-operable: focus it and use Up/Down (or Left/Right when laid out horizontally) to move one option at a time, matching the pointer/touch scroll behavior. See react-wheel-picker's accessibility notes for the full set of keyboard and ARIA behavior it provides.

Give each <WheelPicker /> an accessible name (e.g. wrap it with a <label> or pass aria-label) when a column's purpose isn't obvious from surrounding text, such as separate hour/minute columns in a time picker.

API Reference#

Styled wrappers around react-wheel-picker — see its API reference for the underlying props.

WheelPickerWrapper#

Wraps WheelPickerWrapper with border and highlight styling. Place one or more <WheelPicker /> columns inside.

WheelPicker#

Wraps WheelPicker with themed option and highlight classes, and accepts all of its props (options, value, onValueChange, infinite, visibleCount, …). The exported WheelPickerOption type describes the options items.