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

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";
Stay on top of what’s happening in responsive design.

Sign up to receive monthly Responsive Reading highlights. Read Last Month's Edition »