Bootstrap 5 Checkboxes and Radio Buttons

Checkboxes and radio buttons are essential components of web forms, offering users a simple way to make choices. Bootstrap 5 provides a sleek and responsive way to style these form controls, making them visually appealing and consistent across devices.

In this tutorial, we’ll explore how to use and customize checkboxes and radio buttons in Bootstrap 5, complete with examples and best practices.

Overview of Bootstrap 5 Checkboxes and Radio Buttons

Checkboxes allow users to select one or more options from a list, while radio buttons are used to select a single option. Bootstrap 5 enhances the default HTML checkboxes and radio buttons with modern styling, including custom designs, inline layouts, and support for validation feedback.

Bootstrap 5 Checkboxes

Basic Checkbox Example

To create a basic checkbox, use the form-check class.

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

Explanation:

  • form-check: Wraps the checkbox input and label for proper spacing and alignment.
  • form-check-input: Styles the checkbox input.
  • form-check-label: Styles the associated label.

Inline Checkboxes

To display checkboxes inline, use the form-check-inline class.

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

Disabled Checkboxes

You can disable checkboxes by adding the disabled attribute to the input or wrapping the entire form-check in a disabled fieldset.

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

Bootstrap 5 Radio Buttons

Basic Radio Button Example

To create a basic radio button, use the same form-check structure.

<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="radio1" value="option1" checked>
  <label class="form-check-label" for="radio1">
    Radio Option 1
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="radio2" value="option2">
  <label class="form-check-label" for="radio2">
    Radio Option 2
  </label>
</div>

Explanation:

  • The name attribute groups radio buttons, ensuring only one can be selected at a time.

Inline Radio Buttons

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

<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadios" id="inlineRadio1" value="option1">
  <label class="form-check-label" for="inlineRadio1">Option 1</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadios" id="inlineRadio2" value="option2">
  <label class="form-check-label" for="inlineRadio2">Option 2</label>
</div>

Disabled Radio Buttons

You can disable radio buttons in the same way as checkboxes.

<div class="form-check">
  <input class="form-check-input" type="radio" name="disabledRadios" id="disabledRadio1" value="option1" disabled>
  <label class="form-check-label" for="disabledRadio1">
    Disabled Radio Option 1
  </label>
</div>

Custom Checkboxes and Radio Buttons

Bootstrap 5 allows you to use custom styles for checkboxes and radio buttons by adding the custom-control classes.

Custom Checkbox

<div class="form-check">
  <input class="form-check-input" type="checkbox" id="customCheck1">
  <label class="form-check-label" for="customCheck1">Custom Checkbox</label>
</div>

Custom Radio Button

<div class="form-check">
  <input class="form-check-input" type="radio" name="customRadios" id="customRadio1" value="option1">
  <label class="form-check-label" for="customRadio1">Custom Radio</label>
</div>

Bootstrap 5 Checkboxes and Radio Buttons with Validation

Bootstrap 5 supports validation for checkboxes and radio buttons, making it easy to ensure user input meets your form’s requirements.

Validation Example

<form class="needs-validation" novalidate>
  <div class="mb-3">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="validationCheck" required>
      <label class="form-check-label" for="validationCheck">
        Agree to terms and conditions
      </label>
      <div class="invalid-feedback">
        You must agree before submitting.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit</button>
</form>

Styling Checkboxes and Radio Buttons

You can customize Bootstrap 5 checkboxes and radio buttons using custom CSS.

Example:

<style>
  .custom-check {
    accent-color: #007bff; /* Changes the checkbox/radio button color */
  }
</style>

<div class="form-check">
  <input class="form-check-input custom-check" type="checkbox" id="styledCheck">
  <label class="form-check-label" for="styledCheck">Styled Checkbox</label>
</div>

FAQs About Bootstrap 5 Checkboxes and Radio Buttons

1. Can I add icons to checkboxes or radio buttons?

Yes, you can use custom HTML or plugins like FontAwesome to add icons near checkboxes or radio buttons.

2. How do I make my form mobile-friendly?

Bootstrap 5’s grid system ensures that checkboxes and radio buttons are fully responsive. Use col classes to adjust layouts based on screen size.

Conclusion

Bootstrap 5 makes it easy to create stylish and functional checkboxes and radio buttons that work seamlessly on all devices. Whether you’re building basic forms or need advanced validation, Bootstrap’s robust features and customization options have you covered.

Leave a Comment