☑️ Bootstrap 5 – Checks & Radios: Build Accessible Selection Inputs

Introduction – What Are Checks and Radios in Bootstrap 5?

In Bootstrap 5, checkboxes and radio buttons are fully customizable using .form-check, .form-check-input, and .form-check-label. These components allow users to select multiple options (checkboxes) or choose a single option from a set (radio buttons).

In this guide, you’ll learn:

• How to create checkboxes and radio buttons using Bootstrap 5
• Customize alignment, layout, and switch-style toggles
• Style disabled and inline check/radio groups
• Apply accessibility and validation enhancements

Example 1 – Basic Checkbox

<div class="form-check">
  <input class="form-check-input" type="checkbox" id="check1">
  <label class="form-check-label" for="check1">I agree to the terms</label>
</div>

Explanation:

Example 2 – Basic Radio Button

<div class="form-check">
  <input class="form-check-input" type="radio" name="gender" id="radioMale">
  <label class="form-check-label" for="radioMale">Male</label>
</div>

<div class="form-check">
  <input class="form-check-input" type="radio" name="gender" id="radioFemale">
  <label class="form-check-label" for="radioFemale">Female</label>
</div>

• Use the same name attribute to group radio buttons.

Example 3 – Inline Checks & Radios

<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheck1">
  <label class="form-check-label" for="inlineCheck1">One</label>
</div>

<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheck2">
  <label class="form-check-label" for="inlineCheck2">Two</label>
</div>

• Add .form-check-inline for horizontal alignment.

Example 4 – Disabled Check & Radio

<div class="form-check">
  <input class="form-check-input" type="checkbox" id="checkDisabled" disabled>
  <label class="form-check-label" for="checkDisabled">Disabled Checkbox</label>
</div>

<div class="form-check">
  <input class="form-check-input" type="radio" name="status" id="radioDisabled" disabled>
  <label class="form-check-label" for="radioDisabled">Disabled Radio</label>
</div>

• Use the disabled attribute on the input for read-only state.

Example 5 – Switch Style Toggle

<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" id="toggleSwitch">
  <label class="form-check-label" for="toggleSwitch">Enable notifications</label>
</div>

Example 6 – Custom Validation for Checks

<form class="needs-validation" novalidate>
  <div class="form-check mb-3">
    <input class="form-check-input" type="checkbox" id="agreeCheck" required>
    <label class="form-check-label" for="agreeCheck">Accept terms and conditions</label>
    <div class="invalid-feedback">You must accept the terms to proceed.</div>
  </div>
  <button class="btn btn-primary" type="submit">Submit</button>
</form>

<script>
  (() => {
    const forms = document.querySelectorAll('.needs-validation');
    forms.forEach(form => {
      form.addEventListener('submit', event => {
        if (!form.checkValidity()) {
          event.preventDefault();
          event.stopPropagation();
        }
        form.classList.add('was-validated');
      });
    });
  })();
</script>

Best Practices for Checks & Radios

Summary – Clean, Interactive Selection Inputs

Bootstrap 5 makes it easy to style and structure checkboxes and radios using a consistent and accessible framework. From vertical stacks to inline groups and toggle switches, you can design modern selection interfaces in seconds.

Key Takeaways:

• Use .form-check, .form-check-input, and .form-check-label
• .form-switch turns checkboxes into toggle switches
• Inline versions are created with .form-check-inline
• Validation can be added using required + .needs-validation
• Always group radios with the same name

Ideal for settings pages, surveys, signup forms, and interactive dashboards.

FAQs – Bootstrap 5 Checks and Radios

What’s the difference between checkbox and radio?
Checkboxes allow multiple selections; radios are for single-choice fields.

How can I make a toggle switch in Bootstrap 5?
Add .form-switch to a .form-check container and use type="checkbox".

Can I align checks/radios horizontally?
Yes, by adding .form-check-inline to the .form-check container.

Are these inputs accessible?
Yes—use proper <label> tags and aria-* attributes if needed.