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 { RepeatOutline } from "@makeplane/propel/icons";

export default function WithIconDemo() {
  return (
    <Checkbox
      icon={<Icon icon={RepeatOutline} 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.