Radios left of labels
radios-left-of-labels
Radios sit left of their labels.
Description
Each radio control belongs to the left of its label so the association stays clear and matches familiar reading order. Reversing label and control, or stacking so the control is not left of the label, breaks that expectation. Keep the radio left and the label immediately to its right. Fail if the label is left and the control right, or if stacking puts the control somewhere other than left of the label. Apply when laying out radio options with visible labels.
When to use
Laying out radio options with visible labels.
Not when
Not for checkbox-only groups, or icon buttons without radio semantics.
Agent hint
Place each radio to the left of its label; do not reverse or mis-stack them.
Each radio control is to the left of its label.
Label left / control right (or stacked so the control is not left of the label).
Citations
GOV.UK Design System — Radios
https://design-system.service.gov.uk/components/radios/