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 >
< link rel = "stylesheet"
href =
< script src =
</ script >
< script src =
</ script >
< 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 =
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:
Last Updated :
21 Apr, 2021
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...