CSS Toggle Switch

You can use the switches standalone, with Bootstrap or with Foundation.

Light switch

Use the light switch, instead of a checkbox, for simple “On/Off” options.

<label class="switch-light switch-candy" onclick="">
  <input type="checkbox">

  <strong>
    Wireless
  </strong>

  <span>
    <span>Off</span>
    <span>On</span>
    <a></a>
  </span>
</label>

Toggle switch

Use the toggle switches, instead of radio buttons, for two or more specific options.

<fieldset>
  <legend>View</legend>
  <div class="switch-toggle switch-candy">
    <input id="week" name="view" type="radio" checked>
    <label for="week" onclick="">Week</label>

    <input id="month" name="view" type="radio">
    <label for="month" onclick="">Month</label>

    <input id="day" name="view" type="radio">
    <label for="day" onclick="">Day</label>

    <a></a>
  </div>
</fieldset>

Multiple options

Add up to 6 options. No extra work needed.

<div class="switch-toggle switch-candy">
  <input id="hour3" name="view3" type="radio" checked>
  <label for="hour3" onclick="">Hour</label>

  <input id="day3" name="view3" type="radio">
  <label for="day3" onclick="">Day</label>

  <input id="week3" name="view3" type="radio">
  <label for="week3" onclick="">Week</label>

  <input id="month3" name="view3" type="radio">
  <label for="month3" onclick="">Month</label>

  <input id="year3" name="view3" type="radio">
  <label for="year3" onclick="">Year</label>

  <input id="decade3" name="view3" type="radio">
  <label for="decade3" onclick="">Decade</label>

  <a></a>
</div>

Themes

There are a bunch of themes included with the switches.

Candy

It includes three color schemes: the default green, .switch-candy-blue and .switch-candy-yellow.

Material

Holo

iOS

Browser support

The toggle switches work on all modern browsers, including mobile ones (even proxy-browsers like Opera Mini).

Browsers without support for media-queries, such as IE8 and below, get standard form elements.

Tips

• The onclick="" attribute is required for older iOS and Opera Mini support.

• If your light switch option labels are "On/Off", you can prevent screen readers from reading them by using aria-hidden="true".

  <span aria-hidden="true">
    <span>Off</span>
    <span>On</span>
    <a></a>
  </span>
  

Acknowledgements

• Themes are based on Sort Switches/Toggles by Orman Clark, iOS, Material Design and Android Holo.
• iOS label tap issue and fix reported by Ben Dwyer.
• Refactoring to export the CSS with multiple unit types (px, em, rem) by Henjo Hoeksma.
• List of contributors on Github