Add a Toggle Switch to Your Project

toggle
Toggle switches are useful for mode switching, theme selection, or showing/hiding UI elements. This tutorial will show you how to add a toggle switch and read its state value.

Step 1. Create an HTML file
Open a text editor and paste the following code. Save with .html extension. At the end of this tutorial I explain how the script works for those interested.

<!doctype html>
<html>
<head>
<meta charset=”utf-8″>
<style>
.switch {
position: relative;
width: 55px;
height: 28px;
display: inline-block;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.sliderBtn {
position: absolute;
cursor: pointer;
background: #ccc;
top: 0;
left: 0;
right: 0;
bottom: 0;
transition: .3s;
border-radius: 30px;
}
.sliderBtn:before {
content: “”;
position: absolute;
width: 24px;
height: 24px;
left: 2px;
bottom: 2px;
background: #fff;
border-radius: 50%;
transition: .3s;
}
input:checked + .sliderBtn {
background: #4caf50;
}
input:checked + .sliderBtn:before {
transform: translateX(26px);
}
</style>
</head>
<body>

<label class=”switch”>
<input type=”checkbox” id=”toggle”>
<span class=”sliderBtn”></span>
</label>

<script>
let toggleState = document.getElementById(“toggle”).checked ? 1 : 0;

document.getElementById(“toggle”).oninput = function() {
toggleState = this.checked ? 1 : 0;
toggleFunction();
};

function toggleFunction() {
console.log(“Toggle State:”, toggleState);
}
</script>

</body>
</html>

Step 2: Test the File
Open the file in a browser and interact with the switch. The console will print the toggle state.
Want to test HTML, CSS, JS online? Use https://onlinehtmlviewer.com/

Step 3: Use the Toggle State
You can now attach any behavior to toggleFunction() depending on whether the switch is ON (1) or OFF (0). For example, toggles are commonly used for theme switching, enabling features, or showing/hiding UI sections.

Explanation of Script
Style
The style between <style> tags defines how the toggle looks. The checkbox is hidden, and the sliderBtn element becomes the visual switch. Rounded corners and transitions make the toggle feel smooth.

Body
Inside the body, we create a labeled switch. The input controls state, while the sliderBtn is only for visuals. The toggle starts in OFF state but can be set to default ON by adding “checked” to the input.

Script
The JavaScript detects changes using oninput. After every user interaction, toggleState updates to 0 or 1 and triggers toggleFunction() so you can handle logic.

How You Could Use This
Here are some ideas:

• Light vs Dark mode
• Mute/unmute sound
• Enable advanced settings
• Show/hide images or panels
• Activate filters or modes

Feel free to experiment and modify the toggle to match your design. Thanks!