Introduction

A control that allows the user to toggle between checked, unchecked, and indeterminate states.

Usage

import { Checkbox } from "../components/ui";

export default function MyPage() {
  return (
    <Checkbox
      defaultChecked={true}
      onCheckedChange={(details) => console.log(details.checked)}
      interactive
    >
      Accept Terms and Conditions
    </Checkbox>
  );
}

Indeterminate state

import { Checkbox } from "../components/ui";

export default function MyPage() {
  return (
    <Checkbox checked="indeterminate" interactive>
      Parent Checkbox
    </Checkbox>
  );
}

CMS Page Builder

This component is available as a checkbox block in the Page Builder (content/pages/*.json):

{
  "type": "checkbox",
  "label": "Accept Terms and Conditions",
  "checked": true,
  "colorPalette": "blue"
}

Props

| checked | `boolean \ | "indeterminate"` | Whether the checkbox is checked (controlled). | | defaultChecked | `boolean \ | "indeterminate"` | The initial checked state (uncontrolled). |

| disabled | boolean | Whether the checkbox is disabled. |

| onCheckedChange | `(details: { checked: boolean \ | "indeterminate" }) => void` | Callback triggered when the checked state changes. |

| size | `"sm" \ | "md" \ | "lg"` | The size of the checkbox. |

| interactive | boolean | Forces hydration as an island. |