Foundation Laravel Package

title: Switch description: Create pure CSS3 On/Off switches with animated transitions. Now you can tell your users to flip the switch or switch off. video: 'AEL2Mj0DT3o' sass: scss/components/_switch.scss

Basics

Add the .switch class to an element to create a switch. Inside the switch, add an <input type="checkbox"> with the class .switch-input. Next to that, create a <label> with the class .switch-paddle.

Give the <input> a unique ID and point the <label> to it with the for attribute. This makes the switch clickable.

<div class="switch">
  <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>

Disabled

There may be times when you want to fix a switch into a position. This can be accomplished by setting the disabled option on the switch input.

<div class="switch">
  <input class="switch-input" disabled checked="checked" id="exampleCheckedDisabledSwitch" type="checkbox" name="exampleCheckedDisabledSwitch">
  <label class="switch-paddle" for="exampleCheckedDisabledSwitch">
    <span class="show-for-sr">Can't Touch This Checked</span>
  </label>
</div>

<div class="switch">
  <input class="switch-input" disabled id="exampleUncheckedDisabledSwitch" type="checkbox" name="exampleUncheckedDisabledSwitch">
  <label class="switch-paddle" for="exampleUncheckedDisabledSwitch">
    <span class="show-for-sr">Can't Touch This Unchecked</span>
  </label>
</div>

Radio Switch

You can also use <input type="radio"> instead of checkbox to create a series of options.

<div class="switch">
  <input class="switch-input" id="exampleRadioSwitch1" type="radio" checked name="testGroup">
  <label class="switch-paddle" for="exampleRadioSwitch1">
    <span class="show-for-sr">Bulbasaur</span>
  </label>
</div>

Sizing Classes

Use the classes .tiny, .small, or .large to change the switch size.

<div class="switch tiny">
  <input class="switch-input" id="tinySwitch" type="checkbox" name="exampleSwitch">
  <label class="switch-paddle" for="tinySwitch">
    <span class="show-for-sr">Tiny Sandwiches Enabled</span>
  </label>
</div>

<div class="switch small">
  <input class="switch-input" id="smallSwitch" type="checkbox" name="exampleSwitch">
  <label class="switch-paddle" for="smallSwitch">
    <span class="show-for-sr">Small Portions Only</span>
  </label>
</div>

<div class="switch large">
  <input class="switch-input" id="largeSwitch" type="checkbox" name="exampleSwitch">
  <label class="switch-paddle" for="largeSwitch">
    <span class="show-for-sr">Show Large Elephants</span>
  </label>
</div>

Inner Labels

You can place active and inactive text inside of a switch. The active text (.switch-active) only displays when the switch is on, and the inactive text (.switch-inactive) only displays when the switch is off.

Active/inactive text goes inside of the switch's <label>.

Watch this part in video

<p>Do you like me?</p>
<div class="switch large">
  <input class="switch-input" id="yes-no" type="checkbox" name="exampleSwitch">
  <label class="switch-paddle" for="yes-no">
    <span class="show-for-sr">Do you like me?</span>
    <span class="switch-active" aria-hidden="true">Yes</span>
    <span class="switch-inactive" aria-hidden="true">No</span>
  </label>
</div>