# Checkbox: Nested groups

> Groups nest. Each parent reflects the state of the group directly below it, and the top parent covers everything.

Example: https://hextaui.com/docs/checkbox/examples/nested-groups
Component docs: https://hextaui.com/docs/checkbox.md

## Add this example

```bash
npx shadcn@latest add https://hextaui.com/r/checkbox-nested-groups.json
```

This adds `components/examples/checkbox/nested-groups.tsx` with the Checkbox component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/checkbox/nested-groups.tsx"
"use client"

import * as React from "react"

import { Checkbox, CheckboxGroup } from "@/components/ui/checkbox"

const userPermissions = ["users.read", "users.write", "users.delete"]
const billingPermissions = ["billing.read", "billing.write"]

export function CheckboxNestedGroups() {
  const [users, setUsers] = React.useState<string[]>(["users.read"])
  const [billing, setBilling] = React.useState<string[]>([])

  return (
    <div className="text-sm">
      <CheckboxGroup
        aria-label="Permissions"
        value={[...users, ...billing]}
        onValueChange={(next) => {
          setUsers(next.filter((value) => value.startsWith("users.")))
          setBilling(next.filter((value) => value.startsWith("billing.")))
        }}
        allValues={[...userPermissions, ...billingPermissions]}
      >
        <label className="flex items-center gap-3">
          <Checkbox parent />
          All permissions
        </label>
        <div className="flex flex-col gap-3 ps-7">
          <CheckboxGroup
            aria-label="Users"
            value={users}
            onValueChange={setUsers}
            allValues={userPermissions}
          >
            <label className="flex items-center gap-3">
              <Checkbox parent />
              Users
            </label>
            <div className="flex flex-col gap-3 ps-7">
              {userPermissions.map((permission) => (
                <label key={permission} className="flex items-center gap-3">
                  <Checkbox value={permission} />
                  {permission}
                </label>
              ))}
            </div>
          </CheckboxGroup>
          <CheckboxGroup
            aria-label="Billing"
            value={billing}
            onValueChange={setBilling}
            allValues={billingPermissions}
          >
            <label className="flex items-center gap-3">
              <Checkbox parent />
              Billing
            </label>
            <div className="flex flex-col gap-3 ps-7">
              {billingPermissions.map((permission) => (
                <label key={permission} className="flex items-center gap-3">
                  <Checkbox value={permission} />
                  {permission}
                </label>
              ))}
            </div>
          </CheckboxGroup>
        </div>
      </CheckboxGroup>
    </div>
  )
}
```

## Props in this example

### Checkbox

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `value` | `string` | – | Identifies the box inside a group and is what the form submits. Falls back to name, then “on”. |
| `parent` | `boolean` | `false` | Controls every value in the group’s allValues. Only inside a CheckboxGroup. |

### CheckboxGroup

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `value` | `string[]` | – | Values of the ticked checkboxes. |
| `onValueChange` | `(value: string[], details) => void` | – |  |
| `allValues` | `string[]` | – | Every value in the group. Required for a parent checkbox. |

## More Checkbox examples

- [States](https://hextaui.com/docs/checkbox/examples/states.md)
- [Select all](https://hextaui.com/docs/checkbox/examples/select-all.md)
- [Controlled](https://hextaui.com/docs/checkbox/examples/controlled.md)
- [Form](https://hextaui.com/docs/checkbox/examples/form.md)
- [Sibling label](https://hextaui.com/docs/checkbox/examples/sibling-label.md)
- [Cards](https://hextaui.com/docs/checkbox/examples/cards.md)
- [Long content](https://hextaui.com/docs/checkbox/examples/long-content.md)
- [Right to left](https://hextaui.com/docs/checkbox/examples/rtl.md)