Checkbox

A Radix checkbox with an optional label and description, whose check morphs into a dash for the indeterminate state.

When to use

• Independent on/off choices inside a form that is saved later.
• "Select all" rows, using checked="indeterminate" for partial selections.
• For settings that apply immediately use Switch; for one choice out of several use RadioGroup.

Usage

import { Checkbox } from "@/components/iris/checkbox/checkbox";
function Notify() {
  const [on, setOn] = React.useState(true);
  return h(Checkbox, {
    label: "Email me when a backup fails",
    description: "Sent to the owners of the organization.",
    checked: on,
    onCheckedChange: setOn,
  });
}

Props

Prop	Type	Default	Description
label	string	–	Visible label. Without it the box is named "Checkbox" unless you pass aria-label.
description	string	–	Secondary copy, linked through aria-describedby.
checked / defaultChecked	boolean | "indeterminate"	– / false	Controlled or initial state.
onCheckedChange	(checked: boolean | "indeterminate") => void	–	Called on toggle.
disabled	boolean	–	Disables the control.
...props	Radix Checkbox.Root props	–	name, value, required, id, className, ref…

Notes

• Space toggles; the hit area is a full --control-height-md square around the 18px box.
• The fill scales in on a snappy spring and the mark draws itself; reduced motion makes both instant.
• Reads --control-on, --control-glyph, --line-strong, --surface, --radius-control.