--- title: Toggle Switches layout: doc/layouts/default.html --- # 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

{{> examples_switch_basic_rendered}}

Rendered HTML

{{> examples_switch_basic}}
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

{{> examples_switch_variables}} The markup is pretty simple, you'll only need a single class or ID on the container to apply the mixin. {{#markdown}} ```html
``` {{/markdown}} ##### 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: {{#markdown}} ```scss /* Using the default styles */ .your-class-name { @include switch; } ``` {{/markdown}}
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. {{> examples_switch_mixin_options}} *** ## 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. {{#markdown}} ```scss .your-class-name { @include switch-base($transition-speed, $transition-ease); } ``` {{/markdown}}
##### Size Mixin The size mixin will let you control the size of the switch, font-size and line-height. {{#markdown}} ```scss .your-class-name { @include switch-base($transition-speed, $transition-ease); @include switch-size($height, $font-size, $line-height); } ``` {{/markdown}}
##### 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. {{#markdown}} ```scss .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); } ``` {{/markdown}}
**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

{{#markdown}} ```scss @import "foundation/components/switch"; ``` {{/markdown}}