Radio Button
Radio buttons are input elements that allow users to select a single option from a set of mutually exclusive choices.
Table of contents:
Behaviour
Radio buttons are used when there is a list of two or more options that are mutually exclusive and the user must select exactly one choice. In other words, clicking a non-selected radio button will deselect whatever other button was previously selected in the list.
Configuration
Try to lay out your lists vertically. When radio buttons lay our horizontally, users can face problems scanning the option— it hard to tell with which label corresponds to which option: the one before the button or the one after. Vertical positioning of radio buttons is safer.
If you still need a horizontal layout with multiple options per line, make sure to space the buttons and labels so that it’s absolutely clear which choice goes with which label.
