Toggles and Switches

Toggles can take one of three forms: text-based toggles, icon-based toggles or switches.

Text Toggle Example


When to Use

  • Use a text toggle when an icon does not provide an adequate understanding of each option. For example, a text toggle should be used for switching between light and dark interfaces.

Variations

Variations

Icon Toggle Example


When to Use

  • Use icon toggles to conserve space, under the condition that the two ideas are clearly presented to the user. An example of this would be “Locked” (icon of padlock) and “Unlocked” (icon of open padlock). Icon imagery within toggles should not change the subject matter.

Switches

A switch provides a definitive on or off state. The option that the switch controls, as well as the state it’s in, should be made clear either with a text label or icon.



When to Use

  • Use switches sparingly within desktop applications. They are a common mechanism within mobile design for turning settings on or off.

Developer Notes

Order Matters: For all toggles, the <input> element must be the first item inside of the toggle container. Otherwise the disabled state will not work properly.

Text Toggle

<div class="row spark-toggle-group">
  <label class="col-xs-4 col-sm-2 spark-toggle">
    <input class="spark-toggle__input" type="radio" name="test-toggle-c" checked="checked">
    <span class="spark-label">Flip</span>
  </label>
  <label class="col-xs-4 col-sm-2 spark-toggle">
    <input class="spark-toggle__input" type="radio" name="test-toggle-c">
    <span class="spark-label">Flop</span>
  </label>
</div>

<div class="row spark-toggle-group spark-margin-top">
  <label class="col-xs-4 col-sm-2 spark-toggle">
    <input class="spark-toggle__input" type="radio" name="test-toggle-2-c" checked="checked">
    <span class="spark-label">Flip</span>
  </label>
  <label class="col-xs-4 col-sm-2 spark-toggle">
    <input class="spark-toggle__input" type="radio" name="test-toggle-2-c">
    <span class="spark-label">Flop</span>
  </label>
  <label class="col-xs-4 col-sm-2 spark-toggle">
    <input class="spark-toggle__input" type="radio" name="test-toggle-2-c">
    <span class="spark-label">Flow</span>
  </label>
</div>

<div class="row spark-toggle-group spark-margin-top">
  <label class="col-xs-4 col-sm-2 spark-toggle">
    <input class="spark-toggle__input" type="radio" name="test-toggle-c-dis" disabled>
    <span class="spark-label">Flip</span>
  </label>
  <label class="col-xs-4 col-sm-2 spark-toggle">
    <input class="spark-toggle__input" type="radio" name="test-toggle-c-dis" disabled>
    <span class="spark-label">Flop</span>
  </label>
</div>

Icon Toggle

<div class="row spark-toggle-group">
  <label class="spark-toggle">
    <input class="spark-toggle__input" type="radio" name="test-toggle-icon-b" checked="checked" title="Lock">
    <span class="spark-label"><i class="spark-icon-lock-close"></i></span>
  </label>
  <label class="spark-toggle">
    <input class="spark-toggle__input" type="radio" name="test-toggle-icon-b" title="Unlock">
    <span class="spark-label"><i class="spark-icon-lock-open"></i></span>
  </label>
</div>

Switches


<label class="spark-toggle-switch">
  <input class="spark-toggle__input" type="checkbox">
  <span class="spark-toggle-switch__handle"></span>
  <span class="spark-toggle-switch__track"></span>
</label>

<br>

<label class="spark-toggle-switch">
  <input class="spark-toggle__input" type="checkbox" disabled>
  <span class="spark-toggle-switch__handle"></span>
  <span class="spark-toggle-switch__track"></span>
</label>
// Vanilla JS
var el = document.querySelector('.spark-toggle-switch');
var toggleSwitchInstance = new Spark.ToggleSwitch(el);

// jQuery
$('.spark-toggle-switch').sparkToggleSwitch();