Settings Toggle Card

Provide users with clear, binary choices for application settings or preferences with this stylish toggle switch card.

This is an ideal component for any settings page. It presents an option with a title and description, and uses an accessible, animated switch to control its on/off state, all without requiring any JavaScript.

Screenshot of a list of settings options, each with a toggle switch.

Get Source Code Preview

About this Component

The core of this component is a visually styled toggle switch that is built using only HTML and CSS. It's an enhancement of a standard checkbox input, making it more intuitive and visually pleasing. The component is fully accessible to keyboard and screen reader users.

Features

CSS-Only Toggle Switch: The interactive on/off switch is built from a standard checkbox and styled with CSS, requiring zero JavaScript to function.
Accessible by Design: By using a semantic label and a hidden input type="checkbox", the toggle is fully accessible and keyboard-navigable.
Focus State: The toggle includes a clear focus ring, ensuring keyboard users can easily see which element is active.
List-Ready: The card is designed as a list, making it simple to stack multiple settings options on a single page.

Code Breakdown

HTML Structure

Each setting is a div with the class .stc-card. A label for the title is explicitly linked to the id of its corresponding input. The toggle switch itself is a second label wrapping a visually-hidden input type="checkbox" and a span element which acts as the visual part of the switch (the slider).

CSS Styling

The toggle switch's functionality lies in the use of the :checked pseudo-class and the adjacent sibling selector (+). The input itself is hidden with opacity: 0. The visual element (.stc-toggle-slider) is styled to look like a switch. When the input is checked (input:checked + .stc-toggle-slider), the CSS changes the background color of the slider. The sliding circle is a pseudo-element (::before) on the slider. When the input is checked, its transform: translateX(20px) property is animated, creating the smooth sliding effect.

Code

Here is the complete code. You can easily build a settings page by duplicating the li element for each option you need to provide.

<style>
/* This is an optional body style to provide a background for the page */
body {
    background-color: #f3f4f6;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
}

/* Container for the settings cards */
.settings-list-container {
    background-color: #ffffff;
    max-width: 600px;
    margin: 2rem auto;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.06);
    overflow: hidden;
}

.settings-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.settings-list li:not(:last-child) {
    border-bottom: 1px solid #e5e7eb;
}

/* === Settings Toggle Card Styles === */
.stc-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    gap: 1.5rem;
}

.stc-content {
    flex-grow: 1;
}

.stc-title {
    font-size: 1rem;
    font-weight: 500;
    color: #1f2937;
    margin: 0;
}
.stc-description {
    font-size: 0.875rem;
    color: #6b7280;
    margin: 0.25rem 0 0;
}

/* The CSS Toggle Switch */
.stc-toggle-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}
.stc-toggle-switch input { 
    opacity: 0;
    width: 0;
    height: 0;
}

.stc-toggle-slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 24px;
}

.stc-toggle-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

input:checked + .stc-toggle-slider {
    background-color: #4f46e5;
}

input:focus-visible + .stc-toggle-slider {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #4f46e5;
}

input:checked + .stc-toggle-slider:before {
    transform: translateX(20px);
}
</style>

<div class="settings-list-container">
    <ul class="settings-list">
        <li>
            <div class="stc-card">
                <div class="stc-content">
                    <label for="toggle-email" class="stc-title">Email Notifications</label>
                    <p class="stc-description">Receive updates and marketing emails.</p>
                </div>
                <label class="stc-toggle-switch">
                    <input type="checkbox" id="toggle-email" checked>
                    <span class="stc-toggle-slider"></span>
                </label>
            </div>
        </li>
        <li>
            <div class="stc-card">
                <div class="stc-content">
                    <label for="toggle-push" class="stc-title">Push Notifications</label>
                    <p class="stc-description">Get instant alerts on your device.</p>
                </div>
                <label class="stc-toggle-switch">
                    <input type="checkbox" id="toggle-push">
                    <span class="stc-toggle-slider"></span>
                </label>
            </div>
        </li>
         <li>
            <div class="stc-card">
                <div class="stc-content">
                    <label for="toggle-dark" class="stc-title">Dark Mode</label>
                    <p class="stc-description">Enable the dark color scheme.</p>
                </div>
                <label class="stc-toggle-switch">
                    <input type="checkbox" id="toggle-dark">
                    <span class="stc-toggle-slider"></span>
                </label>
            </div>
        </li>
    </ul>
</div>

View Output