Radio Tiles

Best Practices

• Please read Label Guidance first.
• Put them into columns for sizing.
• If multiple items can be selected, use Checkboxes.
• If the user needs to activate or deactivate something, use a Switch instead.
• Ensure the id of the input matches the for of the Label.
• If you need more than four, use a normal Radios instead.
• Omit the tile description span with tile-description if you don’t need it.

Usage

<div class="form-check radio-tile">
  <input class="form-check-input" id="check-historical-truth-4" type="radio" name="historical-figures" value="sojourner-truth" />
  <label class="form-check-label" for="check-historical-truth-4">Sojourner Truth</label>
</div>
<div class="form-check radio-tile">
  <input class="form-check-input" id="check-historical-booker-4" type="radio" name="historical-figures" value="sojourner-truth" />
  <label class="form-check-label" for="check-historical-booker-4">
    Booker T. Washington
    <span class="tile-description">
      This is optional text that can be used to describe the Label in more detail.      
    </span>
  </label>
</div>