Components

Checkbox

state (default/error/disabled) × isChecked (yes/no) × isGrouped (yes/no) = 12 variants. Click any to toggle.

View in Figma

Optional helper text

<Checkbox
  label="I agree"
  description="Optional helper text"
/>

Optional helper text

<Checkbox
  grouped
  label="I agree"
  description="Optional helper text"
/>

Optional helper text

<Checkbox
  defaultChecked
  label="I agree"
  description="Optional helper text"
/>

Optional helper text

<Checkbox
  defaultChecked
  grouped
  label="I agree"
  description="Optional helper text"
/>

Optional helper text

<Checkbox
  error
  label="I agree"
  description="Optional helper text"
/>

Optional helper text

<Checkbox
  error
  grouped
  label="I agree"
  description="Optional helper text"
/>

Optional helper text

<Checkbox
  defaultChecked
  error
  label="I agree"
  description="Optional helper text"
/>

Optional helper text

<Checkbox
  defaultChecked
  error
  grouped
  label="I agree"
  description="Optional helper text"
/>

Optional helper text

<Checkbox
  disabled
  label="I agree"
  description="Optional helper text"
/>

Optional helper text

<Checkbox
  disabled
  grouped
  label="I agree"
  description="Optional helper text"
/>

Optional helper text

<Checkbox
  defaultChecked
  disabled
  label="I agree"
  description="Optional helper text"
/>

Optional helper text

<Checkbox
  defaultChecked
  disabled
  grouped
  label="I agree"
  description="Optional helper text"
/>
Props
checked:boolean
Controlled checked state. Omit for uncontrolled (auto-toggles).
defaultChecked:boolean= false
Initial value when uncontrolled.
onChange:(e) => void
Native change handler. Required for controlled use.
error:boolean= false
Renders the red error treatment.
disabled:boolean= false
Disabled state.
grouped:boolean= false
Marks membership in a checkbox group.
label:ReactNode
Primary label text.
description:ReactNode
Optional helper text below the label.
Tokens