Toggle Tokens

Toggle Tokens are a styled version of Checkboxes and Radios.

On this page:

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

Which will you choose?

<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" value="" name="exclusiveChoice01" id="toggleTokenField11" value="option1">
    <label class="form-check-label" for="toggleTokenField11">
      <span class="fas fa-circle" aria-hidden="true"></span>
      <span class="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" value="" name="exclusiveChoice01" id="toggleTokenField12" value="option2">
    <label class="form-check-label" for="toggleTokenField12">
      <span class="fas fa-circle" aria-hidden="true"></span>
      <span class="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" value="" name="exclusiveChoice01" id="toggleTokenField13" value="option3" disabled>
    <label class="form-check-label" for="toggleTokenField13">
      <span class="fas fa-circle" aria-hidden="true"></span>
      <span class="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

Which will you choose?

<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" value="" id="toggleTokenField01">
    <label class="form-check-label" for="toggleTokenField01">
      <span class="fas fa-square" aria-hidden="true"></span>
      <span class="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" value="" id="toggleTokenField02">
    <label class="form-check-label" for="toggleTokenField02">
      <span class="fas fa-square" aria-hidden="true"></span>
      <span class="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" value="" id="toggleTokenField03" checked disabled>
    <label class="form-check-label" for="toggleTokenField03">
      <span class="fas fa-square" aria-hidden="true"></span>
      <span class="fas fa-check-square" aria-hidden="true"></span>
      Multi Choice 3
    </label>
  </div>
</div>

Resources

Previous page