Components
RadioGroup
Radios on the checkbox scale with an on-accent dot, plus a selectable card radio.
Create project › Visibility
data-size xs: 16px indicators, 13/19 labels, rows 8px apart; the indicator aligns to the first text line. Arrow keys move and select; Tab enters at the checked item.
Sizes
The group's size scopes the indicator: 16 / 18 / 20 / 24 with a (size − 10px) dot.
xs
sm
default
lg
RadioGroupCard
The whole card is the radio (it takes the focus ring): radius 12, padding 12, border 10% → 20% on hover; selected = accent border on the radio-card tint.
Light and dark
light
dark