Open In App

Bootstrap 5 Checks and radios Switches

Last Updated : 06 Mar, 2023
Improve
Improve
Like Article
Like
Save
Share
Report

Bootstrap5 Checks and radios Switches are used to transform the Checks and Radio Inputs into switches. They are transformed as .form-switch is added to the HTML div containing the input and the label. The prime difference between the checkbox and radio switch is the role attribute which is set to radio or checkbox and a name attribute is added in the case of radio.

Bootstrap5 Checks and radios Switches Class:

  • form-switch: The class is used to define the check or radio switch which includes the input and label tags.

Syntax:

<div class="form-check form-switch">
      <input class="form-check-input" 
                  type="checkbox/radio"
                  role="switch" id="flexSwitchCheck">
      <label class="form-check-label" 
                 for="flexSwitchCheck">...</label>
</div>

Note: The syntax is same for transforming both the check and the radio switches just the “type” attribute in the input tag is changed to checkbox and radio respectively. 

Example 1: This code below demonstrates how we can implement the switch as checks and show different toggle states.

HTML




<!doctype html>
<html lang="en">
<head>
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
        rel="stylesheet" integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
        crossorigin="anonymous">
    <script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
            integrity=
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
            crossorigin="anonymous">
    </script>
</head>
<body class="m-3">
    <h1 class="m-4 text-success">
        GeeksforGeeks</h1>
    <h4 class="ms-4">
        Bootstrap 5 Checks and radios Switches
    </h4>
    <h5 class="ms-5 mt-5 text-success">
        Choose the technologies you want to learn:
    </h5>
    <div class="row m-2">
        <div class="col-6">
            <div class="form-check form-switch m-4">
                <input class="form-check-input" type="checkbox"
                    id="defaultCheckbox1" autocomplete="off">
                <label class="form-check-label"
                    for="defaultCheckbox1">
                    Data Structures
                </label>
            </div>
        </div>
        <div class="col-6">
            <div class="form-check form-switch m-4">
                <input class="form-check-input" type="checkbox"
                    id="checkedCheckbox1" autocomplete="off" checked>
                <label class="form-check-label" for="checkedCheckbox1">
                    Algorithms</label>
            </div>
        </div>
    </div>
    <div class="row m-2">
        <div class="col-6">
            <div class="form-check form-switch m-4">
                <input class="form-check-input" type="checkbox"
                    id="defaultCheckbox2" autocomplete="off">
                <label class="form-check-label" for="defaultCheckbox2">
                    HTML</label>
            </div>
        </div>
        <div class="col-6">
            <div class="form-check form-switch m-4">
                <input class="form-check-input" type="checkbox"
                    id="checkedCheckbox2" autocomplete="off" checked>
                <label class="form-check-label" for="checkedCheckbox2">
                    CSS</label>
            </div>
       </div>
    </div>
    <div class="row m-2">
        <div class="col-6">
            <div class="form-check form-switch m-4">
                <input class="form-check-input" type="checkbox"
                        id="disabledCheckbox1" autocomplete="off"
                        disabled checked>
                <label class="form-check-label"
                    for="disabledCheckbox1">
                    Bootstrap</label>
            </div>
        </div>
        <div class="col-6">
            <div class="form-check form-switch m-4">
                <input class="form-check-input" type="checkbox"
                    id="disabledCheckbox2" autocomplete="off" disabled>
                <label class="form-check-label" for="disabledCheckbox2">
                    Networking</label>
            </div>
        </div>
    </div>  
</body>
</html>
 






                        










Output:


Bootstrap5 Checks and radios Switches
Bootstrap5 Checks and radios Switches


Example 2: This code below demonstrates how we can implement the switch as radios inside cards to choose options and show different toggle states:




HTML














                                    




                                    

                                    




                                    




                                    

                                    

                                    
                                




















<!doctype html>


<html lang="en">


<head>


     <link href=


"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"


        rel="stylesheet" integrity=


"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"


        crossorigin="anonymous">


    <script src=


"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"


            integrity=


"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"


            crossorigin="anonymous">


    </script>  


</head>


