Prev Next

BS5 Checks and Radios

Bootstrap 5 provides customized and styled checkboxes and radio buttons using the .form-check class.

Key Topics

Basic Checkboxes

Create checkboxes using the .form-check and .form-check-input classes.

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

Explanation: Use the .form-check-input class for checkboxes and pair it with .form-check-label for proper styling and accessibility.

Basic Radio Buttons

Create radio buttons using the .form-check and .form-check-input classes.

<div class="form-check">
    <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
    <label class="form-check-label" for="flexRadioDefault1">
        Default radio button 1
    </label>
</div>
<div class="form-check">
    <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault2">
    <label class="form-check-label" for="flexRadioDefault2">
        Default radio button 2
    </label>
</div>

Explanation: Group radio buttons by giving them the same name attribute, allowing only one selection per group.

Inline Checks and Radios

Display checkboxes and radio buttons inline using the .form-check-inline class.

<div class="form-check form-check-inline">
    <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
    <label class="form-check-label" for="inlineCheckbox1">Option 1</label>
</div>
<div class="form-check form-check-inline">
    <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
    <label class="form-check-label" for="inlineCheckbox2">Option 2</label>
</div>

Explanation: Add the .form-check-inline class to display checkboxes and radios in a single line.

Disabled Checks and Radios

Disable checkboxes and radio buttons by adding the disabled attribute to the <input> element.

<div class="form-check">
    <input class="form-check-input" type="checkbox" value="" id="flexCheckDisabled" disabled>
    <label class="form-check-label" for="flexCheckDisabled">
        Disabled checkbox
    </label>
</div>
<div class="form-check">
    <input class="form-check-input" type="radio" name="flexRadioDisabled" id="flexRadioDisabled1" disabled>
    <label class="form-check-label" for="flexRadioDisabled1">
        Disabled radio button
    </label>
</div>

Explanation: Add the disabled attribute to make inputs unselectable and visually indicate their disabled state.

Complete Checks and Radios Example

Below is a complete example showcasing various styles of checkboxes and radio buttons, including inline and disabled options.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap 5 Checks and Radios Demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container my-4">
        <h2 class="text-center">Bootstrap Checks and Radios</h2>
        <div class="form-check mb-2">
            <input class="form-check-input" type="checkbox" value="" id="defaultCheckbox">
            <label class="form-check-label" for="defaultCheckbox">Default Checkbox</label>
        </div>
        <div class="form-check mb-2">
            <input class="form-check-input" type="radio" name="exampleRadio" id="exampleRadio1">
            <label class="form-check-label" for="exampleRadio1">Radio Option 1</label>
        </div>
        <div class="form-check form-check-inline mb-2">
            <input class="form-check-input" type="checkbox" id="inlineCheckbox">
            <label class="form-check-label" for="inlineCheckbox">Inline Checkbox</label>
        </div>
        <div class="form-check mb-2">
            <input class="form-check-input" type="checkbox" value="" id="disabledCheckbox" disabled>
            <label class="form-check-label" for="disabledCheckbox">Disabled Checkbox</label>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Explanation: This example demonstrates different styles of checkboxes and radio buttons, including inline and disabled configurations.

Key Takeaways

  • Use .form-check and .form-check-input to style checkboxes and radios.
  • Group radio buttons with the same name attribute for exclusive selection.
  • Add .form-check-inline for inline display and disabled for unselectable inputs.
Prev Next