forms contract
Checkbox
Independent boolean toggle. Often grouped under a single Label/Legend.
Variants
- default
- Square 16pt with check glyph
- indeterminate
- Mixed state for parent of partially-selected children
Sizes
- sm
- 14pt box
- md
- 16pt box (default)
- lg
- 20pt box — touch / spacious forms
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.