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
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
valueundefinedstring[]Controlled selected values
defaultValue[]string[]Default selected values for uncontrolled usage
onValueChangeundefined(values: string[]) => voidCallback when selection changes
orientation"vertical""horizontal" | "vertical"Layout direction of the checkboxes
labelundefinedstringGroup label text
errorundefinedstringError message to display
disabledfalsebooleanDisable all checkboxes in the group
| 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 |