Overview
Radio buttons use fieldsets for accessibility and categorization purposes. The option group (radio button and label) allows a person to select one option from 2 or more options. The option is meant to be submitted as data and is part of a form. You press a submission button in for the input data to be recorded.
Design
Usage guidelines
Use radio buttons when you can only select one option. Use checkboxes when it is possible to select multiple options.
Choose radio buttons instead of drop down lists because it lowers cognitive load. However do not use radio buttons when there 7 or more options. Use a drop down list instead.
Layout
Unselected:
- Default: 1 pixel solid #666666 border
- Hover: 1 pixel solid #333333 border, #F1F1F1 background
- Focus and active: hover state with 2 pixels outline #FEBA35
- Disabled: 40% transparency
Selected:
- Default: 1 pixel solid #666666 border, #0070C4 background
- Hover: #333333 background
- Focus and active: hover state with 2 pixels outline #FEBA35
- Disabled: 40% transparency
Size and positioning
The size of the radio button icon should be 24 pixels and on the left side of the label. Leave an 8-pixel gap between the icon and label.
Content guidelines
Follow these guidelines to create radio button labels:
- be clear about what the selection represents
- keep the label to one sentence
- use active voice