☑️ 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:

Class	Role
.form-check	Wraps the entire check/radio component
.form-check-input	Styles the checkbox itself
.form-check-label	Styles the associated label

---

✅ 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>

Class	Description
.form-switch	Converts checkbox into iOS-style switch
type="checkbox"	Remains a checkbox under the hood

---

✅ 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

Tip	Why It Matters
Use <label> with for	Improves accessibility
Group radios with the same name	Ensures exclusive selection
Use form-check-inline sparingly	Works best with short labels
Add validation for required options	Prevents form submission errors
Apply .form-switch only to checks	Not compatible with radio buttons

---

📌 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.

---

Share Now :