Toggle Buttons: The buttons that can change from one state to another, i.e. which can be toggled from on state to off state or vice-versa are called toggle buttons. For example:
- A particular switch in our house can either be on or off. This is a very good example of a real life toggle switch.
- The WiFi or Bluetooth option in our phone is another example, that can either be on or off.
Radio Button: As the name suggests, it is the concept of the buttons in a radio, where for the first station, we select the first button, for the second station we select the second button and so on. It is like a multiple-choice question where at a time only one button will be active. Here we select from a list of options. For example:
- Buttons in a FM Radio.
- Multiple choice questions in an exam.
Example: Create a radio button using Bootstrap.
- We have to add a checked attribute to any one of the radio buttons such that it is pre-selected when the page loads. It is a boolean attribute.
- The same name has to be given to all the set of elements.
Example 2: The following code will help us to understand the difference (in code) to design a toggle and a radio button.
- How to Create Custom Radio Button using HTML and CSS ?
- How to set radio button checked by button click in AngularJS ?
- How to replace dropdown-toggle icon with another default icon in Bootstrap ?
- Data-toggle attributes in Twitter Bootstrap
- How to change the “checked” background color of toggle switch in Bootstrap 4?
- How to Display Validation Message for Radio Buttons with Inline Images using Bootstrap 4 ?
- How to create slide left and right toggle effect using jQuery?
- How to Create Toggle Switch by using HTML and CSS ?
- How to get button toggle state within HTML?
- How to know which radio button is selected using jQuery?
- How to get the value of radio button using AngularJS ?
- Include Bootstrap in AngularJS using ng-bootstrap
- Radio Button Vs Checkbox in HTML
- How to check a radio button with jQuery?
- Difference between bootstrap.css and bootstrap-theme.css
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.