Toggle

Toggle with visible label

Code:

<!--
  Copyright IBM Corp. 2016, 2018

  This source code is licensed under the Apache-2.0 license found in the
  LICENSE file in the root directory of this source tree.
-->

<div class="bx--form-item">
  <input class="bx--toggle-input" id="toggle0" type="checkbox">
  <label class="bx--toggle-input__label" for="toggle0" aria-label="example toggle with state indicator text">
    <span class="bx--toggle__switch">
      <span class="bx--toggle__text--off" aria-hidden="true">Off</span>
      <span class="bx--toggle__text--on" aria-hidden="true">On</span>
    </span>
  </label>
</div>

<div class="bx--form-item">
  <input class="bx--toggle-input" id="toggle1" type="checkbox">
  <label class="bx--toggle-input__label" for="toggle1">
    Toggle with visible label
    <span class="bx--toggle__switch">
      <span class="bx--toggle__text--off" aria-hidden="true">Off</span>
      <span class="bx--toggle__text--on" aria-hidden="true">On</span>
    </span>
  </label>
</div>

<div class="bx--form-item">
  <input class="bx--toggle-input" id="toggle3" type="checkbox" disabled>
  <label class="bx--toggle-input__label" for="toggle3"
    aria-label="example disabled toggle with state indicator text">
    <span class="bx--toggle__switch">
      <span class="bx--toggle__text--off" aria-hidden="true">Off</span>
      <span class="bx--toggle__text--on" aria-hidden="true">On</span>
    </span>
  </label>
</div>

<div class="bx--form-item">
  <input class="bx--toggle-input" id="toggle4" type="checkbox" disabled>
  <label class="bx--toggle-input__label" for="toggle4">
    Toggle with visible label
    <span class="bx--toggle__switch">
      <span class="bx--toggle__text--off" aria-hidden="true">Off</span>
      <span class="bx--toggle__text--on" aria-hidden="true">On</span>
    </span>
  </label>
</div>

Small toggle

Toggle with visible label

Code:

<!--
  Copyright IBM Corp. 2016, 2018

  This source code is licensed under the Apache-2.0 license found in the
  LICENSE file in the root directory of this source tree.
-->

<div class="bx--form-item">
  <input class="bx--toggle-input bx--toggle-input--small" id="smalltoggle1" type="checkbox">
  <label class="bx--toggle-input__label" for="smalltoggle1"
    aria-label="example toggle with state indicator text">
    <span class="bx--toggle__switch">
      <svg class="bx--toggle__check" width="6px" height="5px" viewBox="0 0 6 5">
        <path d="M2.2 2.7L5 0 6 1 2.2 5 0 2.7 1 1.5z" />
      </svg>
      <span class="bx--toggle__text--off" aria-hidden="true">Off</span>
      <span class="bx--toggle__text--on" aria-hidden="true">On</span>
    </span>
  </label>
</div>

<div class="bx--form-item">
  <input class="bx--toggle-input bx--toggle-input--small" id="smalltoggle2" type="checkbox">
  <label class="bx--toggle-input__label" for="smalltoggle2">
    Toggle with visible label
    <span class="bx--toggle__switch">
      <svg class="bx--toggle__check" width="6px" height="5px" viewBox="0 0 6 5">
        <path d="M2.2 2.7L5 0 6 1 2.2 5 0 2.7 1 1.5z" />
      </svg>
      <span class="bx--toggle__text--off" aria-hidden="true">Off</span>
      <span class="bx--toggle__text--on" aria-hidden="true">On</span>
    </span>
  </label>
</div>

<div class="bx--form-item">
  <input class="bx--toggle-input bx--toggle-input--small" id="smalltoggle4" type="checkbox" disabled>
  <label class="bx--toggle-input__label" for="smalltoggle4"
    aria-label="example disabled toggle with state indicator text">
    <span class="bx--toggle__switch">
      <svg class="bx--toggle__check" width="6px" height="5px" viewBox="0 0 6 5">
        <path d="M2.2 2.7L5 0 6 1 2.2 5 0 2.7 1 1.5z" />
      </svg>
      <span class="bx--toggle__text--off" aria-hidden="true">Off</span>
      <span class="bx--toggle__text--on" aria-hidden="true">On</span>
    </span>
  </label>
</div>

<div class="bx--form-item">
  <input class="bx--toggle-input bx--toggle-input--small" id="smalltoggle5" type="checkbox" disabled>
  <label class="bx--toggle-input__label" for="smalltoggle5">
    Toggle with visible label
    <span class="bx--toggle__switch">
      <svg class="bx--toggle__check" width="6px" height="5px" viewBox="0 0 6 5">
        <path d="M2.2 2.7L5 0 6 1 2.2 5 0 2.7 1 1.5z" />
      </svg>
      <span class="bx--toggle__text--off" aria-hidden="true">Off</span>
      <span class="bx--toggle__text--on" aria-hidden="true">On</span>
    </span>
  </label>
</div>

Documentation

SCSS

Modifiers

Use these modifiers with .bx--toggle class.

Selector	Description
`.bx--toggle-input--small`	Selector for applying small toggle styles

FAQ

Best practice

.bx--toggle-input__label must always have a value for the aria-label attribute. This makes it visible to screen readers.

The .bx--toggle__text--off and .bx--toggle__text--on elements are completely optional. If they are present, they can be hidden from screen readers with aria-hidden="true" since the checked state of the checkbox will indicate this information already.

Edit this page on GitHub

Components: Tile

Toggle: Usage