Skip to content
Related Articles

Related Articles

How to get button toggle state within HTML?
  • Last Updated : 05 Aug, 2020
GeeksforGeeks - Summer Carnival Banner

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):




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

Style using CSS:






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

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

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:




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

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:




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

Output:

Attention reader! Don’t stop learning now. Get hold of all the important DSA concepts with the DSA Self Paced Course at a student-friendly price and become industry ready.

My Personal Notes arrow_drop_up
Recommended Articles
Page :