---
layout: main.html
name: foundation
foundation: true
title: 'with Foundation'
---

<header class="row">
  <div class="large-7 columns">
    <h1>
      <a href="index.html">CSS Toggle Switch</a>
    </h1>
    <p class="description">Accessible CSS toggle switch using standard form controls</p>
  </div>
  <div class="large-5 columns">
    <ul class="menu right top-menu">
      {{> menu}}
    </ul>
  </div>
</header>

<div class="row">
  <div class="large-12 columns">
    <div class="hero-box">

      <div class="row">
        <div class="large-6 columns">

          <h4>Light switch</h4>
          <p>
            Use the

            <a href="http://foundation.zurb.com/sites/docs/switch.html">
            official switch</a>,

            provided by Foundation, for for simple <em>&ldquo;On/Off&rdquo;</em> options.
          </p>

          <div class="row toggle-demo">

            <label class="large-3 columns" for="exampleSwitch">View</label>
            <div class="switch large-4 columns float-left">
              <input class="switch-input" id="exampleSwitch" type="checkbox" name="exampleSwitch">
              <label class="switch-paddle" for="exampleSwitch">
                <span class="show-for-sr">Download Kittens</span>
              </label>
            </div>

          </div>

        </div>
        <div class="large-6 columns">

          <h4>Toggle switch</h4>
          <p>Use the toggle switches, instead of radio buttons, for two or more, specific options. </p>

          <fieldset class="row toggle-demo">
            <legend class="large-3 columns">View</legend>
            <div class="switch-toggle callout large-9 columns">
              <input id="week-d1" name="view-d" type="radio" checked>
              <label for="week-d1" onclick="">Week</label>

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

              <input id="month-d3" name="view-d" type="radio">
              <label for="month-d3" onclick="">Year</label>

              <a class="button"></a>
            </div>
          </fieldset>

        </div>

      </div>

      <div class="dependency-install">
        {{> install}}
      </div>

      <div class="nav-bar hero-actions">
        <ul class="menu">
          <li>
            <a href="https://github.com/ghinda/css-toggle-switch/archive/master.zip" class="button">
              <i class="icon-arrow-down"></i>
              Download
            </a>
          </li>
          <li>
            <a href="https://github.com/ghinda/css-toggle-switch" class="button">
              <i class="icon-github"></i>
              Github
            </a>
          </li>
        </ul>
      </div>

    </div>
  </div>
</div>

<div class="row">
  <div class="large-12 columns">

    <h5 class="frameworks text-center">
      You can use the switches <a href="index.html">standalone</a>, with <a href="bootstrap.html">Bootstrap</a> or with <a href="foundation.html">Foundation</a>.
    </h5>

  </div>
</div>

<div class="row">

  <div class="large-12 columns">

    <h2>Light switch</h2>
    <p>
      Use the

      <a href="http://foundation.zurb.com/sites/docs/switch.html">
        official switch</a>,

      provided by Foundation, for for simple <em>&ldquo;On/Off&rdquo;</em> options. The official <em>Switch</em> component was initially based on <a href="https://github.com/zurb/foundation/pull/1414">css-toggle-switch</a>.
    </p>

    <div class="example large-12 columns">

      <div class="row toggle-demo">
        <label class="large-2 columns" for="exampleCheckboxSwitch2">View</label>
        <div class="switch large-4 columns float-left">
          <input class="switch-input" id="exampleCheckboxSwitch2" type="checkbox" name="exampleCheckboxSwitch2">
          <label class="switch-paddle" for="exampleCheckboxSwitch2">
            <span class="show-for-sr">View</span>
          </label>
        </div>

      </div>

{{#markdown}}
``` html
<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>
```
{{/markdown}}

    </div>

  </div>

</div>

<div class="row">

  <div class="large-12 columns">

    <h2>Toggle switch</h2>

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

    <div class="example">

      <fieldset>
        <legend>View</legend>
        <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>
      </fieldset>

{{#markdown}}
``` html
<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>
```
{{/markdown}}

    </div>

    <h3>Multiple options</h3>
    <p>Add up to 6 options. No extra work needed. </p>

    <div class="example">

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

{{#markdown}}
``` html
<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>
```
{{/markdown}}

    </div>

  </div>

</div>

<div class="row">

  <div class="large-12 columns">

    <h2>Different looks</h2>

    <p>
      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.
    </p>

    <div class="example">

      <fieldset>
        <legend>View</legend>
        <div class="switch-toggle large-4 callout">
          <input id="week41" name="view4" type="radio" checked>
          <label for="week41" onclick="">Week</label>

          <input id="month42" name="view4" type="radio">
          <label for="month42" onclick="">Month</label>

          <a class="button hollow"></a>
        </div>
      </fieldset>

      <fieldset>
        <legend>View</legend>
        <div class="switch-toggle panel callout">
          <input id="week51" name="view5" type="radio" checked>
          <label for="week51" onclick="">Week</label>

          <input id="month52" name="view5" type="radio">
          <label for="month52" onclick="">Month</label>

          <input id="month53" name="view5" type="radio">
          <label for="month53" onclick="">Year</label>

          <a class="button warning"></a>
        </div>
      </fieldset>

      <fieldset>
        <legend>View</legend>
        <div class="switch-toggle callout">
          <input id="week61" name="view6" type="radio" checked>
          <label for="week61" onclick="">Week</label>

          <input id="month62" name="view6" type="radio">
          <label for="month62" onclick="">Month</label>

          <input id="year63" name="view6" type="radio">
          <label for="year63" onclick="">Year</label>

          <input id="decade63" name="view6" type="radio">
          <label for="decade63" onclick="">Decade</label>

          <a class="button success"></a>
        </div>
      </fieldset>

    </div>

    <div class="example">

      <fieldset>
        <legend>View</legend>
        <div class="switch-toggle large-4 callout success">
          <input id="week71" name="view7" type="radio" checked>
          <label for="week71" onclick="">Week</label>

          <input id="month72" name="view7" type="radio">
          <label for="month72" onclick="">Month</label>

          <a class="button success"></a>
        </div>
      </fieldset>

      <fieldset>
        <legend>View</legend>
        <div class="switch-toggle callout warning">
          <input id="week81" name="view8" type="radio" checked>
          <label for="week81" onclick="">Week</label>

          <input id="month82" name="view8" type="radio">
          <label for="month82" onclick="">Month</label>

          <input id="month83" name="view8" type="radio">
          <label for="month83" onclick="">Year</label>

          <a class="button alert"></a>
        </div>
      </fieldset>

    </div>

  </div>

</div>

<div class="row">
  <div class="large-12 columns">
    <h3>
      <a href="http://foundation.zurb.com/" target="_blank">Get Foundation.</a>
    </h3>
  </div>
</div>

<footer>
  <div class="row">
    <div class="large-12 columns">
      {{> credits}}
    </div>
  </div>
</footer>