Switches

Switches are toggle element that switch between an Off and On state on tap or click. They make use of checkbox inputs (or radio buttons) and require no javascript.

To render a switch, you need only a container element with the class .switch that contains both an <input> either of type checkbox or radio and an empty <label>.

EXAMPLE

Show Code

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

You may also display a switch without a label, in which case the wrapper element is optional.

EXAMPLE

Show Code

 
<!-- Switch with no label -->
<div class="switch">
    <input class="switch-input" id="checkbox-switch-labeless" type="checkbox" name="checkbox-switch-labeless">
    <label class="switch-paddle" for="checkbox-switch-labeless">
        <span class="show-for-sr">Download Puppies</span>
    </label>
</div>

Radio Buttons

If you serve multiple switches with [type=radio], toggling an individual switch on will toggle all other corresponding switches off.

EXAMPLE

Show Code

 
<!-- Example radio switch set -->
<form class="row">

    <div class="large-3 columns">
        <label for="radio-switch-1">Large Radio Switch</label>
        <div class="switch large">
            <input class="switch-input" id="radio-switch-1" type="radio" name="oneOfUs" checked="checked">
            <label class="switch-paddle" for="radio-switch-1">
                <span class="show-for-sr">Baby Back Ribs</span>
            </label>
        </div>
    </div>

    <div class="large-3 columns">
        <label for="radio-switch-2">Default Radio Switch</label>
        <div class="switch">
            <input class="switch-input" id="radio-switch-2" type="radio" name="oneOfUs">
            <label class="switch-paddle" for="radio-switch-2">
                <span class="show-for-sr">7 Pepper Brisket</span>
            </label>
        </div>
    </div>

    <div class="large-3 columns">
        <label for="radio-switch-3">Small Radio Switch</label>
        <div class="switch small">
            <input class="switch-input" id="radio-switch-3" type="radio" name="oneOfUs">
            <label class="switch-paddle" for="radio-switch-3">
                <span class="show-for-sr">Grilled Chicken Wings</span>
            </label>
        </div>
    </div>

    <div class="large-3 columns">
        <label for="radio-switch-4">Tiny Radio Switch</label>
        <div class="switch tiny">
            <input class="switch-input" id="radio-switch-4" type="radio" name="oneOfUs">
            <label class="switch-paddle" for="radio-switch-4">
                <span class="show-for-sr">Baked Beans</span>
            </label>
        </div>
    </div>

</form>

Sizing

Switches also come in a variety of sizes. As per convention, these sizes can be accessed with the .large, .small, and .tiny classes.

EXAMPLE

Show Code

 
<div class="row">

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

    <div class="large-3 columns">
        <label for="check-switch-2">Default Switch</label>
        <div class="switch">
            <input class="switch-input" id="check-switch-2" type="checkbox" name="exampleSwitch">
            <label class="switch-paddle" for="check-switch-2">
                <span class="show-for-sr">Show Default: </span>
            </label>
        </div>
    </div>

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

    <div class="large-3 columns">
        <label for="check-switch-4">Tiny Switch</label>
        <div class="switch tiny">
            <input class="switch-input" id="check-switch-4" type="checkbox" name="exampleSwitch">
            <label class="switch-paddle" for="check-switch-4">
                <span class="show-for-sr">Tiny Sandwiches Enabled</span>
            </label>
        </div>
    </div>
</div>

Text Inside

The UITK also provides switches that alow text inside the slider area in a variety of sizes. As per convention, these sizes can be accessed with the .large, .small, and .tiny classes.

Just be sure to add the .switch-text class to the same element you placed the .switch class on. Everything else works the same.

EXAMPLE

Show Code

 
<div class="row">

    <div class="large-3 columns">
        <label for="text-switch-1">Large Text Switch</label>
        <div class="switch switch-text large">
            <input class="switch-input" id="text-switch-1" type="checkbox" name="exampleSwitch">
            <label class="switch-paddle" for="text-switch-1">
                <span class="show-for-sr">Screen reader text only</span>
                <span class="switch-active" aria-hidden="true">Buzzword</span>
                <span class="switch-inactive" aria-hidden="true">Flapjack</span>
            </label>
        </div>
    </div>

    <div class="large-3 columns">
        <label for="text-switch-1">Default Text Switch</label>
        <div class="switch switch-text">
            <input class="switch-input" id="text-switch-2" type="checkbox" name="exampleSwitch">
            <label class="switch-paddle" for="text-switch-2">
                <span class="show-for-sr">Screen reader text only</span>
                <span class="switch-active" aria-hidden="true">Buzzword</span>
                <span class="switch-inactive" aria-hidden="true">Flapjack</span>
            </label>
        </div>
    </div>

    <div class="large-3 columns">
        <label for="text-switch-3">Small Text Switch</label>
        <div class="switch switch-text small">
            <input class="switch-input" id="text-switch-3" type="checkbox" name="exampleSwitch">
            <label class="switch-paddle" for="text-switch-3">
                <span class="show-for-sr">Screen reader text only</span>
                <span class="switch-active" aria-hidden="true">Buzzword</span>
                <span class="switch-inactive" aria-hidden="true">Flapjack</span>
            </label>
        </div>
    </div>

    <div class="large-3 columns">
        <label for="text-switch-4">Tiny Text Switch</label>
        <div class="switch switch-text tiny">
            <input class="switch-input" id="text-switch-4" type="checkbox" name="exampleSwitch">
            <label class="switch-paddle" for="text-switch-4">
                <span class="show-for-sr">Screen reader text only</span>
                <span class="switch-active" aria-hidden="true">Buzzword</span>
                <span class="switch-inactive" aria-hidden="true">Flapjack</span>
            </label>
        </div>
    </div>
</div>

Example Modal

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodtempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodoconsequat. Duis aute irure dolor in reprehenderit in voluptate velit essecillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat nonproident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Back to Version Explorer!