Propel

Checkbox Group Field

A labeled fieldset of checkbox options with description and helper or error text.

Notifications

Choose every update channel you want.

Workspace alerts.

At least one channel is recommended.

Show code
import {
  CheckboxGroupField,
  CheckboxGroupFieldOption,
} from "@makeplane/propel/components/checkbox-group-field";

export default function BasicDemo() {
  return (
    <CheckboxGroupField
      name="notifications"
      label="Notifications"
      description="Choose every update channel you want."
      density="comfortable"
      size="lg"
      defaultValue={["email"]}
      hint="At least one channel is recommended."
    >
      <CheckboxGroupFieldOption value="email" label="Email" />
      <CheckboxGroupFieldOption value="slack" label="Slack" description="Workspace alerts." />
    </CheckboxGroupField>
  );
}

Installation

import {
  CheckboxGroupField,
  CheckboxGroupFieldOption,
} from "@makeplane/propel/components/checkbox-group-field";

Usage

import {
  CheckboxGroupField,
  CheckboxGroupFieldOption,
} from "@makeplane/propel/components/checkbox-group-field";

export default function BasicDemo() {
  return (
    <CheckboxGroupField
      name="notifications"
      label="Notifications"
      description="Choose every update channel you want."
      density="comfortable"
      size="lg"
      defaultValue={["email"]}
      hint="At least one channel is recommended."
    >
      <CheckboxGroupFieldOption value="email" label="Email" />
      <CheckboxGroupFieldOption value="slack" label="Slack" description="Workspace alerts." />
    </CheckboxGroupField>
  );
}

Examples

Sizes

The legend, description, and option text scale together across lg, xl, and 2xl.

lg

Choose every update channel you want.

Workspace alerts.

xl

Choose every update channel you want.

Workspace alerts.

2xl

Choose every update channel you want.

Workspace alerts.

Show code
import {
  CheckboxGroupField,
  CheckboxGroupFieldOption,
} from "@makeplane/propel/components/checkbox-group-field";

export default function SizesDemo() {
  return (
    <div className="flex flex-wrap items-start gap-10">
      {(["lg", "xl", "2xl"] as const).map((size) => (
        <CheckboxGroupField
          key={size}
          name={`notifications-${size}`}
          label={size}
          description="Choose every update channel you want."
          density="comfortable"
          size={size}
          defaultValue={["email"]}
        >
          <CheckboxGroupFieldOption value="email" label="Email" />
          <CheckboxGroupFieldOption value="slack" label="Slack" description="Workspace alerts." />
        </CheckboxGroupField>
      ))}
    </div>
  );
}

Densities

density controls the spacing between option rows: comfortable keeps a gap, compact stacks them flush.

comfortable

Choose every update channel you want.

Workspace alerts.

compact

Choose every update channel you want.

Workspace alerts.

Show code
import {
  CheckboxGroupField,
  CheckboxGroupFieldOption,
} from "@makeplane/propel/components/checkbox-group-field";

export default function DensitiesDemo() {
  return (
    <div className="flex flex-wrap items-start gap-10">
      <CheckboxGroupField
        name="notifications-comfortable"
        label="comfortable"
        description="Choose every update channel you want."
        density="comfortable"
        size="lg"
        defaultValue={["email"]}
      >
        <CheckboxGroupFieldOption value="email" label="Email" />
        <CheckboxGroupFieldOption value="slack" label="Slack" description="Workspace alerts." />
      </CheckboxGroupField>
      <CheckboxGroupField
        name="notifications-compact"
        label="compact"
        description="Choose every update channel you want."
        density="compact"
        size="lg"
        defaultValue={["email"]}
      >
        <CheckboxGroupFieldOption value="email" label="Email" />
        <CheckboxGroupFieldOption value="slack" label="Slack" description="Workspace alerts." />
      </CheckboxGroupField>
    </div>
  );
}

Invalid

Setting error marks the whole group invalid and recolors every unchecked option’s border to danger.

Notifications

Choose every update channel you want.

Workspace alerts.

Choose at least one channel.
Show code
import {
  CheckboxGroupField,
  CheckboxGroupFieldOption,
} from "@makeplane/propel/components/checkbox-group-field";

export default function InvalidDemo() {
  return (
    <CheckboxGroupField
      name="notifications"
      label="Notifications"
      description="Choose every update channel you want."
      density="comfortable"
      size="lg"
      error="Choose at least one channel."
    >
      <CheckboxGroupFieldOption value="email" label="Email" />
      <CheckboxGroupFieldOption value="slack" label="Slack" description="Workspace alerts." />
    </CheckboxGroupField>
  );
}

API Reference

CheckboxGroupField

Ready-to-use checkbox group field with legend, description, and helper/error text.

PropTypeDefaultDescription
children(required)ReactNode—Checkbox option rows, usually `CheckboxGroupFieldOption`.
density(required)"comfortable" | "compact"—Spacing between checkbox options.
label(required)string—Visible fieldset legend.
size(required)"lg" | "xl" | "2xl"—Legend and helper text size.
name(required)string—Submitted field name.
renderReactElement<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.
descriptionReactNode—Supporting text shown below the legend.
errorReactNode—Error text shown below the group.
hintReactNode—Helper text shown below the group. Replaced by `error` when an error is set.

CheckboxGroupFieldOption

A checkbox option row for use inside `CheckboxGroupField` or a custom `CheckboxGroup`.

PropTypeDefaultDescription
label(required)string—Visible option label.
stretch"auto" | "full""auto"Width of the clickable label row when `label` is present. Ready-made concern — the elements `CheckboxLabel` requires `stretch` explicitly.
descriptionReactNode—Optional supporting text announced as the checkbox description.
size"lg" | "xl" | "2xl"—Label and description size. Inherited from `CheckboxGroupField` when omitted.