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.

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

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

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

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 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.