Components
Checkbox
cds checkbox: 12–24px boxes on the control scale, accent fill, a Minus for indeterminate and an optional wipe-in glyph.
Sizes
Box / radius / glyph: xxs 12/3/12 · xs 16/4/16 · sm 18/5/16 · default 20/5/16 · lg 24/6/20 (compact default 16/4).
xxs
xs
sm
default
lg
States
Border 20% → 40% on hover; checked and indeterminate fill-accent (hover lighter); focus shadow; disabled .4 without hover change; aria-invalid paints a danger border.
unchecked
checked
indeterminate
disabled
disabled checked
invalid
animated (200 / 120ms wipe)
With labels
A horizontal Field aligns the box to the first text line; the label toggles it. Select-all uses the indeterminate state.
Send a summary when the task runs.
- Release notes draft
- Pricing research
- Onboarding emails
Light and dark
light
dark