Radio buttons are used when there is a list of two or more options and the user must select exactly one option.
Clicking an un-selected radio button will deselect whatever other button was previously selected in the list.
Radio buttons have a single title text or a supporting line of text underneath the title.
- Make sure the minimum touch point (56pt) is observed
- Clearly differentiate selected and unselected radios
- Let customers click or tap on the entire area, rather than just the button
- Use radio buttons if there are many options to choose from. Use a dropdown instead.
- Lay out radio button groups horizontally. This makes it difficult for the user to separate each item in the list.
|Min height||Padding(x)||Padding(y)||Gutters||Radio size|
|Font size||Line height|