CSS Toggle Switch

Accessible CSS toggle switch using standard form controls

Light switch

Use the official switch, provided by Foundation, for 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 official switch, provided by Foundation, for for simple “On/Off” options. The official Switch component was initially based on css-toggle-switch.

<div class="switch">
  <input class="switch-input" id="switch" type="checkbox" name="switch">
  <label class="switch-paddle" for="switch">
    <span class="show-for-sr">View</span>
  </label>
</div>

Toggle switch

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

View
<label>View</label>
<div class="switch-toggle callout large-5">
  <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="button"></a>
</div>

Multiple options

Add up to 6 options. No extra work needed.

View
<fieldset>
  <legend>View</legend>
  <div class="switch-toggle callout">
    <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="button"></a>
  </div>
</fieldset>

Different looks

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

View
View
View
View
View

Get Foundation.