Dimensions
States
A radio button allows two states: unselected and selected. In addition to these states, the radio button also has states for focus and disabled.
One of the radio buttons in a set is always preselected. It’s possible to select only one radio button at a time. Once the user chooses a new item, the previous choice is automatically deselected.
Typography
Radio button group titles and labels should be sentence case. Only the first word in a phrase and any proper or exception nouns are capitalized.
|
|
Font-size (px) |
Font-weight |
|---|---|---|
|
Title |
11 |
Regular |
|
Label |
13 |
Regular |
Interactions
The selection is realized by clicking the radio button input or clicking the radio button label; this makes it easier for the user to make the selection.
Target zone
All interactive targets should take up at least 24×24 CSS pixels of space to ensure that they are big enough and that there’s sufficient space between them. This makes it less likely that a user will accidentally activate the wrong control. White space around the target can also be included.
References
- Target Size – Minimum (Level AA) –– https://wcag.com/developers/2-5-8-target-size-minimum-level-aa/