Checkbox Group
Shares checked state across multiple checkboxes.
import { Checkbox } from '@/components/ui/checkbox';
import { CheckboxGroup } from '@/components/ui/checkbox-group';
import { Label } from '@/components/ui/label';
export default function CheckboxGroupDemo() {
return (
<CheckboxGroup defaultValue={['newsletter']} aria-label="Email preferences">
<Label>
<Checkbox name="newsletter" /> Newsletter
</Label>
<Label>
<Checkbox name="product-updates" /> Product updates
</Label>
<Label>
<Checkbox name="promotions" /> Promotions
</Label>
</CheckboxGroup>
);
}
Install
npx shadcn@latest add @madeui/checkbox-groupUsage
import { Checkbox } from '@/components/ui/checkbox';
import { CheckboxGroup } from '@/components/ui/checkbox-group';Parent checkbox
A “select all” checkbox: make the group controlled, pass every child’s identifier to allValues, and add parent to a Checkbox with no name — it ticks all, unticks all, and goes indeterminate when only some children are checked.
'use client';
import * as React from 'react';
import * as stylex from '@stylexjs/stylex';
import { Checkbox } from '@/components/ui/checkbox';
import { CheckboxGroup } from '@/components/ui/checkbox-group';
import { Label } from '@/components/ui/label';
import { space } from '@/lib/constants.stylex';
const notifications = ['comments', 'mentions', 'follows'];
export default function CheckboxGroupWithParent() {
const [value, setValue] = React.useState<string[]>(['comments']);
return (
<CheckboxGroup
value={value}
onValueChange={setValue}
allValues={notifications}
aria-label="Notification preferences"
>
<Label>
<Checkbox parent /> All notifications
</Label>
<Label style={styles.child}>
<Checkbox name="comments" /> Comments
</Label>
<Label style={styles.child}>
<Checkbox name="mentions" /> Mentions
</Label>
<Label style={styles.child}>
<Checkbox name="follows" /> Follows
</Label>
</CheckboxGroup>
);
}
const styles = stylex.create({
child: {
marginLeft: space.s6,
},
});
API reference
Built on Base UI Checkbox Group. Give each child Checkbox a name and control the group with value / defaultValue / onValueChange (arrays of names); a parent checkbox is supported via allValues. All props are forwarded — see the Base UI Checkbox Group API reference. Accepts a style prop (StyleXStyles, merged last).