How to create toggle switch in css

CssHow-ToBeginner · 3 min read

How to Create a Toggle Switch in CSS: Simple Guide

To create a toggle switch in CSS, use a hidden checkbox input combined with a styled label that acts as the switch slider. Use CSS :checked selector to change the switch appearance when toggled.

📐

Syntax

A toggle switch uses a hidden input type="checkbox" and a label styled as the slider. The input controls the state, and the label shows the switch UI. CSS :checked selector styles the switch when toggled on.

input[type=checkbox]: The hidden checkbox that stores the toggle state.
label: The visible switch slider linked to the checkbox.
:checked: CSS pseudo-class to style the switch when active.

html+css

<input type="checkbox" id="toggle" />
<label for="toggle"></label>

/* CSS */
input[type="checkbox"] {
  display: none;
}

label {
  /* styles for switch background and shape */
}

input[type="checkbox"]:checked + label {
  /* styles when switch is ON */
}

💻

Example

This example shows a complete toggle switch with smooth sliding effect and color change when toggled.

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Toggle Switch Example</title>
<style>
  /* Hide the checkbox */
  input[type="checkbox"] {
    display: none;
  }

  /* The switch background */
  label {
    display: inline-block;
    width: 50px;
    height: 26px;
    background-color: #ccc;
    border-radius: 13px;
    position: relative;
    cursor: pointer;
    transition: background-color 0.3s;
  }

  /* The circle inside the switch */
  label::before {
    content: "";
    position: absolute;
    width: 22px;
    height: 22px;
    left: 2px;
    top: 2px;
    background-color: white;
    border-radius: 50%;
    transition: transform 0.3s;
  }

  /* When checked, change background and move circle */
  input[type="checkbox"]:checked + label {
    background-color: #4caf50;
  }

  input[type="checkbox"]:checked + label::before {
    transform: translateX(24px);
  }
</style>
</head>
<body>

<input type="checkbox" id="toggle" />
<label for="toggle" aria-label="Toggle switch"></label>

</body>
</html>

Output

A horizontal toggle switch with a grey background and white circle on the left. When clicked, the background changes to green and the white circle slides smoothly to the right.

⚠️

Common Pitfalls

Common mistakes include not hiding the checkbox properly, which shows the default checkbox UI, or forgetting to link the label with the input using for and id. Also, missing the :checked selector means the switch won't visually toggle.

Another issue is not making the switch accessible by skipping aria-label or keyboard focus styles.

html

/* Wrong: checkbox visible and label not linked */
<input type="checkbox" />
<label>Toggle</label>

/* Right: checkbox hidden and label linked */
<input type="checkbox" id="toggle" />
<label for="toggle">Toggle</label>

📊

Quick Reference

Use input[type=checkbox] hidden with display:none.
Style label as the switch background and slider.
Use :checked + label and :checked + label::before to style the ON state.
Include aria-label for accessibility.
Use smooth CSS transitions for better UX.

✅

Key Takeaways

Use a hidden checkbox and a styled label to create the toggle switch UI.

The CSS :checked selector changes the switch appearance when toggled.

Always link label and input with for and id attributes for proper toggling.

Hide the checkbox with display:none to avoid showing default UI.

Add aria-label for accessibility and use smooth transitions for better user experience.