Foundation Switch

Foundation Switch is a beautiful toggle control that replaces traditional checkboxes. This chapter will introduce various uses of switches.

Basic Switch

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

Switch Sizes

<!-- Tiny Size -->
<div class="switch tiny">
    <input class="switch-input" id="tinySwitch" type="checkbox">
    <label class="switch-paddle" for="tinySwitch"></label>
</div>

<!-- Small Size -->
<div class="switch small">
    <input class="switch-input" id="smallSwitch" type="checkbox">
    <label class="switch-paddle" for="smallSwitch"></label>
</div>

<!-- Default Size -->
<div class="switch">
    <input class="switch-input" id="defaultSwitch" type="checkbox">
    <label class="switch-paddle" for="defaultSwitch"></label>
</div>

<!-- Large Size -->
<div class="switch large">
    <input class="switch-input" id="largeSwitch" type="checkbox">
    <label class="switch-paddle" for="largeSwitch"></label>
</div>

Switch with Text

<div class="switch">
    <input class="switch-input" id="textSwitch" type="checkbox">
    <label class="switch-paddle" for="textSwitch">
        <span class="switch-active" aria-hidden="true">ON</span>
        <span class="switch-inactive" aria-hidden="true">OFF</span>
    </label>
</div>

Checked by Default

<div class="switch">
    <input class="switch-input" id="checkedSwitch" type="checkbox" checked>
    <label class="switch-paddle" for="checkedSwitch"></label>
</div>

Disabled State

<div class="switch">
    <input class="switch-input" id="disabledSwitch" type="checkbox" disabled>
    <label class="switch-paddle" for="disabledSwitch"></label>
</div>

<div class="switch">
    <input class="switch-input" id="disabledChecked" type="checkbox" disabled checked>
    <label class="switch-paddle" for="disabledChecked"></label>
</div>

Custom Colors

<style>
    .switch.success .switch-paddle::after {
        background: #3adb76;
    }
    .switch.success input:checked ~ .switch-paddle {
        background: #3adb76;
    }

    .switch.warning .switch-paddle::after {
        background: #ffae00;
    }
    .switch.warning input:checked ~ .switch-paddle {
        background: #ffae00;
    }

    .switch.alert .switch-paddle::after {
        background: #cc4b37;
    }
    .switch.alert input:checked ~ .switch-paddle {
        background: #cc4b37;
    }
</style>

<div class="switch success">
    <input class="switch-input" id="successSwitch" type="checkbox" checked>
    <label class="switch-paddle" for="successSwitch"></label>
</div>

<div class="switch warning">
    <input class="switch-input" id="warningSwitch" type="checkbox" checked>
    <label class="switch-paddle" for="warningSwitch"></label>
</div>

<div class="switch alert">
    <input class="switch-input" id="alertSwitch" type="checkbox" checked>
    <label class="switch-paddle" for="alertSwitch"></label>
</div>

Switch with Label

<div class="grid-x align-middle">
    <div class="cell shrink">
        <div class="switch">
            <input class="switch-input" id="labelSwitch" type="checkbox">
            <label class="switch-paddle" for="labelSwitch"></label>
        </div>
    </div>
    <div class="cell auto">
        <label for="labelSwitch" style="margin-left: 10px;">Enable Notifications</label>
    </div>
</div>

Settings Panel Example

<div class="card">
    <div class="card-divider">
        <h4>Notification Settings</h4>
    </div>
    <div class="card-section">
        <div class="grid-x align-middle" style="padding: 10px 0; border-bottom: 1px solid #eee;">
            <div class="cell auto">
                <strong>Email Notifications</strong>
                <p class="text-muted" style="margin: 0; font-size: 14px;">Receive email push notifications</p>
            </div>
            <div class="cell shrink">
                <div class="switch">
                    <input class="switch-input" id="emailNotif" type="checkbox" checked>
                    <label class="switch-paddle" for="emailNotif"></label>
                </div>
            </div>
        </div>
        <div class="grid-x align-middle" style="padding: 10px 0; border-bottom: 1px solid #eee;">
            <div class="cell auto">
                <strong>SMS Notifications</strong>
                <p class="text-muted" style="margin: 0; font-size: 14px;">Receive SMS push notifications</p>
            </div>
            <div class="cell shrink">
                <div class="switch">
                    <input class="switch-input" id="smsNotif" type="checkbox">
                    <label class="switch-paddle" for="smsNotif"></label>
                </div>
            </div>
        </div>
        <div class="grid-x align-middle" style="padding: 10px 0;">
            <div class="cell auto">
                <strong>Push Notifications</strong>
                <p class="text-muted" style="margin: 0; font-size: 14px;">Receive app push notifications</p>
            </div>
            <div class="cell shrink">
                <div class="switch">
                    <input class="switch-input" id="pushNotif" type="checkbox" checked>
                    <label class="switch-paddle" for="pushNotif"></label>
                </div>
            </div>
        </div>
    </div>
