Bootstrap 5 Checks and radios Checkbox Toggle buttons

Last Updated : 09 Jan, 2023

Bootstrap 5 Checks and radios Checkbox Toggle buttons are a way of visualizing the checkboxes as buttons and primarily the .form-check is changed to .btn-check and the .form-check-label is changed to buttons classes. There are three toggle states, the first is checked followed by unchecked and disabled in which all can be done by adding or not adding some attributes.

Bootstrap 5 Checks and radios Checkbox Toggle buttons Classes:

btn-check: The class is used to specify that the input is for a button-type checkbox.

Syntax:

<input type="checkbox" class="btn-check" checked/disabled>
<label class="btn" for="btn-check">...</label>

Example 1: In the code below all the three toggle states are demonstrated and the output shows them, in action:

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> 
    <h1 class="m-4" class="text-success">GeeksforGeeks</h1> 
    <h4 class="ms-4"> 
        Bootstrap5 Checks and radios Checkbox Toggle buttons 
    </h4> 
    <div class="container d-flex mb-4 p-4"> 
        <div class="btn-1 m-2"> 
            <input type="checkbox" class="btn-check" 
                id="btn-check" autocomplete="off"> 
            <label class="btn btn-primary" for="btn-check"> 
                Single toggle Checkbox Button 
            </label> 
        </div> 
        <div class="btn-2 m-2"> 
            <input type="checkbox" class="btn-check" 
                id="btn-check-2" checked autocomplete="off"> 
            <label class="btn btn-primary" for="btn-check-2"> 
                Checked Checkbox Button 
            </label> 
        </div> 
        <div class="btn-3 m-2"> 
            <input type="checkbox" class="btn-check" 
                id="btn-check-3" autocomplete="off" disabled> 
            <label class="btn btn-primary" for="btn-check-3"> 
                Disabled Checkbox Button</label> 
        </div> 
    </div>    
</body> 
</html>

Output:

Example 2: The code below demonstrates how we can use button groups with checkbox toggle buttons and also we can set sizes of the buttons:

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"> 
</head> 
<body> 
    <h1 class="m-4" class="text-success"> 
        GeeksforGeeks 
    </h1> 
    <h4 class="ms-4"> 
        Bootstrap5 Checks and radios Checkbox Toggle buttons 
    </h4> 
    <div class="container mb-4 p-4"> 
        <div class="btn-group mb-4"> 
            <input type="checkbox" class="btn-check" 
                    id="btn-check" autocomplete="off"> 
            <label class="btn btn-success btn-lg" 
                    for="btn-check"> 
                Single toggle Checkbox Button 
            </label> 
            <input type="checkbox" class="btn-check" 
                    id="btn-check-2" 
                    checked autocomplete="off"> 
            <label class="btn btn-success btn-lg" for="btn-check-2"> 
                    Checked Checkbox Button 
            </label> 
            <input type="checkbox" class="btn-check" 
                    id="btn-check-3" autocomplete="off" disabled> 
            <label class="btn btn-success btn-lg" for="btn-check-3"> 
                    Disabled Checkbox Button 
            </label> 
        </div> 
        <div class="btn-group m-4"> 
            <input type="checkbox" class="btn-check" 
                    id="btn-check-4" autocomplete="off"> 
            <label class="btn btn-secondary btn-sm" 
                    for="btn-check-4"> 
                    Single toggle Checkbox Button 
            </label> 
            <input type="checkbox" class="btn-check" 
                    id="btn-check-5" checked autocomplete="off"> 
            <label class="btn btn-secondary btn-sm"                     
                    for="btn-check-5"> 
                    Checked Checkbox Button 
            </label> 
            <input type="checkbox" class="btn-check" 
                    id="btn-check-6" autocomplete="off" disabled> 
            <label class="btn btn-secondary btn-sm" 
                    for="btn-check-6"> 
                    Disabled Checkbox Button 
            </label> 
        </div> 
    </div>    
</body> 
</html>