Checkbox

Lets a user toggle a single option on or off.

Send me product updates

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

Installation

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

Usage

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

Examples

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.

Sync automatically

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" size="sm" />}
      label="Sync automatically"
      defaultChecked
    />
  );
}

Stretch

stretch sets the label row’s width: auto (the default) shrinks to the content, full spans the container — useful when the whole row is the hit target.

Auto — row shrinks to its contentFull — row spans the container

Show code

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

export default function StretchDemo() {
  return (
    <div className="flex w-96 flex-col gap-2">
      <Checkbox label="Auto — row shrinks to its content" stretch="auto" />
      <Checkbox label="Full — row spans the container" stretch="full" defaultChecked />
    </div>
  );
}

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.

Notify me

Accept workspace terms

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

API Reference

Checkbox

The ready-made checkbox: grafts Base UI checkbox behavior onto the styled `Checkbox` box with its check and indeterminate indicators, and optionally wraps the row in a clickable `CheckboxLabel` with an icon slot.

Prop	Type	Default	Description
label	string	—	Optional 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`.
stretch	"auto" \| "full"	auto	Width of the clickable label row when `label` is present. Ready-made concern — the elements `CheckboxLabel` requires `stretch` explicitly.
icon	ReactNode	—	Element shown between the box and the label (inline-start), e.g. `<Icon icon={User} tint="secondary" size="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.

CheckboxLabel

The clickable row chip that wraps a `Checkbox` box with an optional leading icon and the label text, matching the Figma "Checkbox with label" component. Associate it with the box via `htmlFor` so clicking anywhere in the row toggles the box. The row reads its disabled look off the wrapped `Checkbox` (which carries `data-disabled`) via `:has()`, so it takes no `disabled` prop. Pass the icon as a direct-child `aria-hidden` span (e.g. the shared `Icon`) so the disabled tint override applies.

Prop	Type	Default	Description
stretch(required)	"auto" \| "full"	—
render	ReactElement<unknown, string \| JSXElementConstructor<any>> \| ComponentRenderFn<HTMLProps, {}>	—	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.