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
  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" onclick="">
  <input type="checkbox">
  <strong>
    Wireless
  </strong>

  <span class="well">
    <span>Off</span>
    <span>On</span>
    <a class="btn btn-primary"></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 well">
    <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>

    <a class="btn btn-primary"></a>
  </div>
</fieldset>

Multiple options

Add up to 6 options. No extra work needed.

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

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

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

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

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

    <a class="btn btn-primary"></a>
  </div>
</fieldset>

Different looks

The switches are very flexible, so you can mix and match a number of classes provided by Bootstrap, along with it's grid, to make them look exactly like you need them.

View
View
View

Get Bootstrap.