</div>

JavaScript Control

// Get switch state
var isChecked = $('#mySwitch').prop('checked');

// Set switch state
$('#mySwitch').prop('checked', true);
$('#mySwitch').prop('checked', false);

// Toggle state
$('#mySwitch').prop('checked', !$('#mySwitch').prop('checked'));

// Listen for changes
$('#mySwitch').on('change', function() {
    if ($(this).prop('checked')) {
        console.log('Switch is ON');
    } else {
        console.log('Switch is OFF');
    }
});

Complete Example

<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Foundation Switch Example</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/css/foundation.min.css">
    <style>
        .demo-section {
            margin-bottom: 40px;
            padding: 20px;
            background: #f8f8f8;
            border-radius: 4px;
        }
        .demo-section h3 {
            margin-bottom: 20px;
        }
        .switch { margin-right: 20px; }

        .switch.success input:checked ~ .switch-paddle { background: #3adb76; }
        .switch.warning input:checked ~ .switch-paddle { background: #ffae00; }
        .switch.alert input:checked ~ .switch-paddle { background: #cc4b37; }

        .setting-item {
            padding: 15px 0;
            border-bottom: 1px solid #eee;
        }
        .setting-item:last-child { border-bottom: none; }
        .setting-item .description {
            margin: 0;
            font-size: 14px;
            color: #666;
        }
    </style>
</head>
<body>
    <div class="grid-container">
        <h1>Foundation Switch Showcase</h1>

        <div class="demo-section">
            <h3>Basic Switch</h3>
            <div class="switch">
                <input class="switch-input" id="basic1" type="checkbox">
                <label class="switch-paddle" for="basic1"></label>
            </div>
            <div class="switch">
                <input class="switch-input" id="basic2" type="checkbox" checked>
                <label class="switch-paddle" for="basic2"></label>
            </div>
        </div>

        <div class="demo-section">
            <h3>Switch Sizes</h3>
            <div class="switch tiny">
                <input class="switch-input" id="tiny" type="checkbox" checked>
                <label class="switch-paddle" for="tiny"></label>
            </div>
            <span>Tiny</span>
            &nbsp;&nbsp;
            <div class="switch small">
                <input class="switch-input" id="small" type="checkbox" checked>
                <label class="switch-paddle" for="small"></label>
            </div>
            <span>Small</span>
            &nbsp;&nbsp;
            <div class="switch">
                <input class="switch-input" id="default" type="checkbox" checked>
                <label class="switch-paddle" for="default"></label>
            </div>
            <span>Default</span>
            &nbsp;&nbsp;
            <div class="switch large">
                <input class="switch-input" id="large" type="checkbox" checked>
                <label class="switch-paddle" for="large"></label>
            </div>
            <span>Large</span>
        </div>

        <div class="demo-section">
            <h3>Switch with Text</h3>
            <div class="switch large">
                <input class="switch-input" id="textSwitch" type="checkbox">
                <label class="switch-paddle" for="textSwitch">
                    <span class="switch-active" aria-hidden="true">ON</span>
                    <span class="switch-inactive" aria-hidden="true">OFF</span>
                </label>
            </div>
        </div>

        <div class="demo-section">
            <h3>Custom Colors</h3>
            <div class="switch success">
                <input class="switch-input" id="success" type="checkbox" checked>
                <label class="switch-paddle" for="success"></label>
            </div>
            <span>Success</span>
            &nbsp;&nbsp;
            <div class="switch warning">
                <input class="switch-input" id="warning" type="checkbox" checked>
                <label class="switch-paddle" for="warning"></label>
            </div>
            <span>Warning</span>
            &nbsp;&nbsp;
            <div class="switch alert">
                <input class="switch-input" id="alert" type="checkbox" checked>
                <label class="switch-paddle" for="alert"></label>
            </div>
            <span>Alert</span>
        </div>

        <div class="demo-section">
            <h3>Disabled State</h3>
            <div class="switch">
                <input class="switch-input" id="disabled1" type="checkbox" disabled>
                <label class="switch-paddle" for="disabled1"></label>
            </div>
            <span>Disabled (OFF)</span>
            &nbsp;&nbsp;
            <div class="switch">
                <input class="switch-input" id="disabled2" type="checkbox" disabled checked>
                <label class="switch-paddle" for="disabled2"></label>
            </div>
            <span>Disabled (ON)</span>
        </div>

        <div class="demo-section">
            <h3>Settings Panel Example</h3>
            <div class="card" style="max-width: 500px;">
                <div class="card-divider">
                    <h4 style="margin: 0;">Notification Settings</h4>
                </div>
                <div class="card-section">
                    <div class="grid-x align-middle setting-item">
                        <div class="cell auto">
                            <strong>Email Notifications</strong>
                            <p class="description">Receive email push notifications</p>
                        </div>
                        <div class="cell shrink">
                            <div class="switch">
                                <input class="switch-input" id="emailNotif" type="checkbox" checked>
                                <label class="switch-paddle" for="emailNotif"></label>
                            </div>
                        </div>
                    </div>
                    <div class="grid-x align-middle setting-item">
                        <div class="cell auto">
                            <strong>SMS Notifications</strong>
                            <p class="description">Receive SMS push notifications</p>
                        </div>
                        <div class="cell shrink">
                            <div class="switch">
                                <input class="switch-input" id="smsNotif" type="checkbox">
                                <label class="switch-paddle" for="smsNotif"></label>
                            </div>
                        </div>
                    </div>
                    <div class="grid-x align-middle setting-item">
                        <div class="cell auto">
                            <strong>Push Notifications</strong>
                            <p class="description">Receive app push notifications</p>
                        </div>
                        <div class="cell shrink">
                            <div class="switch">
                                <input class="switch-input" id="pushNotif" type="checkbox" checked>
                                <label class="switch-paddle" for="pushNotif"></label>
                            </div>
                        </div>
                    </div>
                    <div class="grid-x align-middle setting-item">
                        <div class="cell auto">
                            <strong>Silent Mode</strong>
                            <p class="description">Turn off all sound alerts</p>
                        </div>
                        <div class="cell shrink">
                            <div class="switch">
                                <input class="switch-input" id="muteNotif" type="checkbox">
                                <label class="switch-paddle" for="muteNotif"></label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="demo-section">
            <h3>Interactive Demo</h3>
            <div class="grid-x align-middle">
                <div class="cell shrink">
                    <div class="switch large">
                        <input class="switch-input" id="interactiveSwitch" type="checkbox">
                        <label class="switch-paddle" for="interactiveSwitch"></label>
                    </div>
                </div>
                <div class="cell auto" style="padding-left: 15px;">
                    <span id="switchStatus">Current Status: OFF</span>
                </div>
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/js/foundation.min.js"></script>
    <script>
        $(document).foundation();

        $('#interactiveSwitch').on('change', function() {
            var status = $(this).prop('checked') ? 'ON' : 'OFF';
            $('#switchStatus').text('Current Status: ' + status);
        });
    </script>
</body>
</html>

Switch Best Practices

1. Immediate Effect: Switches typically represent settings that take effect immediately
2. Clear Labels: Clearly explain what the switch does
3. Appropriate Size: Use larger sizes on mobile for easier touch
4. State Feedback: Consider adding text to indicate the current state

Summary

In this chapter, we learned:

• Creating basic switches
• Switch sizes
• Switches with text
• Custom colors
• Settings panel examples
• JavaScript control

Next chapter, we will learn Foundation Slider.