Docs draft
Checkbox
Component storyFigma component set ↗React component ↗DSDS entity ↗
When to use it
useIndependent yes/no choices, alone or in lists; deferred until a submit.
avoidSettings that take effect immediately.
switchavoidMutually exclusive options.
radioStates
unchecked — Not selected; only the control boundary shows.
checked — Selected; the fill and glyph show the on state.
disabled — Not interactive; rendered with the lifted disabled tokens so it stays perceivable.
checked disabled — Selected and not interactive; the selection stays perceivable.
Design specifications
| box | 20px, radius.none (the old sharp square kept), inside a 44px touch target |
| border-rest | color.border.strong (3:1 contracted) |
| border-disabled | color.border.subtle |
| fill-checked | color.accent.base |
| check-checked | color.accent.on-accent — the old white check was 2.9:1 and died |
| fill-checked-disabled | color.text.disabled |
| check-checked-disabled | color.bg.primary |
| label | type.body via FormField or the children slot |
| glyph | Icon / Check at 16 in Figma; CSS-drawn in code |
Accessibility
Space — Toggles.
Tab — Focus ring: 2px text.primary offset 3.
color.border.strong on color.bg.primary — Contracted at ≥ 3:1 by the build gate.
color.accent.on-accent on color.accent.base — Contracted at ≥ 4.5:1 by the build gate.
Native input styled with appearance:none — never a div. Label wraps the input, so the text is the click target too.