Propel

Checkbox

Lets a user toggle a single option on or off.

Basic

Show code
import { Checkbox } from "@makeplane/propel/components/checkbox";
import * as React from "react";

export default function BasicDemo() {
  const [checked, setChecked] = React.useState(true);

  return (
    <Checkbox label="Send me product updates" checked={checked} onCheckedChange={setChecked} />
  );
}

States

The resting, checked, mixed (indeterminate), and disabled boxes.

Show code
import { Checkbox } from "@makeplane/propel/components/checkbox";

export default function StatesDemo() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Checkbox label="Watch project" />
      <Checkbox label="Email notifications" defaultChecked />
      <Checkbox label="Select all members" indeterminate />
      <Checkbox label="Archived project" disabled />
      <Checkbox label="Workspace owner" disabled defaultChecked />
    </div>
  );
}

With icon

Pass an icon to render a glyph between the box and the label.

Show code
import { Checkbox } from "@makeplane/propel/components/checkbox";
import { Icon } from "@makeplane/propel/components/icon";
import { Repeat } from "lucide-react";

export default function WithIconDemo() {
  return (
    <Checkbox
      icon={<Icon icon={Repeat} tint="secondary" magnitude="sm" />}
      label="Sync automatically"
      defaultChecked
    />
  );
}

Invalid

The danger look is a state, not a prop: inside an invalid Field the unchecked box recolors its border red, while a checked box keeps the accent fill.

Show code
import { Checkbox } from "@makeplane/propel/components/checkbox";
import { Field } from "@makeplane/propel/components/field";

export default function InvalidDemo() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Checkbox label="Notify me" />
      <Field invalid>
        <Checkbox label="Accept workspace terms" />
      </Field>
      <Field invalid>
        <Checkbox label="Accept workspace terms" defaultChecked />
      </Field>
    </div>
  );
}

Installation

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

Props

Checkbox

PropTypeRequiredDescription
labelstringNoOptional text shown beside the box; the whole row becomes the clickable label. Omit it for a bare checkbox (just the box) — in that case give the box an accessible name with `aria-label` or `aria-labelledby`.
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).
iconReactNodeNoElement shown between the box and the label (inline-start), e.g. `<Icon icon={User} tint="secondary" magnitude="sm" />`. Only rendered when `label` is present. Prefer the shared `Icon` (a direct `aria-hidden` span) so the label's disabled tint override can recolor it.