Skip to content
Related Articles

Related Articles

Save Article
Improve Article
Save Article
Like Article

How to create a radio button similar to toggle button using Bootstrap ?

  • Last Updated : 11 Jun, 2020

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.
     

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

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.
 

html




<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
  
    <title>Radio Button</title>
</head>
  
<body>
    <div class="radio">
        <div class="btn-group btn-group-toggle" 
            data-toggle="buttons">
            <label class="btn btn-primary">
                <input type="radio" name="button" 
                    id="button1" autocomplete="off" 
                    checked> Radio button 1
            </label>
  
            <label class="btn btn-primary active">
                <input type="radio" name="button" 
                id="button2" autocomplete="off">
                Radio button 2
            </label>
  
            <label class="btn btn-primary">
                <input type="radio" name="button" 
                id="button3" autocomplete="off">
                Radio button 3
            </label>
  
            <label class="btn btn-primary">
                <input type="radio" name="button" 
                id="button4" autocomplete="off">
                Radio button 4
            </label>
  
            <label class="btn btn-primary">
                <input type="radio" name="button" 
                id="button5" autocomplete="off">
                Radio button 5
            </label>
        </div>
    </div>
</body>
  
</html>


Important points:

  • 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.
 

html




<!DOCTYPE html>
<html>
  
<head>
  
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href=
  
    <!-- jQuery library -->
    <script src=
    </script>
  
    <!-- Popper JS -->
    <script src=
    </script>
  
    <!-- Latest compiled JavaScript -->
    <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=
"https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;1,300&display=swap"
            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>
  
    <style>
        .toggle,
        .radio {
            margin: 20px;
        }
    </style>
</head>
  
<body>
    <div class="toggle">
        <button type="button" 
            class="btn btn-warning" 
            data-toggle="button" 
            autocomplete="off">
            Toggle Button
        </button>
    </div>
  
    <div class="radio">
        <div class="btn-group btn-group-toggle" 
            data-toggle="buttons">
            <label class="btn btn-primary">
                <input type="radio" name="button" 
                    id="button1" autocomplete="off"
                    checked> Radio button 1
            </label>
  
            <label class="btn btn-primary active">
                <input type="radio" name="button" 
                    id="button2" autocomplete="off"
                    Radio button 2
            </label>
  
            <label class="btn btn-primary">
                <input type="radio" name="button" 
                    id="button3" autocomplete="off"
                    Radio button 3
            </label>
  
            <label class="btn btn-primary">
                <input type="radio" name="button" 
                    id="button4" autocomplete="off">
                    Radio button 4
            </label>
  
            <label class="btn btn-primary">
                <input type="radio" name="button" 
                    id="button5" autocomplete="off"
                    Radio button 5
            </label>
        </div>
    </div>
</body>
  
</html>

Output:

button




My Personal Notes arrow_drop_up
Recommended Articles
Page :