Radio button lists can be used to select one choice from a small list of options. When space is limited, or when there are more than seven options in the list, consider using a Select Field with single-select menu (no radio buttons).
Radio buttons cannot be used stand-alone to enable (turn on) or disable (turn off) a single option.
Using browser default styles for radio buttons is often times the best choice. You can still customize the size, font size and margin spaces; but the coloring and behavior will be consistent with the specific browser’s styles.
If you or your team decides to use custom colors, choose colors from the standard palette.
1. Always provide a label, positioned to the right of the check box 2. Use positive and activating labels, avoiding negations 3. Be clear about will what happen if a check box is selected, and what will happen if it is not selected 4. Allow clicking on the checkbox and its label
For better readability, use vertical radio button lists rather than those listed horizontally.
In appropriate circumstances, radio buttons can be used in a nested list where only one parent and/or only one child can be selected.
Horizontal radio button lists can be used when vertical space is limited.
Can’t find what you’re looking for?
Feel free to share any comments or concerns, and request any other elements you might need.