forms contract

Checkbox

Independent boolean toggle. Often grouped under a single Label/Legend.

Variants

  • default
  • indeterminate

Sizes

  • sm
  • md
  • lg

Example

<label className="flex items-center gap-2"><Checkbox name="tos" /> I agree to the Terms of Service</label>

Usage rule

Always paired with a clickable label (entire label area selects the checkbox).

The full Checkbox contract has 4 more rules, plus the do-not patterns. Get the full recipe.

Get the Checkbox contract in your project.