Radio Buttons
Purpose
Radio buttons allow customers to make a single selection within a list of two or more options.
Usage
Customers should be able to tap on or click on either the text label or the radio button to select or deselect an option. Radio buttons that are listed vertically are easier to read than those that are listed horizontally.
Specs - Radio Buttons
Outer Circle = 22x22px
Stroke = 1px inside, Gray 03 (default, disabled, selected disabled), Bright Blue (hover, selected), Status - Warning (error)
Inner Circle = 14x14px (centered)
Fill = Gray 01 (disabled), Gray 03 (selected disabled), Bright Blue (selected), Status - Warning (error)
Label = Body 3, Gray 06 (default, hover, selected, error), Gray 04 (disabled, selected disabled)
Class Name = .radio
Example - Radio Button States
<fieldset>
<div class="radio">
<input id="default" type="radio" aria-invalid="false" name="example-radios" />
<label for="default">Default</label>
</div>
<div class="radio">
<input id="selected" type="radio" aria-invalid="false" name="example-radios" checked />
<label for="selected">Selected</label>
</div>
<div class="radio">
<input id="disabled" type="radio" aria-invalid="false" name="example-radios" disabled="true" />
<label for="disabled">Disabled</label>
</div>
<div class="radio">
<input id="selected-disabled" type="radio" aria-invalid="false" name="example-radios-tmp" disabled="true" checked />
<label for="selected-disabled">Selected Disabled</label>
</div>
</fieldset>Best Practices
Default Selection
A group of radio buttons should have one option selected by default. Only one radio button can be selected at the time.
Do this.
One option must be selected by default.
Don't do this.
Never display radio button groups without a default selection chosen
Overflow Content
Radio button labels should have fewer than four words. If you do go over the recommended four word maximum, do not truncate radio button labels with an ellipsis. Instead, reword the label or wrap it to the second line.
Do this.
Wrap long labels beneath the radio button so the control and label are top aligned.
Don't do this.
Don't vertically center the wrapped text with the radio button control.
Radio button vs checkbox
Radio button groups allow customers to select only one item. If you require that your customers have the option to select multiple items, use checkboxes instead.
Do this.
Checkboxes should be used when more than one item can be selected.
Don't do this.
If multiple items can be selected, don't use radio buttons
Keyboard Interactions
| KEY | INTERACTION |
|---|---|
| Tab | Moves focus to the radio group |
| Arrow | Moves focus to the next option in the radio group |