How to get button toggle state within HTML? - GeeksforGeeks

21 Apr, 2021
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.
Approach: 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):  
html
<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:  
html
<style>        .toggle,           {           margin-top: 100px;            font-size: 20px;           }           h1{                color: green;                font-size: 30px;            }             </style>
Complete Code:  
html
<!DOCTYPE html><html>    <head>        <!-- Latest compiled and minified CSS -->        <link rel="stylesheet"              href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" />         <!-- jQuery library -->        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">       </script>         <!-- Popper JS -->        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js">      </script>         <!-- Latest compiled JavaScript -->        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js">      </script>         <meta name="viewport"              content="width=device-width,                       initial-scale=1" />         <link rel="stylesheet"              type="text/css"              href="style.css" />         <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"              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="https://cdn.jsdelivr.net/npm/gijgo@1.8.1/combined/js/gijgo.min.js"                type="text/javascript"></script>        <link href="https://cdn.jsdelivr.net/npm/gijgo@1.8.1/combined/css/gijgo.min.js"              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 resultsExample 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:  
html
<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:  
html
<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:  
 
arorakashish0911
Bootstrap-Misc
Picked
Bootstrap
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to pass data into a bootstrap modal?
How to set Bootstrap Timepicker using datetimepicker library ?
How to Show Images on Click using HTML ?
How to Use Bootstrap with React?
Difference between Bootstrap 4 and Bootstrap 5
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?