Bootstrap 5 Input group Checkboxes and Radios

Last Updated : 31 Jul, 2024

Bootstrap 5 Input group Checkboxes and radios are used to pace the radios and checkboxes within an input group’s addon instead of text.

Bootstrap 5 Input group Checkboxes and Radios Classes: There are no specific classes to add checkboxes and radios. To create the checkboxes and radios we use the form-check-input class.

Syntax:

<div class="input-group">
    <div class="input-group-text">
        <input class="form-check-input" type="radio/checkbox" value="">
    </div>
 ...
</div>

Example 1: This example illustrates how to add checkboxes with the inputs. Here, we used the text input and added checkboxes with and without labels to the start and the end.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" 
          href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" />

    <!-- Bootstrap Javascript -->
    <script src=
"https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js">
    </script>
    <script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js">
    </script>
</head>

<body>
    <div class="container">
        <div class="my-4">
            <h1 class="text-success">GeeksforGeeks</h1>
            <strong>Bootstrap 5 Input group Checkboxes and Radios</strong>
        </div>

        <div class="input-group">
            <div class="input-group-text">
                <input class="form-check-input" type="checkbox" value="">
            </div>
            <input type="text" class="form-control" 
                   placeholder="Input with left checkbox with no text" />
        </div>

        <div class="input-group mt-3">
            <div class="input-group-text">
                <input class="form-check-input" id="ckbx1" 
                       type="checkbox" value="">
                <label for="ckbx1" class="d-block mx-2">
                    Accept Privacy Policy?
                </label>
            </div>
            <input type="text" class="form-control" 
                   placeholder="Input with left checkbox with text" />
        </div>

        <div class="input-group mt-3">
            <div class="input-group-text">
                <input class="form-check-input" type="checkbox" value="">
            </div>
            <input type="text" class="form-control" 
                   placeholder="Input with left and right checkbox" />
            <div class="input-group-text">
                <input class="form-check-input" type="checkbox" value="">
            </div>
        </div>
    </div>
</body>

</html>

Output:

Example 2: In this example, we added the radio buttons to the starting and the end of the text inputs.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" 
          href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" />

    <!-- Bootstrap Javascript -->
    <script src=
"https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js">
    </script>
    <script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js">
    </script>
</head>

<body>
    <div class="container">
        <div class="my-4">
            <h1 class="text-success">GeeksforGeeks</h1>
            <strong>
                Bootstrap 5 Input group Checkboxes and Radios
            </strong>
        </div>

        <div class="input-group">
            <div class="input-group-text">
                <input class="form-check-input" type="radio" value="">
            </div>
            <input type="text" class="form-control" 
                   placeholder="Input with left radio with no label" />
        </div>

        <div class="input-group mt-3">
            <div class="input-group-text">
                <input class="form-check-input" id="rad1" 
                       type="radio" value="">
                <label for="rad1" class="d-block mx-2">
                    Accept Privacy Policy?
                </label>
            </div>
            <input type="text" class="form-control" 
                   placeholder="Input with left radio and label" />
        </div>

        <div class="input-group mt-3">
            <input type="text" class="form-control" 
                   placeholder="Input with right radio and label" />
            <div class="input-group-text">
                <label for="rad1" class="d-block mx-2">
                    Accept Privacy Policy?
                </label>
                <input class="form-check-input" id="rad1"
                       type="radio" value="">
            </div>
        </div>

        <div class="input-group mt-3">
            <div class="input-group-text">
                <input class="form-check-input" type="radio" value="">
            </div>
            <input type="text" class="form-control" 
                   placeholder="Input with left and right radio" />
            <div class="input-group-text">
                <input class="form-check-input" type="radio" value="">
            </div>
        </div>
    </div>
</body>

</html>