Bootstrap - Checkboxes and Radio buttons
Bootstrap 5 offers enhanced styling for checkboxes and radio buttons, making them visually appealing and easy to integrate into any form. These form controls are essential for user input where multiple selections (checkboxes) or single selections (radio buttons) are required.
In this guide, we'll explore how to use Bootstrap 5 to style checkboxes and radio buttons, including options for custom styling, inline grouping, and validation.
Basic Checkboxes
Bootstrap 5 uses the .form-check class to style checkboxes.
Example: Basic Checkbox
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap 5 Checkboxes Example</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-5">
<h2>Basic Checkbox</h2>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="defaultCheckbox">
<label class="form-check-label" for="defaultCheckbox">
Default Checkbox
</label>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Explanation
The .form-check class wraps the checkbox input and label.
The .form-check-input class is applied to the <input> element.
The .form-check-label class is used to style the label.
Basic Radio Buttons
Bootstrap also provides classes for radio buttons, similar to checkboxes.
Example: Basic Radio Button
<div class="container mt-5">
<h2>Basic Radio Button</h2>
<div class="form-check">
<input class="form-check-input" type="radio" name="radioOptions" id="radio1" 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="radioOptions" id="radio2">
<label class="form-check-label" for="radio2">
Radio Option 2
</label>
</div>
</div>
Explanation
The name attribute ensures only one radio button can be selected at a time within the group.
checked attribute pre-selects a radio button.
Inline Checkboxes and Radio Buttons
You can display checkboxes and radio buttons inline using the .form-check-inline class.
Example: Inline Checkboxes
<div class="container mt-5">
<h2>Inline Checkboxes</h2>
<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>
</div>
Example: Inline Radio Buttons
<div class="container mt-5">
<h2>Inline Radio Buttons</h2>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" 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="inlineRadioOptions" id="inlineRadio2" value="option2">
<label class="form-check-label" for="inlineRadio2">Option 2</label>
</div>
</div>
Explanation
The .form-check-inline class displays the inputs next to each other.
Custom Checkboxes and Radio Buttons
Bootstrap 5 offers custom styles for checkboxes and radio buttons using the .form-check class.
Example: Custom Checkbox
<div class="container mt-5">
<h2>Custom Checkbox</h2>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="customCheckbox" value="">
<label class="form-check-label" for="customCheckbox">
Custom Styled Checkbox
</label>
</div>
</div>
Example: Custom Radio Button
<div class="container mt-5">
<h2>Custom Radio Button</h2>
<div class="form-check">
<input class="form-check-input" type="radio" name="customRadioGroup" id="customRadio1">
<label class="form-check-label" for="customRadio1">Custom Radio 1</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="customRadioGroup" id="customRadio2">
<label class="form-check-label" for="customRadio2">Custom Radio 2</label>
</div>
</div>
Checkboxes and Radio Buttons with Validation
Bootstrap 5 supports form validation states with checkboxes and radio buttons using .is-valid and .is-invalid classes.
Example: Validated Checkboxes
<div class="container mt-5">
<h2>Validated Checkboxes</h2>
<div class="form-check">
<input class="form-check-input is-valid" type="checkbox" id="validCheckbox">
<label class="form-check-label" for="validCheckbox">
Valid Checkbox
</label>
</div>
<div class="form-check">
<input class="form-check-input is-invalid" type="checkbox" id="invalidCheckbox">
<label class="form-check-label" for="invalidCheckbox">
Invalid Checkbox
</label>
</div>
</div>
Disabled Checkboxes and Radio Buttons
You can disable checkboxes and radio buttons by adding the disabled attribute to the input element.
Example: Disabled Checkbox and Radio Button
<div class="container mt-5">
<h2>Disabled Controls</h2>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="disabledCheckbox" disabled>
<label class="form-check-label" for="disabledCheckbox">Disabled Checkbox</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="disabledRadioGroup" id="disabledRadio" disabled>
<label class="form-check-label" for="disabledRadio">Disabled Radio</label>
</div>
</div>
Conclusion
Bootstrap 5 simplifies the process of styling checkboxes and radio buttons, offering a variety of options to fit different design needs. From basic to custom styling, inline controls, and validation states, Bootstrap provides a wide range of utilities to enhance form controls.
Key Takeaways:
Feature Description
.form-check Wraps checkboxes and radio buttons
.form-check-input Styles the input element
.form-check-label Styles the associated label
.form-check-inline Displays controls inline
.is-valid & .is-invalid Validation states for inputs
disabled Disables the input
By using these classes, you can quickly and easily create professional-looking forms with checkboxes and radio buttons that are responsive and consistent across different devices.
