Checkbox

Square boolean for selecting one or more independent options — multi-select lists, "agree to terms", or a parent/child tree via checked="indeterminate". Reach for RadioGroup when choices are mutually exclusive, and Switch for a single on/off setting that applies immediately. Supports disabled; set tone="destructive" only to flag a required box in a form-error state. Size md (16px) is the form default; lg (20px) suits hero or low-density choices.

Basic

<label className="flex items-center gap-2">
  <Checkbox id="terms" />
  <Label htmlFor="terms">Accept terms and conditions</Label>
</label>

States

<>
  <Checkbox />
  <Checkbox defaultChecked />
  <Checkbox checked="indeterminate" />
  <Checkbox disabled />
  <Checkbox disabled defaultChecked />
</>

Destructive tone

<label className="flex items-center gap-2">
  <Checkbox tone="destructive" id="delete" />
  <Label htmlFor="delete">Delete my account</Label>
</label>

Sizes

<>
  <Checkbox size="md" defaultChecked />
  <Checkbox size="lg" defaultChecked />
</>

Group

<div className="flex flex-col gap-3">
  <Label>Sidebar</Label>
  {["Recents", "Home", "Applications", "Desktop"].map((item) => (
    <label key={item} className="flex items-center gap-2">
      <Checkbox id={item} />
      <Label htmlFor={item} weight="normal" className="cursor-pointer">{item}</Label>
    </label>
  ))}
</div>

Props

PropTypeDefault
checkedboolean | "indeterminate"—
onCheckedChange(v: boolean | "indeterminate") => void—
defaultCheckedbooleanfalse
disabledbooleanfalse
tone"default" | "destructive""default"
size"md" | "lg""md"
…restRadix Checkbox.Root props—

Source

packages/react/src/components/checkbox.tsx · Figma node 2819:21780