Forms
Radio Button
Radio Buttons help indicate a preference or a selection from amongst a set of selections but they are always used where only one option is allowed to be selected.
There are two main sizes of the Radio button to be used across breakpoints. The larger one usable on Large - Medium screen sizes, while the smaller one for medium to small screen sizes. The minimum padding specs are as follows:
Annotation
Radio States
Below is the visualization for all states for the radio button of the size 20px X 20px responsively converts to 16px X 16px, when selected/not selected.
Default state
Hover state
Focus state
Down state
Disabled state
Disable & Checked
Spacing & Usage
List View
The users can be presented with options in groups as shown below.
Annotation
Visual display
For large-medium size break points
Group name
Group name
Group name
Sub Group title 1
Sub Group title 2
For small size break points
Group name
Group name
Group name
Sub Group title 1
Sub Group title 2
Code Usage
Group name
Code Usage
Group name
Code Usage
Group name
Sub Group title 1
Sub Group title 2
In Picklists or Dropdown menus
The users can be presented with options in a picklist or dropdown menu where the radio button would precede the option description. The visualization is shown below: