Radio button lets users select one value from a list of mutually exclusive choices.
The radio button can have a help text below the label to provide some extra information about the particular option. The help text will always be aligned to the label. Clicking over the help text will not change the state of radio.
Radio comes in two sizes: Regular and Tiny.
|Size (radio control)||12x12 px (Small)|
12x12 px (Regular)
|Spacing between radio control and label||8 px|
Radio group consists of a list of multiple options, with a label on the top. The label should clearly state the grouping category or the action to perform.
*Note: Multiple radio buttons should have a minimum of 8px spacing in between.*
The radio buttons in a group can be aligned either vertically or horizontally. However, it is advisable to stack the radio buttons vertically with one option in a line for easier reading and scanning. If you need to use them horizontally, make sure to space the options appropriately so that it is clear which control goes with which label.
If the label or the help text with the radio component overflows, wrap it to the next line but make sure that the control and the label are top aligned.
Checkboxes allow users to select multiple options whereas radio buttons allow only one selection from a list of mutually exclusive options.
Radio buttons are recommended to use when there are fewer than 5 options as it is easier for users to scan and select the appropriate option and save an additional click.
However, if the number of options exceeds 5 or if the space is limited then it is recommended to use dropdowns to better utilize the space.Radio vs Dropdown