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.
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):
Style using CSS:
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.
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.