Checkbox Group

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

EmailPush notificationsSMS

Show code

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>
  );
}

Installation

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

Usage

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.

Select allHTTPHTTPSSSH

Show code

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.

Show code

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.

DailyWeekly

Show code

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.