Checkbox Group
FormsA group component for managing multiple checkboxes with shared state. Supports both composition and list-based APIs.
Import
import {
CheckboxGroup,
CheckboxGroupItem,
CheckboxList
} from "@/components/ui/checkbox-group";Usage
Composition API
Build checkbox groups with individual items
Notification Preferences
Selected: email
List API
Pass options as an array for simpler usage
Select Features
Track user behavior
Export data to CSV/Excel
Programmatic access
Horizontal Layout
Display checkboxes in a row
Days Available
With Error
Display validation errors
Terms & Conditions
You must accept all terms to continue
Disabled
Disabled state for all checkboxes
Preferences
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
value | string[] | undefined | Controlled selected values |
defaultValue | string[] | [] | Default selected values for uncontrolled usage |
onValueChange | (values: string[]) => void | undefined | Callback when selection changes |
orientation | "horizontal" | "vertical" | "vertical" | Layout direction of the checkboxes |
label | string | undefined | Group label text |
error | string | undefined | Error message to display |
disabled | boolean | false | Disable all checkboxes in the group |