Toggle Switches | Design System

Show summaries

Hide summaries

Enable dates

Disable dates

By definition, a toggle switch in UI/UX design implies that the user must choose between two mutually exclusive options (example: a clear on-and-off state). When the user presses the switch, a brief interaction appears with the chosen option, then takes immediate effect.

Always make sure that you use clear labels for your toggle switch. Depending on the use case, you can create either two exclusive states with each its own label or one label for the entire toggle switch. In most cases, this is either show-hide, yes-no, or enable-disable. For example, 'enable summaries' or 'show preview.' Include a verb to make it actionable.

Accessibility note: The value of the aria-checked attribute on the input should be set to "true" when the toggle is checked and "false" when it is not checked. This does not happen automatically and must be done with javascript.

Example Code

    <div class="form-check form-switch">
        <input class="form-check-input" type="checkbox" role="switch" aria-checked="false" id="flexSwitchCheckDefault">
        <label class="form-check-label" for="flexSwitchCheckDefault">Show summaries</label>
    </div>
    <div class="form-check form-switch">
        <input class="form-check-input" type="checkbox" role="switch" aria-checked="true" id="flexSwitchCheckChecked" checked>
        <label class="form-check-label" for="flexSwitchCheckChecked">Hide summaries</label>
    </div>

    <div class="form-check form-switch form-check-reverse">
      <label class="form-check-label" for="flexSwitchCheckDefault1">Enable dates</label>
      <input class="form-check-input" type="checkbox" role="switch" aria-checked="false" id="flexSwitchCheckDefault1"/>
    </div>
    <div class="form-check form-switch form-check-reverse">
      <label class="form-check-label" for="flexSwitchCheckChecked1">Disable dates</label>
      <input class="form-check-input" type="checkbox" role="switch" aria-checked="true" id="flexSwitchCheckChecked1" checked/>
    </div>