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

Basic checkbox group with vertical layout.

Select frameworks

React

Vue

Angular

Svelte

Horizontal

Horizontal layout for inline checkbox groups.

SMS

Push

API Reference

Complete list of props for CheckboxGroup.

Props

Prop	Type	Default	Description
`value`	`string[]`	-	Controlled selected values
`defaultValue`	`string[]`	`[]`	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
`disabled`	`boolean`	`false`	Disable all checkboxes in the group
`aria-label`	`string`	-	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
Labels are properly associated with checkboxes