Radio
#
OverviewUse radio buttons to present a list of options where only a single selection must be made.
#
Design Guidelines#
Use when- In forms.
- To enter data.
- A user must select one option.
#
Don't use when- A user can select multiple options.
#
Visual style- Please see examples below to know which type of visual style radio button to use.
#
Behaviour- On page load, a default selection must be chosen.
- One option must always be selected.
- Empty radio buttons are selected on click.
- A previously selected radio button is unselected if the other radio button is selected.
- Never have only a single radio button.
- The radio button and the label can be clicked or touched to make a selection.
#
Editorial- Each label should clearly describe the result of selecting the radio.
- Always write label text in sentence case.
- Avoid long labels.
#
ExamplesDefault Radio
For aquiring a single answer that does not change any further content, use either style of radio button, but priortitize the disc style first.
- Always include a label to the right of the disc.
- Always show a title above the list.
Button Radio
Use this style when a button selection will result in content being changed below it.
- Always include a label inside the button.
- Always show a title above the button group.