<%= @page_title %>

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.

---

Build With Predefined HTML Classes

There are two ways to build switches in Foundation 4: with our predefined HTML classes or with our mixins. Building switches using our predefined classes is simple, you'll just need a div.switch wrapped around a specific input/label markup. From there, you can update the styles as you need to. The switches width is 100% of the container you put it in or you can use our grid classes, .small-# or .large-#, directly on the switch.

<%= code_example ' ', :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

To use these styles, make sure you have the default Foundation CSS package or that you've selected switches from a custom package. These should be linked up following our default HTML page structure.

---

Build with our Mixins

We've included SCSS mixins used to style switches. To use the mixin, you'll need to have the extension installed or grab _variables.scss, _global.scss and _switch.scss from Github and throw them into a Foundation folder in your project directory. From there, you can import the files at the top of your own SCSS stylesheet, like so:

<%= code_example ' @import "foundation/variables", "foundation/components/global", "foundation/components/switch"; ', :css %>

The markup is pretty simple, you'll only need a single class or ID on the container to apply the mixin.

<%= code_example ' ', :html %>

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:

<%= code_example ' /* Using the default styles */ .your-class-name { @include switch; }', :css %>

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.

<%= code_example ' /* 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 ', :css %>

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.

<%= code_example ' .your-class-name { @include switch-base($transition-speed, $transition-ease); } ', :css %>

Size Mixin

The size mixin will let you control the size of the switch, font-size and line-height.

<%= code_example ' .your-class-name { @include switch-base($transition-speed, $transition-ease); @include switch-size($height, $font-size, $line-height); } ', :css %>

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.

<%= code_example ' .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); } ', :css %>

Default SCSS Variables

<%= code_example ' $include-html-form-classes: $include-html-classes; /* Controlling border styles and background colors for the switch container */ $switch-border-color: darken(#fff, 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: emCalc(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: darken($switch-paddle-bg, 10%); $switch-paddle-border-color: darken($switch-paddle-bg, 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: lighten($success-color, 50%); $switch-negative-color: #f5f5f5; /* Outline Style for tabbing through switches */ $switch-label-outline: 1px dotted #888;', :css %>

Note: emCalc(); is a function we wrote to convert px to em. It is included in _variables.scss.