# Checkbox

Lets a user toggle a single option on or off.

## Installation

```tsx
import { Checkbox } from "@makeplane/propel/components/checkbox";
```
## Usage

```tsx
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.

```tsx
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.

```tsx
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.

```tsx
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.

```tsx
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. |