Radios

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

On this page:

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

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

Resources

Previous page
Next page