Checkbox Group
A group of checkboxes that can be controlled together.
import { Checkbox } from '@/components/ui/checkbox';
import { CheckboxGroup } from '@/components/ui/checkbox-group';
import { Label } from '@/components/ui/label';
export function CheckboxGroupDefault() {
return (
<CheckboxGroup defaultValue={['updates']}>
<Label>
<Checkbox name='notifications' value='updates' />
Product updates
</Label>
<Label>
<Checkbox name='notifications' value='news' />
Company news
</Label>
<Label>
<Checkbox name='notifications' value='offers' />
Special offers
</Label>
</CheckboxGroup>
);
}
Installation
Usage
import { Checkbox } from "@/components/ui/checkbox"
import { CheckboxGroup } from "@/components/ui/checkbox-group"
import { Label } from "@/components/ui/label"<CheckboxGroup defaultValue={['option1']}>
<Label>
<Checkbox name='options' value='option1' />
Option 1
</Label>
<Label>
<Checkbox name='options' value='option2' />
Option 2
</Label>
</CheckboxGroup>Examples
With Field
Choose which emails you'd like to receive.
import { Checkbox } from '@/components/ui/checkbox';
import { CheckboxGroup } from '@/components/ui/checkbox-group';
import {
Field,
FieldDescription,
FieldLabel,
} from '@/components/ui/field';
import { Label } from '@/components/ui/label';
export function CheckboxGroupWithField() {
return (
<div>
<Field>
<FieldLabel>Email Preferences</FieldLabel>
<FieldDescription>
Choose which emails you'd like to receive.
</FieldDescription>
<CheckboxGroup className='mt-2'>
<Label>
<Checkbox name='emails' value='marketing' />
Marketing emails
</Label>
<Label>
<Checkbox name='emails' value='social' />
Social notifications
</Label>
<Label>
<Checkbox name='emails' value='security' />
Security alerts
</Label>
</CheckboxGroup>
</Field>
</div>
);
}