Checkbox Group

A group component for managing multiple checkboxes with shared state. Supports controlled and uncontrolled usage.

#Installation

npx @dinachi/cli@latest add checkbox-group

tsx

import { CheckboxGroup } from '@/components/ui/checkbox-group'

A basic checkbox group with multiple options

Select your interests

Design

Development

Marketing

Checkbox group with controlled state and live value display

Select frameworks you know

React

Vue

Angular

Svelte

Selected: react

Checkbox group with horizontal layout

Notification preferences

SMS

Push

Checkbox group in disabled state

Plan features (upgrade to enable)

Basic features

Advanced features

Premium features

Prop	Type	Default	Description
value	string[]	—	The controlled value of the checkbox group
defaultValue	string[]	[]	The default value when uncontrolled
onValueChange	(value: string[]) => void	—	Callback fired when the group value changes
disabled	boolean	false	Whether the entire checkbox group is disabled
required	boolean	false	Whether at least one checkbox must be checked