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 switch
        
        
    
<!-- Default checkbox switch -->
<div class="switch-wrapper">
    <label for="checkbox-switch">Example switch</label>
    <div class="switch">
        <input id="checkbox-switch" type="checkbox">
        <label for="checkbox-switch"></label>
    </div>
</div>

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

    
    
<!-- Switch with no label -->
<div class="switch">
    <input id="no-label-switch" type="checkbox">
    <label for="no-label-switch"></label>
</div>

Radio Buttons

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

Switch 1
            
            
        
Switch 2
            
            
        
Switch 3
            
            
        

<!-- Example radio switch set -->
<form class="row">
    <div class="switch-wrapper columns small-2">
        <label for="radio-switch-1">Switch 1</label>
        <div class="switch">
            <input name="radio-switch" id="radio-switch-1" type="radio">
            <label for="radio-switch-1"></label>
        </div>
    </div>
    <div class="switch-wrapper columns small-2">
        <label for="radio-switch-1">Switch 2</label>
        <div class="switch">
            <input name="radio-switch" id="radio-switch-2" type="radio">
            <label for="radio-switch-2"></label>
        </div>
    </div>
    <div class="switch-wrapper columns small-2 end">
        <label for="radio-switch-1">Switch 3</label>
        <div class="switch">
            <input name="radio-switch" id="radio-switch-3" type="radio">
            <label for="radio-switch-3"></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.

Large Switch
            
            
        
Default Switch
            
            
        
Small Switch
            
            
        
Tiny Switch
            
            
        
<div class="row">
    <!-- Large checkbox switch -->
    <div class="switch-wrapper columns small-2">
        <label for="large-checkbox-switch">Large Switch</label>
        <div class="switch large">
            <input id="large-checkbox-switch" type="checkbox">
            <label for="large-checkbox-switch"></label>
        </div>
    </div>
    <!-- Default checkbox switch -->
    <div class="switch-wrapper columns small-2">
        <label for="default-checkbox-switch">Default Switch</label>
        <div class="switch">
            <input id="default-checkbox-switch" type="checkbox">
            <label for="default-checkbox-switch"></label>
        </div>
    </div>
    <!-- Small checkbox switch -->
    <div class="switch-wrapper columns small-2">
        <label for="small-checkbox-switch">Small Switch</label>
        <div class="switch small">
            <input id="small-checkbox-switch" type="checkbox">
            <label for="small-checkbox-switch"></label>
        </div>
    </div>
    <!-- Tiny checkbox switch -->
    <div class="switch-wrapper columns small-2 end">
        <label for="tiny-checkbox-switch">Tiny Switch</label>
        <div class="switch tiny">
            <input id="tiny-checkbox-switch" type="checkbox">
            <label for="tiny-checkbox-switch"></label>
        </div>
    </div>
</div>

Switches

Choose Theme:

Switches

Radio Buttons

Sizing

Example Modal