Switches

Switches are toggle element that switch between an Off and On state on tap or click. They make use of checkbox inputs (or radio buttons) and require no javascript.

Basic

You can create a switch using minimal markup.

<div class="switch">
  <input id="exampleCheckboxSwitch" type="checkbox">
  <label for="exampleCheckboxSwitch"></label>
</div> 

<!-- Using radio buttons – each switch turns off the other two -->
<div class="switch small">
  <input id="exampleRadioSwitch1" type="radio" checked name="testGroup">
  <label for="exampleRadioSwitch1"></label>
</div> 

<div class="switch radius">
  <input id="exampleRadioSwitch2" type="radio" name="testGroup">
  <label for="exampleRadioSwitch2"></label>
</div> 

<div class="switch round large">
  <input id="exampleRadioSwitch3" type="radio" name="testGroup">
  <label for="exampleRadioSwitch3"></label>
</div>

The class options:

• radius: Add this to the the switch container to get a 3px radius paddle and edges
• round: Add this to the the switch container to get a round paddle and edges
• tiny: Set the height and text of the switch to tiny
• small: Set the height and text of the switch to small
• large: Set the height and text of the switch to large

Accessibility

To have switches work with ARIA, you will need to change the div to fieldset and add a tabindex of 0. Here is how to use aria-checked when using Switches to make it accessible to screen readers:

Because our switches are non-standard form elements, assistive devices need help figuring out what they are. To make switches more accessible, use the <fieldset> tag as a container, with the attribute tabindex="0", so keyboards can tab to it.

<fieldset class="switch" tabindex="0">
  <input id="exampleCheckboxSwitch4" type="checkbox">
  <label for="exampleCheckboxSwitch4"></label>
</fieldset>

Customize with Sass

Switches can be easily customized using our Sass variables.

SCSS

$include-html-form-classes: $include-html-classes;

// Controlling background color for the switch container
$switch-bg: $gainsboro;

// We use these to control the switch heights for our default classes
$switch-height-tny: 1.5rem;
$switch-height-sml: 1.75rem;
$switch-height-med: 2rem;
$switch-height-lrg: 2.5rem;
$switch-bottom-margin: 1.5rem;

// We use these to style the switch-paddle
$switch-paddle-bg: $white;
$switch-paddle-transition-speed: .15s;
$switch-paddle-transition-ease: ease-out;
$switch-active-color: $primary-color !default;

The markup is very simple; you need a class on the container for the switch, and then an input and a label. You can use checkboxes or radio buttons — for radiu buttons remember that they can only be turned off by another radio button (one must be on).

<div class="switch">
  <input id="switchName" type="checkbox">
  <label for="switchName"></label>
</div>

Quick Mixin

You can build your switches using our global mixin by including it on your custom class or ID in your own stylesheet. The mixin contains options for changing the key styles, the rest of the defaults can be modified using the available variables. The global mixin looks like this:

/* Using the default styles */
.your-class-name { @include switch; }

There are seven options you can customize on the fly when writing this mixin. These control things like radius, transition speed, and size.

/* Using the available options */
.your-class-name {
  @include switch($transition-speed, $transition-ease, $height, $paddle-bg, $active-color, $radius, $base-style);
}

/* This sets the speed at which the switch toggles */
$transition-speed: $switch-paddle-transition-speed;

/* This sets the ease of the switch transition */
$transition-ease: $switch-paddle-transition-ease;

/* This controls the overall height of the switch */
$height: $switch-height-med;

/* This controls the background of the paddle */
$paddle-bg: $switch-paddle-bg;

/* Set the background color for the switch when it's on */
$active-color: $switch-active-color;

/* Set this to true for default radius or any number for complete control */
$radius: false;

/* If you set this to false, base styles are left out */
$base-style: true;

Semantic Markup With Sass

You can create your own switches using our Sass mixins. You have access to a few internal mixins that can create parts of the switch as needed. The base mixin will create a switch base that only includes structural styles.

.your-class-name { @include switch-base($transition-speed, $transition-ease); }

Size Mixin

The size mixin will let you control the size of the switch.

.your-class-name {
  @include switch-base($transition-speed, $transition-ease);
  @include switch-size($height);
}

Style Mixin

The last internal mixin you have access to for switches is the style mixin. This will help you style paddle color, active color and radius.

.your-class-name {
  @include switch-base($transition-speed, $transition-ease);
  @include switch-size($height);
  @include switch-style($paddle-bg, $active-color, $radius, $base-style);
}

Sass Errors?

If the default "foundation" import was commented out, then make sure you import this file:

SCSS

@import "foundation/components/switches";