---
title: Checkbox Group
description: "Shares checked state across multiple checkboxes."
---

```tsx
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

```bash
npx shadcn@latest add @madeui/checkbox-group
```

## Usage

```tsx
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.

```tsx
'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](https://base-ui.com/react/components/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](https://base-ui.com/react/components/checkbox-group#api-reference). Accepts a `style` prop (`StyleXStyles`, merged last).