# Checkbox Group

Coordinates a set of checkboxes as one shared selected-values group.

## Installation

```tsx
import { Checkbox } from "@makeplane/propel/components/checkbox";
import { CheckboxGroup } from "@makeplane/propel/components/checkbox-group";
```
## Usage

```tsx
import { Checkbox } from "@makeplane/propel/components/checkbox";
import { CheckboxGroup } from "@makeplane/propel/components/checkbox-group";
import * as React from "react";

export default function BasicDemo() {
  const [value, setValue] = React.useState<string[]>(["email"]);

  return (
    <CheckboxGroup
      density="comfortable"
      value={value}
      onValueChange={setValue}
      aria-label="Notification channels"
    >
      <Checkbox value="email" label="Email" />
      <Checkbox value="push" label="Push notifications" />
      <Checkbox value="sms" label="SMS" />
    </CheckboxGroup>
  );
}
```
## Examples

### Select all

Give the group an `allValues` list and mark one row `parent`. The parent derives its state from the rows — checked when all are on, indeterminate when only some are — and toggling it selects or clears every row at once.

```tsx
import { Checkbox } from "@makeplane/propel/components/checkbox";
import { CheckboxGroup } from "@makeplane/propel/components/checkbox-group";
import * as React from "react";

const PROTOCOLS = ["http", "https", "ssh"];

export default function SelectAllDemo() {
  return (
    <CheckboxGroup
      density="comfortable"
      defaultValue={["https"]}
      allValues={PROTOCOLS}
      aria-label="Allowed protocols"
    >
      <Checkbox parent label="Select all" />
      <Checkbox value="http" label="HTTP" />
      <Checkbox value="https" label="HTTPS" />
      <Checkbox value="ssh" label="SSH" />
    </CheckboxGroup>
  );
}
```

### Nested

Each category is its own `CheckboxGroup` whose `allValues` are exactly that category's children, so its `parent` rolls up only its own rows and never the sibling category.

```tsx
import { Checkbox } from "@makeplane/propel/components/checkbox";
import { CheckboxGroup } from "@makeplane/propel/components/checkbox-group";
import * as React from "react";

const MANAGE_USERS_PERMISSIONS = ["create-user", "edit-user", "delete-user", "assign-roles"];
const MANAGE_CONTENT_PERMISSIONS = ["create-content", "edit-content", "publish-content"];

export default function NestedDemo() {
  return (
    <div className="flex flex-col gap-4">
      <CheckboxGroup
        density="comfortable"
        aria-label="Manage users"
        allValues={MANAGE_USERS_PERMISSIONS}
        defaultValue={[]}
      >
        <Checkbox parent label="Manage users" />
        <div className="flex flex-col gap-2 ps-6">
          <Checkbox value="create-user" label="Create user" />
          <Checkbox value="edit-user" label="Edit user" />
          <Checkbox value="delete-user" label="Delete user" />
          <Checkbox value="assign-roles" label="Assign roles" />
        </div>
      </CheckboxGroup>
      <CheckboxGroup
        density="comfortable"
        aria-label="Manage content"
        allValues={MANAGE_CONTENT_PERMISSIONS}
        defaultValue={[]}
      >
        <Checkbox parent label="Manage content" />
        <div className="flex flex-col gap-2 ps-6">
          <Checkbox value="create-content" label="Create content" />
          <Checkbox value="edit-content" label="Edit content" />
          <Checkbox value="publish-content" label="Publish content" />
        </div>
      </CheckboxGroup>
    </div>
  );
}
```

### Density

`density` controls the spacing between rows: `comfortable` (default) or `compact`.

```tsx
import { Checkbox } from "@makeplane/propel/components/checkbox";
import { CheckboxGroup } from "@makeplane/propel/components/checkbox-group";
import * as React from "react";

export default function DensityDemo() {
  return (
    <div className="flex flex-wrap items-start gap-10">
      <CheckboxGroup density="comfortable" defaultValue={["daily"]} aria-label="Comfortable">
        <Checkbox value="daily" label="Daily" />
        <Checkbox value="weekly" label="Weekly" />
      </CheckboxGroup>
      <CheckboxGroup density="compact" defaultValue={["daily"]} aria-label="Compact">
        <Checkbox value="daily" label="Daily" />
        <Checkbox value="weekly" label="Weekly" />
      </CheckboxGroup>
    </div>
  );
}
```
## API Reference

### CheckboxGroup

The ready-made checkbox group: grafts Base UI's `CheckboxGroup` behavior (the shared
selected-values state) onto the styled `elements/checkbox-group` container.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `density` (required) | `"comfortable" \| "compact"` | — |  |
| `render` | `ReactElement<unknown, string \| JSXElementConstructor<any>> \| ComponentRenderFn<HTMLProps, CheckboxGroupState>` | — | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |