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

I am an undergraduate student pursuing Btech in Electronics and Communication EngineeringI like to codeI am a quick learner and like to work around with new technologies

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.