---
title: Checkbox Group
description: A group of checkboxes that can be controlled together.
links:
  doc: https://base-ui.com/react/components/checkbox-group
  api: https://base-ui.com/react/components/checkbox-group#api-reference
---

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

```bash
npx shadcn@latest add @fab-ui/checkbox-group
```

**Install the following dependencies:**

```bash
npm install @base-ui/react
```

**Copy and paste the following code into your project.**

```tsx
import { CheckboxGroup as CheckboxGroupPrimitive } from '@base-ui/react/checkbox-group';

import { cn } from '@/lib/utils';

function CheckboxGroup({ className, ...props }: CheckboxGroupPrimitive.Props) {
  return (
    <CheckboxGroupPrimitive
      className={cn('flex flex-col items-start gap-1', className)}
      {...props}
    />
  );
}

export { CheckboxGroup };
```

**Update the import paths to match your project setup.**

## Usage

```tsx
import { Checkbox } from "@/components/ui/checkbox"
import { CheckboxGroup } from "@/components/ui/checkbox-group"
import { Label } from "@/components/ui/label"
```

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

```tsx
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&apos;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>
  );
}
```