Radios

Radios allow users to select exactly one option from multiple options.

Best Practices

Please read Label Guidance first.
When possible, present them in a vertical list.
If space is limited, consider using a Select.
If the user can select one or more options, use Checkboxes.
Ensure the id of the input matches the for of the label.
Set a radio button as the default choice by adding the checked attribute to it.
If a radio button choice is required, add the required attribute on all radio buttons in a group.

Usage

Value 1

Value 2

Value 3

<div class="form-group">
  <div class="custom-control custom-radio form-check">
    <input type="radio" class="custom-control-input form-check-input" id="radioValue1" name="radioChoice" checked>
    <label class="custom-control-label form-check-label" for="radioValue1">Value 1</label>
  </div>
  <div class="custom-control custom-radio form-check">
    <input type="radio" class="custom-control-input form-check-input" id="radioValue2" name="radioChoice">
    <label class="custom-control-label form-check-label" for="radioValue2">Value 2</label>
  </div>
  <div class="custom-control custom-radio form-check">
    <input type="radio" class="custom-control-input form-check-input" id="radioValue3" name="radioChoice" disabled>
    <label class="custom-control-label form-check-label" for="radioValue3">Value 3</label>
  </div>
</div>

Radios

On this page:

Best Practices

Usage

Resources