Select Controls

Radio (Single Select)

Pick exactly one option per group. Share a name to link them; the selected item shows a filled dot inside the circle.

Checkbox (Multi-Select)

Select any number of options at once. When checked, the circle fills with the primary color and a white checkmark appears.

Rules

• All radio and checkbox indicators are circular — square checkboxes are never used (design.md §4).
• Radio = filled dot; checkbox = white checkmark. Selection color: --c-primary.
• The native <input> is hidden via opacity:0; the .box element renders the custom indicator — keyboard accessibility and focus ring are preserved.
• Dark mode: the radio dot flips to sky; checkbox keeps the primary fill (white ✓ contrast).