How to get button toggle state within HTML?

Toggle buttons are basically on/off buttons. A button can be switched from on to off state and vice-versa. This process is called toggling.

Examples of toggle button:

  • The buttons on our switchboards are the best example of toggle buttons.
  • Some of the buttons on our phones- the torch button, the mobile data button, the wifi button, flight mode, Bluetooth button can be either on or off. These are all toggle buttons.

Approch:
Now let’s see how to design these buttons in HTML with the help of Bootstrap.

Example 1: The default toggle button
Code in HTML (Using Bootstrap):

filter_none

edit
close

play_arrow

link
brightness_4
code

<div class="toggle">
    <div class="custom-control custom-switch">
      <input type="checkbox" 
             class="custom-control-input"
             id="toggleSwitches">
      <label class="custom-control-label" 
             for="toggleSwitches">
        TOGGLE</label>
    </div
</div>

chevron_right


Style using CSS:



filter_none

edit
close

play_arrow

link
brightness_4
code

<style>
        .toggle,
           {
           margin-top: 100px;
            font-size: 20px;
           }
           h1{
                color: green;
                font-size: 30px;
            }
              
</style>

chevron_right


Complete Code:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
    <head>
        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" 
              href=
  
        <!-- jQuery library -->
        <script src=
       </script>
  
        <!-- Popper JS -->
        <script src=
      </script>
  
        <!-- Latest compiled JavaScript -->
        <script src=
      </script>
  
        <meta name="viewport" 
              content="width=device-width, 
                       initial-scale=1" />
  
        <link rel="stylesheet" 
              type="text/css"
              href="style.css" />
  
        <link href=
              rel="stylesheet" />
  
        <link href=
"https://fonts.googleapis.com/css2?family=Lato:ital, wght@0, 100;0, 300;0, 400;1, 300&display=swap" 
              rel="stylesheet" />
        <script src=
                type="text/javascript"></script>
        <link href=
              rel="stylesheet"
              type="text/css" />
        <link rel="stylesheet" 
              type="text/css" 
              href="css/lightbox.min.css" />
        <script type="text/javascript" 
                src="js/lightbox-plus-jquery.min.js">
      </script>
  
        <title>Buttons</title>
  
        <h1>GeeksforGeeks</h1>
  
        <style>
            .toggle {
                margin-top: 100px;
                font-size: 20px;
            }
            h1 {
                color: green;
                font-size: 30px;
            }
        </style>
    </head>
  
    <body>
        <div class="toggle">
            <div class="custom-control custom-switch">
                <input type="checkbox" 
                       class="custom-control-input" 
                       id="toggleSwitches" />
                <label class="custom-control-label" 
                       for="toggleSwitches">
                  TOGGLE
              </label>
            </div>
        </div>
    </body>
</html>

chevron_right


Output:

The switches use a custom-switch class to change it into toggle switches.
Slight modifications can be done in the code to get desired results

Example 2: The toggle switches can also be given a checked attribute. If it is done so then the toggle button will always be pre-selected when the page loads.
The checked attribute is a boolean attribute.

Code snippet:

filter_none

edit
close

play_arrow

link
brightness_4
code

<div class="toggle">
    <div class="custom-control custom-switch">
        <input type="checkbox" 
               class="custom-control-input" 
               id="toggleSwitches" 
               checked />
        <label class="custom-control-label" 
               for="toggleSwitches">
          CHECKED TOGGLE BUTTON
      </label>
    </div>
</div>

chevron_right


Output:

Example 3: We can also add the disabled attribute to the toggle button . If this is done then the switch can never be used and clicked.

Code snippet:

filter_none

edit
close

play_arrow

link
brightness_4
code

<div class="toggle">
    <div class="custom-control custom-switch">
        <input type="checkbox" 
               class="custom-control-input" 
               id="toggleSwitches" 
               disabled />
        <label class="custom-control-label"
               for="toggleSwitches">
          DISABLED TOGGLE BUTTON</label>
    </div>
</div>

chevron_right


Output:




My Personal Notes arrow_drop_up

I am an undergraduate student pursuing Btech in Electronics and Communication EngineeringI like to codeI am a quick learner and like to work around with new technologies

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.