Bootstrap 5 checkboxes and radio buttons are form controls for binary and single-choice selections. This page covers 4 patterns — basic checkboxes, inline, radio groups and toggle switches — each ready to use.
Quick Setup
Checkboxes need only Bootstrap 5 CSS:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
Key Classes Reference
| Class | What It Does |
|---|---|
.form-check | Wrapper for checkbox or radio |
.form-check-input | Styles the checkbox or radio input |
.form-check-label | Styles the label |
.form-check-inline | Makes checkboxes display inline |
.form-switch | Toggle switch style |
checked | Pre-checks the input |
disabled | Disables the input |
role="switch" | Accessibility for toggle switches |
1. Bootstrap 5 Basic Checkboxes
Standard checkboxes with labels using form-check. Checked, unchecked and disabled states.
2. Bootstrap 5 Inline Checkboxes and Radios
Horizontal inline checkboxes and radio buttons using form-check-inline.
3. Bootstrap 5 Radio Button Groups
Radio buttons for single selection with descriptions. Only one option can be selected at a time.
4. Bootstrap 5 Toggle Switches
Toggle switch style checkboxes using form-check-input with form-switch wrapper.
Frequently Asked Questions
Set the checked property: document.getElementById('myCheck').checked = true. To toggle: checkbox.checked = !checkbox.checked. To listen for changes: checkbox.addEventListener('change', e => console.log(e.target.checked)).
Use querySelectorAll with :checked pseudo-class: const checked = [...document.querySelectorAll('input[type=checkbox]:checked')].map(cb => cb.value). Or use a named group: [...document.querySelectorAll('input[name=frameworks]:checked')].
Add form-switch class to the form-check wrapper and form-check-input to the checkbox input: <div class='form-check form-switch'><input class='form-check-input' type='checkbox' role='switch'></div>. The switch appearance is handled by Bootstrap CSS automatically.
Override the CSS variable: .form-check-input:checked { background-color: #fd4766; border-color: #fd4766; }. For custom check color in Bootstrap 5.3+ use --bs-form-check-bg-image with a custom SVG. The easiest approach is overriding background-color on :checked state.
Add a change listener to the master checkbox: masterCheck.addEventListener('change', function() { document.querySelectorAll('.child-check').forEach(cb => cb.checked = this.checked); }). Add a class like child-check to all sub-checkboxes for easy selection.
Need a Full Bootstrap 5 Admin Dashboard?
Get a complete Angular 21 + Bootstrap 5 dashboard with 50+ components — built by the same team behind BootstrapPlanet.
Browse Templates →Use code FIRST30 for 30% off your first purchase.