Skip Navigation

Toggles and Switches

Toggles allow users to select between a small number of mutually exclusive options.

Available in React

Text Toggle


Examples

Examples

Condensed Toggle

This variation may be used when a condensed version is preferred. It is especially suitable to toggles appearing within filters and alongside charts and other data visualizations.


Icon Toggle

A icon toggle may be used when the meaning of the icon is clear to the user. It is often preferable in mobile contexts, to conserve space.


Switches

A switch offers a clear on or off state and is typically used for immediate actions rather than being submitted as part of a form. It’s important to clearly indicate the option controlled by the switch, and its current state, through either a text label or an icon.




Developer Notes

Use of the toggle switch requires a JavaScript helper. It can be instantiated using new Spark.ToggleSwitch(el). It provides mechanisms for getting and setting the value.

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.

The following options may be passed when using new Spark.ToggleSwitch(el, {});:

Name Type Default Description
onChange function null A callback function run when the input value changes. Callback arguments are newValue, instance.

For all available methods and full API, refer to the component code on Bitbucket.

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-mar-t-1">
  <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-mar-t-1">
  <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>

<style type="text/css">
  
</style>

Condensed Toggle

To display a condensed Toggle, apply both the spark-toggle and spark-toggle--xs classes.

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

<div class="row spark-toggle-group spark-mar-t-1">
  <label class="col-xs-4 col-sm-2 spark-toggle spark-toggle--xs">
    <input class="spark-toggle__input" type="radio" name="condensed-toggle-2-b" checked="checked">
    <span class="spark-label">Flip</span>
  </label>
  <label class="col-xs-4 col-sm-2 spark-toggle spark-toggle--xs">
    <input class="spark-toggle__input" type="radio" name="condensed-toggle-2-b">
    <span class="spark-label">Flop</span>
  </label>
  <label class="col-xs-4 col-sm-2 spark-toggle spark-toggle--xs">
    <input class="spark-toggle__input" type="radio" name="condensed-toggle-2-b">
    <span class="spark-label">Flow</span>
  </label>
</div>

<div class="row spark-toggle-group spark-mar-t-1">
  <label class="col-xs-4 col-sm-2 spark-toggle spark-toggle--xs">
    <input class="spark-toggle__input" type="radio" name="condensed-toggle-disabled-b" disabled>
    <span class="spark-label">Flip</span>
  </label>
  <label class="col-xs-4 col-sm-2 spark-toggle spark-toggle--xs">
    <input class="spark-toggle__input" type="radio" name="condensed-toggle-disabled-b" disabled>
    <span class="spark-label">Flop</span>
  </label>
</div>

<style type="text/css">
  
</style>

Icon Toggle

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


<style type="text/css">
  
</style>

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>

<br>

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



<style type="text/css">
  
</style>
// Vanilla JS
var el = document.querySelector('.spark-toggle-switch');
var toggleSwitchInstance = new Spark.ToggleSwitch(el);

Accessibility Notes

Switches

When using a Switch, ensure that you provide a label that indicates the purpose of the Switch to users. The label can be provided as a text element right above the Switch component. An example is shown below with the label styling.

Switch Label

<style>
.label1 {
  color: #555;
  font-size: 1.33333rem;
  font-weight: 400;
  line-height: 1rem;
  padding: .6rem 0 1rem;
}
</style>

<p id="labelID" class="spark-label spark-mar-0 label1">Switch Label</p>

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

On small screens such as mobile devices or in containers that are approximately the width of a small mobile device, it might be beneficial to place the label and the Switch side-by-side, with the Switch aligned to the right of the container/screen. This will however depend on the length of your label and how you plan to account for any wrapping text. The example below illustrates one possible way of accomplishing this. Note that the max-width of the container that holds the label and Switch is set to 320px.

Switch Label 
<style>
.label2 {
  color: #555;
  display: inline-block;
  font-size: 1.33333rem;
  font-weight: 400;
  line-height: 2rem;
  padding-top: 0.33333rem;
}
</style>
<div class="row" style="max-width: 320px;">
  <div class="col-xs-7">
    <span id="labelID" class="spark-label spark-mar-0 label2">Switch Label</span>
  </div>

  <div class="col-xs-5">
    <label class="spark-toggle-switch spark-pull-right" aria-labelledby="labelID">
      <input class="spark-toggle__input" type="checkbox">
      <span class="spark-toggle-switch__handle"></span>
      <span class="spark-toggle-switch__track"></span>
    </label>
  </div>
</div>