Propel

Checkbox Group

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

Basic

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

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.

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.

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

Installation

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

Props

CheckboxGroup

PropTypeRequiredDescription
renderReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, CheckboxGroupState>NoAllows 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.
density"comfortable" | "compact"Yes