CSS Toggle Switch

Accessible CSS toggle switch using standard form controls

Light switch

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

Toggle switch

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

View
Storage
Debug
npm install --save css-toggle-switch
bower install --save 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.

View
<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.

View
<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.

View
View

Material

View

Holo

View

iOS

View

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

Acknowledgements