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

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.
 



html

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right



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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:

button

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.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.