NOCTA UI

Toggle Group

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

Installation

Install the Toggle Group component using the nocta-ui CLI:

npx @nocta-ui/cli add toggle-group

Import the components:

import {
  ToggleGroup,
  ToggleGroupItem
} from '@/components/ui/toggle-group';

Prop

Type

Prop

Type

Toggle

Accessible toggle button built on top of Ariakit Checkbox, supporting variants, sizes, and icon composition.

Wheel Picker

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