Selection Controls

Checkboxes, radio buttons, and switches for toggling states. Maps 1:1 to Figma node 3001:4216 — Go Flow Design System.

Checkbox

24 × 24 hit area · 20 × 20 visual box · radius 5 · border 1.25px outline

State
Enabled
Unselected
Enabled
Selected
Disabled
Unselected
Disabled
Selected
Checkbox

Radio

24 × 24 hit area · 22 × 22 visual circle · radius circular · border 1.5px on-surface-variant

State
Enabled
Unselected
Enabled
Selected
Disabled
Unselected
Disabled
Selected
Radio

Switch

52 × 32 pill track · thumb 16px (off) → 24px (on) · border 2px outline when off

State
Enabled
Off
Enabled
On
Disabled
Off
Disabled
On
Switch

Usage examples

Click to toggle. All variants are interactive.

Checkboxes

Radio

Switches