Bootstrap 5 Checks and radios Checks (original) (raw)

Last Updated : 12 Dec, 2022

Bootstrap 5 Checks box is a square box that is ticked when it is activated. It allows the user to select one or more options among all the limited choices.

The checkbox check is used to tick (select) the checkbox item. The check has two options that are given below:

• Indeterminate: The checkboxes can use the :indeterminate pseudo-class to set the check state to indeterminate. It can be set by using JavaScript.
• Disabled: It is used to disable the checkboxes. To disable the checkbox, we will use the disabled attribute.

Syntax:

Example 1: In this example, we will create checkbox elements.

HTML `

    <h2 class="text-center">
        Bootstrap5 Checks and radios Checks
    </h2>

    <h3>Select Technology</h3>
    <div class="form-check">
        <input class="form-check-input" 
            type="checkbox" value="" id="html">
        <label class="form-check-label" for="html">
            HTML
        </label>
    </div>

    <div class="form-check">
        <input class="form-check-input" 
            type="checkbox" value="" id="css">
        <label class="form-check-label" for="css">
            CSS
        </label>
    </div>

    <div class="form-check">
        <input class="form-check-input" 
            type="checkbox" value="" id="js">
        <label class="form-check-label" for="js">
            JavaScript
        </label>
    </div>
    
    <div class="form-check">
        <input class="form-check-input" type="checkbox" 
            value="" id="bootstrap" checked>
        <label class="form-check-label" for="bootstrap">
            Bootstrap
        </label>
    </div>
</div>

`

Output:

Example 2: In this example, we will create checkboxes with indeterminate states.

HTML `

    <h2 class="text-center">
        Bootstrap 5 Checks and radios Checks
    </h2>

    <h3>Select Technology</h3>
    <div class="form-check">
        <input class="form-check-input" 
            type="checkbox" value="" id="html">
        <label class="form-check-label" for="html">
            HTML
        </label>
    </div>

    <div class="form-check">
        <input class="form-check-input" 
            type="checkbox" value="" id="css">
        <label class="form-check-label" for="css">
            CSS
        </label>
    </div>

    <div class="form-check">
        <input class="form-check-input" 
            type="checkbox" value="" id="js">
        <label class="form-check-label" for="js">
            JavaScript
        </label>
    </div>

    <div class="form-check">
        <input class="form-check-input" type="checkbox" 
            value="" id="bootstrap" checked>
        <label class="form-check-label" for="bootstrap">
            Bootstrap
        </label>
    </div>
</div>

<script>
    var doc = document.getElementsByTagName("input");
    
    for (var i = 0; i < doc.length; i++) {
        doc[i].indeterminate = true;
    }
</script>

`

Output:

Example 3: In this example, we will create disabled states checkboxes.

HTML `

    <h2 class="text-center">
        Bootstrap 5 Checks and radios Checks
    </h2>

    <h3>Select Technology</h3>
    <div class="form-check">
        <input class="form-check-input" 
            type="checkbox" id="html" disabled>
        <label class="form-check-label" for="html">
            HTML
        </label>
    </div>

    <div class="form-check">
        <input class="form-check-input" 
            type="checkbox" id="css">
        <label class="form-check-label" for="css">
            CSS
        </label>
    </div>

    <div class="form-check">
        <input class="form-check-input" 
            type="checkbox" id="js">
        <label class="form-check-label" for="js">
            JavaScript
        </label>
    </div>

    <div class="form-check">
        <input class="form-check-input" type="checkbox" 
            value="" id="bootstrap" checked disabled>
        <label class="form-check-label" for="bootstrap">
            Bootstrap
        </label>
    </div>
</div>

`

Output:

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