Foundation
Jump to Nav

# Switch

Now you can tell your users to flip the switch or switch off.

## Basics

Add the `.switch` class to an element to create a switch. Inside the switch, add an `<input type="checkbox">` with the class `.switch-input`. Next to that, create a `<label>` with the class `.switch-paddle`.

Give the `<input>` a unique ID and point the `<label>` to it with the `for` attribute. This makes the switch clickable.

Inside the switch label is screen reader-only text, which uses the `.show-for-sr` class to visually mask the text.

Make sure the HTML of the switch goes in the order you see above—`<input>`, then `<label>`

    <div class="switch">
      <input class="switch-input" id="exampleSwitch" type="checkbox" name="exampleSwitch">
      <label class="switch-paddle" for="exampleSwitch">
        <span class="show-for-sr">Download Kittens</span>
      </label>
    </div>

Download Kittens

## Radio Switch

You can also use `<input type="radio">` instead of `checkbox` to create a series of options.

    <div class="switch">
      <input class="switch-input" id="exampleRadioSwitch1" type="radio" checked name="testGroup">
      <label class="switch-paddle" for="exampleRadioSwitch1">
        <span class="show-for-sr">Bulbasaur</span>
      </label>
    </div>

Bulbasaur
Charmander
Squirtle

## Sizing Classes

Use the classes `.tiny`, `.small`, or `.large` to change the switch size.

    <div class="switch tiny">
      <input class="switch-input" id="tinySwitch" type="checkbox" name="exampleSwitch">
      <label class="switch-paddle" for="tinySwitch">
        <span class="show-for-sr">Tiny Sandwiches Enabled</span>
      </label>
    </div>

    <div class="switch small">
      <input class="switch-input" id="smallSwitch" type="checkbox" name="exampleSwitch">
      <label class="switch-paddle" for="smallSwitch">
        <span class="show-for-sr">Small Portions Only</span>
      </label>
    </div>

    <div class="switch large">
      <input class="switch-input" id="largeSwitch" type="checkbox" name="exampleSwitch">
      <label class="switch-paddle" for="largeSwitch">
        <span class="show-for-sr">Show Large Elephants</span>
      </label>
    </div>

Tiny Sandwiches Enabled
Small Portions Only
Show Large Elephants

## Inner Labels

You can place active and inactive text inside of a switch. The active text (`.switch-active`) only displays when the switch is on, and the inactive text (`.switch-inactive`) only displays when the switch is off.

Active/inactive text goes inside of the switch's `<label>`.

Depending on the length of the words you place inside the switch, you may need to fine-tune the `left` or `right` CSS properties of the text to get it positioned right.

Add `aria-hidden="true"` to these labels to prevent AT from reading them.

    <p>Do you like me?</p>
    <div class="switch large">
      <input class="switch-input" id="yes-no" type="checkbox" name="exampleSwitch">
      <label class="switch-paddle" for="yes-no">
        <span class="show-for-sr">Do you like me?</span>
        <span class="switch-active" aria-hidden="true">Yes</span>
        <span class="switch-inactive" aria-hidden="true">No</span>
      </label>
    </div>

Do you like me?

Do you like me? Yes No

## Sass Reference

### Variables

The default styles of this component can be customized using these Sass variables in your project's settings file.

Name | Type | Default Value | Description
--- | --- | --- | ---
`$switch-background` | Color | `$medium-gray` | Background color of a switch.
`$switch-background-active` | Color | `$primary-color` | Background active color of a switch.
`$switch-height` | Number | `2rem` | Height of a switch, with no class applied.
`$switch-height-tiny` | Number | `1.5rem` | Height of a switch with .tiny class.
`$switch-height-small` | Number | `1.75rem` | Height of a switch with .small class.
`$switch-height-large` | Number | `2.5rem` | Height of a switch with .large class.
`$switch-radius` | Number | `$global-radius` | Border radius of the switch
`$switch-margin` | Number | `$global-margin` | border around a modal.
`$switch-paddle-background` | Color | `$white` | Background color for the switch container and paddle.
`$switch-paddle-offset` | Number | `0.25rem` | Spacing between a switch paddle and the edge of the body.
`$switch-paddle-radius` | Number | `$global-radius` | border radius of the switch paddle
`$switch-paddle-transition` | Number | `all 0.25s ease-out` | switch transition.

### Mixins

We use these mixins to build the final CSS output of this component. You can use the mixins yourself to build your own class structure out of our components.

#### switch-container

    @include switch-container;

Adds styles for a switch container. Apply this to a container class.

#### switch-input

    @include switch-input;

Adds styles for a switch input. Apply this to an `<input>` within a switch.

#### switch-paddle

    @include switch-paddle;

Adds styles for the background and paddle of a switch. Apply this to a `<label>` within a switch.

#### switch-text

    @include switch-text;

Adds base styles for active/inactive text inside a switch. Apply this to text elements inside the switch `<label>`.

#### switch-text-active

    @include switch-text-active;

Adds styles for the active state text within a switch.

#### switch-text-inactive

    @include switch-text-inactive;

Adds styles for the inactive state text within a switch.

#### switch-size

    @include switch-size($font-size, $switch-height, $paddle-offset);

Changes the size of a switch by modifying the size of the body and paddle. Apply this to a switch container.

Parameter | Type | Default Value | Description
--- | --- | --- | ---
`$font-size` | Number | `1rem` | Font size of label text within the switch.
`$switch-height` | Number | `2rem` | Height of the switch body.
`$paddle-offset` | Number | `0.25rem` | Spacing between the switch paddle and the edge of the switch body.