NOCTA UI

Wheel Picker

Accessible iOS-style wheel picker with smooth scroll-snapping, keyboard navigation, and composite grouping — inspired by react-wheel-picker.

Installation

Install the Wheel Picker via the nocta-ui CLI:

npx @nocta-ui/cli add wheel-picker

Import the components you need:

import {
  WheelPicker,
  WheelPickerGroup,
  WheelPickerItem,
} from '@/components/ui/wheel-picker';

Selected: June

Small

Medium

Large

Selected time: 08:00

Selected date: November 10, 2024

Prop

Type

Prop

Type

Prop

Type

Toggle Group

Grouped toggle buttons for single or multiple selection states with shared styling and keyboard support.

Area Chart

Visualise continuous trends and cumulative values with smooth area graphs.