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.
- How to create a radio button similar to toggle button using Bootstrap ?
- CSS | Animation to Change the Hover State of a Button/Image
- How to Create Toggle Switch by using HTML and CSS ?
- button tag vs input type="button" attribute
- How to set radio button checked by button click in AngularJS ?
- How to get focused a button automatically when the page load using HTML ?
- Alternative of ng-checked to get the checkbox's state in AngularJS
- jQuery | Hide/Show, Toggle and Fading methods with Examples
- How to create slide left and right toggle effect using jQuery?
- jQuery | toggle() Method
- How to replace dropdown-toggle icon with another default icon in Bootstrap ?
- jQuery UI | toggle() Method
- Data-toggle attributes in Twitter Bootstrap
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to firstname.lastname@example.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.