Switch
Switches can be used instead of regular radio buttons to switch between two options. They are customizable and use styles that won't show on phones that don't support media queries. On these devices, they will appear as regular radio buttons.
Basic
You can create a switch using minimal markup.
HTML
<!-- Default switch -->
<div class="switch">
<input id="x" name="switch-x" type="radio" checked>
<label for="x" onclick="">Off</label>
<input id="x1" name="switch-x" type="radio">
<label for="x1" onclick="">On</label>
<span></span>
</div>
<!-- Using class options -->
<div class="switch large round">
<input id="z" name="switch-z" type="radio" checked>
<label for="z" onclick="">Off</label>
<input id="z1" name="switch-z" type="radio">
<label for="z1" onclick="">On</label>
<span></span>
</div>
Rendered HTML
The class options:
radius
: Add this to the the switch container to get a 3px radius paddle and edgesround
: Add this to the the switch container to get a round paddle and edgestiny
: Set the height and text of the switch to tinysmall
: Set the height and text of the switch to smalllarge
: Set the height and text of the switch to large
Customize With Sass
Switches can be easily customized using our Sass variables.
SCSS
$include-html-form-classes: $include-html-classes;
/* Controlling border styles and background colors for the switch container */
$switch-border-color: scale-color(#fff, $lightness: -20%);
$switch-border-style: solid;
$switch-border-width: 1px;
$switch-bg: #fff;
/* We use these to control the switch heights for our default classes */
$switch-height-tny: 22px;
$switch-height-sml: 28px;
$switch-height-med: 36px;
$switch-height-lrg: 44px;
$switch-bottom-margin: rem-calc(20);
/* We use these to control default font sizes for our classes. */
$switch-font-size-tny: 11px;
$switch-font-size-sml: 12px;
$switch-font-size-med: 14px;
$switch-font-size-lrg: 17px;
$switch-label-side-padding: 6px;
/* We use these to style the switch-paddle */
$switch-paddle-bg: #fff;
$switch-paddle-fade-to-color: scale-color($switch-paddle-bg, $lightness: -10%);
$switch-paddle-border-color: scale-color($switch-paddle-bg, $lightness: -35%);
$switch-paddle-border-width: 1px;
$switch-paddle-border-style: solid;
$switch-paddle-transition-speed: .1s;
$switch-paddle-transition-ease: ease-out;
$switch-positive-color: scale-color($success-color, $lightness: 94%);
$switch-negative-color: #f5f5f5;
/* Outline Style for tabbing through switches */
$switch-label-outline: 1px dotted #888;
The markup is pretty simple, you'll only need a single class or ID on the container to apply the mixin.
<div class="your-class-name">
<input id="z" name="switch-z" type="radio" checked>
<label for="z" onclick="">Off</label>
<input id="z1" name="switch-z" type="radio">
<label for="z1" onclick="">On</label>
<span></span>
</div>
Quick Mixin
You can build your labels 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 ten options you can customize on the fly when writing this mixin. These controls things like: padding, text size, color and radius. Setting any of these options to false will negate those styles.
/* Using the available options */
.your-class-name {
@include switch($transition-speed, $transition-ease, $height, $font-size, $line-height, $paddle-bg, $positive-color, $negative-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;
/* You can set a different font-size for you switch */
$font-size: $switch-font-size-med;
/* You can set a different line-height too */
$line-height: 2.3em;
/* This controls the background of the paddle */
$paddle-bg: $switch-paddle-bg;
/* Set the box-shadow color for the right side of the switch */
$positive-color: $switch-positive-color;
/* Set the box-shadow color for the left side of the switch */
$negative-color: $switch-negative-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.
Basic
Base Mixin
You also have access to a few internal mixins that can create parts of the button as needed. The base mixin will create a switch base that only include 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, font-size and line-height.
.your-class-name {
@include switch-base($transition-speed, $transition-ease);
@include switch-size($height, $font-size, $line-height);
}
Style Mixin
The last internal mixin you have access to for buttons is the style mixin. This will help you style background color, text color, positive/negative color, etc.
.your-class-name {
@include switch-base($transition-speed, $transition-ease);
@include switch-size($height, $font-size, $line-height);
@include switch-style($paddle-bg, $positive-color, $negative-color, $radius, $base-style);
}
Note: rem-calc();
is a function we wrote to convert px
to rem
. It is included in _variables.scss.
Sass Errors?
If the default "foundation" import was commented out, then make sure you import this file:
SCSS
@import "foundation/components/switch";