Toggle Tokens

Best Practices

• Please read Label Guidance first.
• Toggle Tokens have larger interaction areas than Checkboxes and Radios and are easier to easier to press because they require less accuracy.
• When space is limited, use the unstyled Checkboxes and Radios instead.

Usage

Toggle Tokens for Exclusive Choices

• Radios can be presented as Toggle Tokens
• Use Radio button logic

<div class="form-group">
  <p class="label">Which will you choose?</p>
  <div class="form-check toggle-token">
    <input class="form-check-input" type="radio" name="exclusiveChoice01" id="toggleTokenField11" value="Exclusive Choice 1">
    <label class="form-check-label" for="toggleTokenField11">
      <span class="icon fas fa-circle" aria-hidden="true"></span>
      <span class="icon fas fa-dot-circle" aria-hidden="true"></span>
      Exclusive Choice 1
    </label>
  </div>
  <div class="form-check toggle-token">
    <input class="form-check-input" type="radio" name="exclusiveChoice01" id="toggleTokenField12" value="Exclusive Choice 2">
    <label class="form-check-label" for="toggleTokenField12">
      <span class="icon fas fa-circle" aria-hidden="true"></span>
      <span class="icon fas fa-dot-circle" aria-hidden="true"></span>
      Exclusive Choice 2
    </label>
  </div>
  <div class="form-check toggle-token">
    <input class="form-check-input" type="radio" name="exclusiveChoice01" id="toggleTokenField13" value="Exclusive Choice 3" disabled>
    <label class="form-check-label" for="toggleTokenField13">
      <span class="icon fas fa-circle" aria-hidden="true"></span>
      <span class="icon fas fa-dot-circle" aria-hidden="true"></span>
      Exclusive Choice 3
    </label>
  </div>
</div>

Toggle Tokens for Multiple Choices

• Checkboxes can be presented as Toggle Tokens
• Use Checkbox logic

<div class="form-group">
  <p class="label">Which will you choose?</p>
  <div class="form-check toggle-token">
    <input class="form-check-input" type="checkbox" id="toggleTokenField01">
    <label class="form-check-label" for="toggleTokenField01">
      <span class="icon fas fa-square" aria-hidden="true"></span>
      <span class="icon fas fa-check-square" aria-hidden="true"></span>
      Multi Choice 1
    </label>
  </div>
  <div class="form-check toggle-token">
    <input class="form-check-input" type="checkbox" id="toggleTokenField02">
    <label class="form-check-label" for="toggleTokenField02">
      <span class="icon fas fa-square" aria-hidden="true"></span>
      <span class="icon fas fa-check-square" aria-hidden="true"></span>
      Multi Choice 2
    </label>
  </div>
  <div class="form-check toggle-token">
    <input class="form-check-input" type="checkbox" id="toggleTokenField03" checked disabled>
    <label class="form-check-label" for="toggleTokenField03">
      <span class="icon fas fa-square" aria-hidden="true"></span>
      <span class="icon fas fa-check-square" aria-hidden="true"></span>
      Multi Choice 3
    </label>
  </div>
</div>

Resources

• Design.gov - Checkbox (Best Practices)
• Section 508 Guidelines
• WCAG 2.2
• Bootstrap Documentation - Forms