<body class="m-3">


    <h1 class="m-4 text-success">


        GeeksforGeeks</h1>


    <h4 class="ms-4">


        Bootstrap 5 Checks and radios Switches


    </h4>


    <div class="row m-4">


        <div class="col-6">


            <div class="card">


                <div class="card-body">


                    <h5 class="card-title">


                        Are you a Human?


                    </h5>


                    <div class="container d-flex">


                        <div class="form-check form-switch">


                            <input class="form-check-input"


                                type="radio" name="option"


                                id="disabledRadioSwitch"


                                disabled>


                            <label class="form-check-label"


                                for="disabledRadioSwitch">


                                No


                            </label>


                        </div>


                        <div class="form-check form-switch ms-2">


                            <input class="form-check-input"


                                type="radio" name="option"


                                id="checkedDisabledRadioSwitch"


                                checked disabled>


                            <label class="form-check-label"


                                for="checkedDisabledRadioSwitch">


                                Yes


                            </label>


                        </div>


                    </div> 


                </div>


            </div>


        </div>


        <div class="col-sm-6">


            <div class="card">


                <div class="card-body">


                    <h5 class="card-title">


                        Do you want to learn Bootstrap 5?


                    </h5>


                    <div class="container d-flex">


                        <div class="form-check form-switch ">


                            <input class="form-check-input"


                                type="radio" name="options"


                                id="defaultRadioSwitch"


                                autocomplete="off">


                            <label class="form-check-label"


                                for="defaultRadioSwitch">


                                Yes


                            </label>


                        </div>  


                        <div class="form-check form-switch ms-2">


                            <input class="form-check-input" type="radio"


                                name="options" id="checkedRadioSwitch"


                                autocomplete="off" checked>


                            <label class="form-check-label"


                                for="checkedRadioSwitch">


                                No


                            </label>


                        </div>


                    </div>


                </div>


            </div>


        </div>


    </div>   


</body>


</html>



















                        







                        










Output:


Bootstrap5 Checks and radios Switches
Bootstrap5 Checks and radios Switches


Reference: https://getbootstrap.com/docs/5.1/forms/checks-radios/#switches 


                                 


                            

                                

                                    Like Article
                                    
                                

                                

                                    
                                    

                                        
                                        Suggest improvement
                                    

                                

                            


                            

                                                            

                                    
                                        
                                        Previous
                                    
                                    
                                    

                                        Bootstrap 5 Checks and Radios Disabled
                                    

                                

                                                            

                                    
                                        Next
                                        
                                    
                                    
                                    

                                        Bootstrap 5 Checks and radios Default (stacked)
                                    

                                

                                                        

                            
    

        

            Share your thoughts in the comments
        

        
    
                            

            

                

                    

                    
                
 
                
    
                            

                                

                            


                            


            

        
 
                        

                                                

                        
                                                    

                                

                                    Similar Reads                                    
                                

                                
      
                                    
        
            

                Bootstrap 5 Checks and radios Radios
            

        
    
        
            

                Bootstrap 5 Checks and radios Checks
            

        
    
        
            

                Bootstrap 5 Checks and Radios Disabled
            

        
    
        
            

                Bootstrap 5 Checks and Radios Indeterminate
            

        
    
        
            

                Bootstrap 5 Checks and radios Default (stacked)
            

        
    
        
            

                Bootstrap 5 Checks and Radios Outlined Styles
            

        
    
        
            

                Bootstrap 5 Checks and Radios
            

        
    
        
            

                Bootstrap 5 Checks and radios Radio Toggle Buttons
            

        
    
        
            

                Bootstrap 5 Checks and radios Inline
            

        
    
        
            

                Bootstrap 5 Checks and radios Checkbox Toggle buttons
            

        
                                    

                            

                                                                        

                                

                                    
                                                                    

                            


                        

                        

                            

                                

                                    

                                        
T

        

            
        

        

                                    


                                    

                                        triashabiswas                                

                            

                            

            
                                

                            

                                                                    

                                        
Article Tags : 

                                        
                                    

                                                                                            

                                                                                    

                              

                            

                                                        
                        

                    

                

            

        
        


        

                


			
		
		                
        

    

    

        

            

            

        

    












	

    
  

  
  








    
        We use cookies to ensure you have the best browsing experience on our website. By using our site, you
        acknowledge that you have read and understood our
        Cookie Policy &
        Privacy Policy
            
    







   Lightbox