Toggle Switch Template

A stylish and accessible toggle switch for enabling or disabling options with a single click.

This component provides a more intuitive and visually appealing alternative to a traditional checkbox for binary choices, such as toggling dark mode or notifications.

Get Source Code Preview

About the Toggle Switch

Toggle switches offer a clean and modern way to present a simple on/off choice. This template uses a clever CSS technique to style a semantic HTML checkbox, resulting in a beautiful switch that is fully accessible and requires no JavaScript for its basic functionality.

Features

Pure CSS Functionality: The sliding animation and state change are handled entirely by CSS, making the component lightweight and fast.
Accessible Foundation: Built using a label and a standard input with type="checkbox". This ensures it's keyboard-navigable and correctly interpreted by screen readers. The added role="switch" makes its purpose even more explicit.
Smooth Animation: A gentle transition creates a smooth sliding effect for the switch's handle.
Easy to Customize: All colors and sizes can be quickly adjusted using the CSS variables at the top of the style block.

Code Breakdown

The structure consists of a checkbox input and an associated label. The checkbox itself is visually hidden, but remains functional in the background. The label is styled to look like the track of the switch.

The "toggle" part happens with the :checked pseudo-class and the adjacent sibling selector (+). When the checkbox is checked, the rule .toggle-checkbox-1:checked + .toggle-label-1 triggers, changing the background color of the label. Similarly, a rule targeting the label's ::after pseudo-element, which serves as the handle, uses a transform to slide the handle to the "on" position.

Code

Here is the complete HTML and CSS for the accessible toggle switch.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Toggle Switch</title>
    <style>
        /*
         Component: Accessible Toggle Switch
         Description: A CSS-only switch based on a semantic checkbox.
        */

:root {
            --toggle-width: 50px;
            --toggle-height: 28px;
            --toggle-padding: 3px;
            --toggle-bg-on: #007bff;
            --toggle-bg-off: #ccc;
            --toggle-handle-color: #fff;
            --toggle-focus-outline: #007bff;
        }

.toggle-switch-container-1 {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            color: #333;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 1rem;
            padding: 2rem;
        }

.toggle-checkbox-1 {
            /* Visually hide the checkbox but keep it accessible */
            opacity: 0;
            width: 0;
            height: 0;
            position: absolute;
        }

.toggle-label-1 {
            display: inline-block;
            width: var(--toggle-width);
            height: var(--toggle-height);
            background-color: var(--toggle-bg-off);
            border-radius: var(--toggle-height);
            cursor: pointer;
            position: relative;
            transition: background-color 0.2s ease-in-out;
        }

.toggle-label-1::after {
            /* This is the handle of the switch */
            content: '';
            position: absolute;
            top: var(--toggle-padding);
            left: var(--toggle-padding);
            width: calc(var(--toggle-height) - (var(--toggle-padding) * 2));
            height: calc(var(--toggle-height) - (var(--toggle-padding) * 2));
            background-color: var(--toggle-handle-color);
            border-radius: 50%;
            transition: transform 0.2s ease-in-out;
        }

/* --- State Changes --- */
        .toggle-checkbox-1:checked + .toggle-label-1 {
            background-color: var(--toggle-bg-on);
        }

.toggle-checkbox-1:checked + .toggle-label-1::after {
            transform: translateX(calc(var(--toggle-width) - var(--toggle-height)));
        }

/* --- Accessibility --- */
        .toggle-checkbox-1:focus-visible + .toggle-label-1 {
            outline: 2px solid var(--toggle-focus-outline);
            outline-offset: 3px;
        }
    </style>
</head>
<body>

<div class="toggle-switch-container-1">
        <label for="autoUpdates">Enable Auto-Updates</label>
        <div class="toggle-control">
             <input class="toggle-checkbox-1" type="checkbox" id="autoUpdates" role="switch" checked>
             <label class="toggle-label-1" for="autoUpdates"></label>
        </div>
    </div>

</body>
</html>

View Output