Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to create radio button similar to the toggle button using Bootstrap
Overview
We can create a radio button same as the toggle button which can be used in our web application in the part where we have to choose the options or regarding changing actions. In creating the radio button we can use the bootstrap predefined classes which will help us to build a radio button. A toggle button is a button which is the same as a normal button toggleable button and a radio button is a button with a checkbox like shape in front of the option.
Content Delivery Network (CDN) Links
These CDN links are used to use the classes of bootstrap. As the first link provides the bootstrap classes access to the web page. The other two script tags are used to add the functionality to the bootstrapped radio button.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js">
Syntax
The syntax used to create a simple radio button is −
<div> <input type="radio" name="button" id="button1"> <label>Option</label> </div>
Algorithm
Step 1 − Create a HTML boilerplate in a text editor.
Step 2 − Add the above given CDN links to the head tag of the code.
Step 3 − Now create a div container for a page which will contain all the components of the page.
Step 4 − Create another child div inside the parent div container with the class name of “btn-group” and “btn-group-toggle” and add another attribute to it as data-toggle with value buttons.
<div class="btn-group btn-group-toggle" data-toggle="buttons"></div>
Step 5 − Now create a label with the input type of radio. Define the class name of this label as “btn btn-success” this will make a radio button as toggle button.
<label class="btn btn-success my-1 rounded"> <input type="radio" name="button" id="button1"> A. Option </label>
Step 6 − If you want to add more buttons repeat step 5 inside the same div.
Step 7 − Radio buttons are created successfully.
Example
To learn about the creation of the radio button same as the toggle button, we will learn with the example of the multiple choice question layouts. In this example we had created some radio buttons which act as toggle buttons.
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"> </script>
<title>Radio Toggle Button</title>
</head>
<body>
<div class="radio container mt-3">
<h2 class="text-center text-success fw-bold bg-light">Toggle Button Options</h2>
<div class="btn-group btn-group-toggle d-flex flex-column w-50 container mt-4" data-toggle="buttons">
<label class="btn btn-success my-1 rounded">
<input type="radio" name="button" id="button1">
A. Option
</label>
<label class="btn btn-success my-1 rounded">
<input type="radio" name="button" id="button2">
B. Option
</label>
<label class="btn btn-success my-1 rounded">
<input type="radio" name="button" id="button3">
C. Option
</label>
<label class="btn btn-success my-1 rounded">
<input type="radio" name="button" id="button4">
D. Option
</label>
</div>
</div>
</body>
</html>
In the below given image, it shows the four options as Option A, Option B, Option C and Option D. All these are radio buttons but acting like a toggle button. To make a radio button as a toggle button, define the particular radio button class as btn btn-success which will implement the styling of toggle button to the radio button.
Conclusion
The radio button, similar to toggle button can also be used for the dark mode and light mode changes in a web application. These types of buttons are used to make a certain change or to produce a certain action. These toggle buttons are also used in games for making actions like forward, backward and jump. The basic radio button can be normally seen in the real time registration forms on the websites. From a group of radio buttons we can only select a single button, if we want to select multiple button then we should use checkboxes instead of radio buttons.
1K+ Views
