Create Switch using HTML, CSS, and JavaScript Tutorial

Submitted by oretnom23 on Tuesday, February 21, 2023 - 16:48.

In this tutorial, you will learn to create a Toggle Switch using HTML, CSS, and JavaScript. The tutorial aims to provide the students and new programmers with a reference for building a usable component for web applications using HTML, CSS, and JS from scratch. Here, a sample source code that demonstrates a simple toggle switch with functionality is provided. The complete source code zip file is also provided and is free to download.

What is Toggle Switch?

In web applications or web pages, the Toggle Switch simulates the on and off switch. It allows the user to choose between 2 options (on/off) and always has a default value. It is commonly used to provide immediate results and allow individuals to modify their choices as necessary. Enabling/Disabling the Dark Mode of the website is an example of a Toggle Switch.

How to create a Toggle Switch for websites?

Nowadays, some website developers are using pre-made templates or using CSS Frameworks such as Bootstrap Framework to build a website easily and faster. Almost all of the pre-made templates and CSS Frameworks come with toggle switches components so that developers will no longer bother to create one unless the design provided doesn't meet their needs. But if you wish to create your own custom-designed Toggle Switch, we can simply achieve this using some HTML elements, CSS pseudo-elements and properties for designing it, and some short lines of JavaScripts code.

The following list is the HTML elements and CSS pseudo-elements we can use to create a simple Toggle Switch.

HTML Input Element [type="checkbox"]
HTML Div Element
CSS ::before pseudo-elements
CSS ::after pseudo-elements

Example

To demonstrate how to build a Toggle Switch, I will be providing some snippets or scripts that will result in a simple web page that contains a Title and Toggle Switch component. The switch will be used to enable and disable the dark mode of the page interface.

Interface

The following script is the HTML script that contains the elements that are needed for the web page.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML, CSS, and JS - Switch</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Mynerve&display=swap" rel="stylesheet">
 
    <link rel="stylesheet" href="style.css">
</head>
<body class="light">
    <h1 class="text-center light"><b>Creating Switch using HTML, CSS, and JavaScript</b></h1>
    <hr width="50px">
    <!-- Toggle Switch Component -->
    <div class="custom-switch" data-true="Dark" data-false="Light" data-current="false">
        <input type="checkbox" class="custom-switch-input" checked="checked">
        <label for="">Light</label>
    </div>
    <!-- Toggle Switch Component -->
    <script src="script.js"></script>
</body>
</html>

JavaScript

The following script is the JavaScript script that contains the code for enabling and disabling functionality of the page dark mode interface.

const _cs_switch = document.querySelectorAll('.custom-switch')
 
_cs_switch.forEach(cs_switch=>{
    const updateSwitch = function(){
        var current = cs_switch.dataset.current
        var on_label = cs_switch.dataset.true
        var off_label = cs_switch.dataset.false
        if(current === 'false'){
            cs_switch.querySelector('label').innerText = on_label;
            cs_switch.dataset.current = 'true'
            cs_switch.querySelector('input').setAttribute('checked', "checked")
            document.querySelectorAll('.light').forEach(el =>{
                el.classList.remove('light')
                el.classList.add('dark')
            })
        }else{
            cs_switch.querySelector('label').innerText = off_label;
            cs_switch.dataset.current = 'false'
            cs_switch.querySelector('input').dataset.checked = 'false'
            cs_switch.querySelector('input').removeAttribute('checked')
            document.querySelectorAll('.dark').forEach(el =>{
                el.classList.remove('dark')
                el.classList.add('light')
            })
        }
    }
    var default_is_checked = cs_switch.querySelector('input').getAttribute('checked') || false
    if(default_is_checked === "checked")
        updateSwitch();
 
    cs_switch.addEventListener('click', function(e){
        e.preventDefault()
        updateSwitch()
    })
})

Default Design

By default, the application has only the following CSS code for the design of the web page which is the design of the toggle switch is not yet included.

:root{
    --mynerve-font:'Mynerve', cursive;
    --light-color:#f9f9f9;
    --dark-color:#20262E;
}
h1{
    font-family: var(--mynerve-font)
}
.text-center{
    text-align: center;
}
.light{
    background-color: var(--light-color);
    color:#121212
}
.dark{
    background-color: var(--dark-color);
    color:#f7f7f7
}
body,
html{
    height: 100%;
    width: 100%;
}
 
body{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0;
}

Output