Radio
Always a group. Never a single radio.
Spec
<fieldset>+<legend>, orrole="radiogroup"with an accessible name.- Visible label on every option.
- Error on the group, not a single option.
- Native 20px in a 44px hit.
- Keyboard: arrows move, Space selects (native).
- Never a single radio. Two options minimum. For on/off immediate, use Switch.
Live demo
Runnable controls. Not a screenshot. Paper / Ink in the header recolors tokens.
Always a group. Arrows + space.
Error on the group
Do / Don't
| Do | Don't |
|---|---|
| Fieldset + legend. | One radio as a checkbox. |
| Error on the group. | A red ring on only the last option. |
Motion
Native. Don't restyle away the platform focus.
| Property | Duration | Easing | Trigger | Reduced motion |
|---|---|---|---|---|
transform: scale(0.97) | 120ms --dur-fast | --ease-out | :active | instant |
| color / border | 120ms --dur-fast | --ease-out | :hover | instant |
| outline | 80ms --dur-micro | --ease-out | :focus-visible | instant |
Accessibility
- Name of the group is the legend. Name of the option is its label.
aria-invalidon the group when in error,aria-describedbythe message.- Hit ≥44px including the label.
- These notes describe construction. They are not a guarantee of WCAG conformance. Validate with axe, keyboard, and operators. See Accessibility.