Skip to main content
ninna-ui

CheckboxGroup

CheckboxGroup component for managing multiple checkbox selections with shared state.

import { CheckboxGroup } from "@ninna-ui/forms"
pnpm add @ninna-ui/forms

Requires @ninna-ui/core (auto-installed) + CSS setup.

View source

Usage

CheckboxGroup manages multiple checkbox selections with shared state.

import { CheckboxGroup, CheckboxGroupItem } from "@ninna-ui/forms";


<CheckboxGroup defaultValue={["option1"]} onValueChange={setSelected}>
  <CheckboxGroupItem value="option1" label="Option 1" />
  <CheckboxGroupItem value="option2" label="Option 2" />
  <CheckboxGroupItem value="option3" label="Option 3" />
</CheckboxGroup>

Basic

Each item toggles when its visible box or associated label is clicked.

Select frameworks by clicking a box or its label

Selected: react

Horizontal

Horizontal layout for inline checkbox groups.

Colors

CheckboxGroup supports all color themes.

API Reference

Complete list of props for CheckboxGroup.

Props

PropTypeDefaultDescription
valuestring[]-Controlled selected values
defaultValuestring[][]Default selected values (uncontrolled)
onValueChange(value: string[]) => void-Callback when selection changes
orientation'vertical' | 'horizontal''vertical'Layout orientation
gap'sm' | 'md' | 'lg''md'Gap between items
size'sm' | 'md' | 'lg''md'Size of all checkboxes in the group
color'neutral' | 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'danger''primary'Color theme for all checkboxes
variant'outline' | 'soft' | 'solid''outline'Visual variant for all checkboxes
disabledbooleanfalseDisable all checkboxes in the group
aria-labelstring-Accessible label for the checkbox group

Accessibility

  • Uses role="group" for proper grouping semantics
  • Supports aria-label and other ARIA attributes via props spread
  • Each checkbox is keyboard accessible (Space to toggle)
  • Supports disabled state for entire group
  • Each visible box and its label activate the native checkbox
  • Labels are properly associated with checkboxes