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.
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= <!-- 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:
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:
Please Login to comment...