Propel

Checkbox Group Field

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

Basic

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"
      magnitude="md"
      defaultValue={["email"]}
      hint="At least one channel is recommended."
    >
      <CheckboxGroupFieldOption value="email" label="Email" />
      <CheckboxGroupFieldOption value="slack" label="Slack" description="Workspace alerts." />
    </CheckboxGroupField>
  );
}

Magnitudes

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

md

Choose every update channel you want.

Workspace alerts.

lg

Choose every update channel you want.

Workspace alerts.

xl

Choose every update channel you want.

Workspace alerts.

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

export default function MagnitudesDemo() {
  return (
    <div className="flex flex-wrap items-start gap-10">
      <CheckboxGroupField
        name="notifications-md"
        label="md"
        description="Choose every update channel you want."
        density="comfortable"
        magnitude="md"
        defaultValue={["email"]}
      >
        <CheckboxGroupFieldOption value="email" label="Email" />
        <CheckboxGroupFieldOption value="slack" label="Slack" description="Workspace alerts." />
      </CheckboxGroupField>
      <CheckboxGroupField
        name="notifications-lg"
        label="lg"
        description="Choose every update channel you want."
        density="comfortable"
        magnitude="lg"
        defaultValue={["email"]}
      >
        <CheckboxGroupFieldOption value="email" label="Email" />
        <CheckboxGroupFieldOption value="slack" label="Slack" description="Workspace alerts." />
      </CheckboxGroupField>
      <CheckboxGroupField
        name="notifications-xl"
        label="xl"
        description="Choose every update channel you want."
        density="comfortable"
        magnitude="xl"
        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"
        magnitude="md"
        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"
        magnitude="md"
        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"
      magnitude="md"
      error="Choose at least one channel."
    >
      <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";

Props

CheckboxGroupField

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.
childrenReactNodeYesCheckbox option rows, usually `CheckboxGroupFieldOption`.
density"comfortable" | "compact"YesSpacing between checkbox options.
descriptionReactNodeNoSupporting text shown below the legend.
errorReactNodeNoError text shown below the group.
hintReactNodeNoHelper text shown below the group. Replaced by `error` when an error is set.
labelstringYesVisible fieldset legend.
magnitude"md" | "lg" | "xl"YesLegend and helper text size.
namestringYesSubmitted field name.

CheckboxGroupFieldOption

PropTypeRequiredDescription
sizing"hug" | "fill"NoWidth of the clickable label row when `label` is present. Defaults to `"hug"` (ready-made concern — the elements `CheckboxLabel` requires `sizing` explicitly).
labelstringYesVisible option label.
descriptionReactNodeNoOptional supporting text announced as the checkbox description.
magnitude"md" | "lg" | "xl"NoLabel and description size. Inherited from `CheckboxGroupField` when omitted.