Bootstrap checkboxes and switches use the same native HTML checkbox underneath: .form-check and .form-check-input provide the standard presentation, while .form-switch makes a checkbox look like a toggle. This collection presents 25 practical patterns built from Bootstrap 5.3’s documented components and utilities; it is an editorial collection, not an official Bootstrap list of 25 examples.
Choose the control by meaning: use checkboxes for one or more selections, a switch for a binary setting, radios for one choice among several, and a button for an action. Every example below has a distinct input ID and an associated label or accessible name.
As an Amazon Associate I earn from qualifying purchases.
Choose the right Bootstrap control
| Use | Meaning | Bootstrap pattern |
|---|---|---|
| Checkbox | Select or clear one or more independent options | .form-check with .form-check-input |
| Switch | Turn one binary setting on or off | .form-check.form-switch with a checkbox input |
| Button-style checkbox | Select a choice using a button-like visual treatment while keeping checkbox semantics | .btn-check with a styled label |
| Radio group | Select exactly one option from a set | Radio inputs, optionally styled as button toggles |
Bootstrap’s checks and radios documentation describes a switch as a checkbox with .form-switch for toggle styling. The control remains a checkbox in HTML; consider role="switch" when it represents an on/off setting.
Recommended Free Tools
Basic checkbox states and layouts
1. Default checkbox
Use for an optional, independent selection. Pair the input and label with matching id and for values.
#1 Best Overall
<div class="form-check">
<input class="form-check-input" type="checkbox" value="updates" id="updatesCheck">
<label class="form-check-label" for="updatesCheck">Send me product updates</label>
</div>2. Prechecked checkbox
Use checked when the initial state is selected and that default is intentional.
<div class="form-check">
<input class="form-check-input" type="checkbox" value="weekly" id="weeklyCheck" checked>
<label class="form-check-label" for="weeklyCheck">Include the weekly summary</label>
</div>3. Disabled checkbox
A disabled option is visible but cannot be changed or submitted as an ordinary enabled control.
<div class="form-check">
<input class="form-check-input" type="checkbox" id="archivedCheck" disabled>
<label class="form-check-label" for="archivedCheck">Archived account</label>
</div>4. Checked and disabled checkbox
Use this to show a selected condition that is not editable in the current context.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
<div class="form-check">
<input class="form-check-input" type="checkbox" id="requiredCheck" checked disabled>
<label class="form-check-label" for="requiredCheck">Required security policy</label>
</div>5. Indeterminate checkbox
Use the indeterminate state to represent a parent selection where only some children are selected. HTML has no indeterminate attribute, so set the DOM property with JavaScript.
<div class="form-check">
<input class="form-check-input" type="checkbox" id="allFilesCheck">
<label class="form-check-label" for="allFilesCheck">Select all files</label>
</div>
<script>
document.getElementById('allFilesCheck').indeterminate = true;
</script>Set or clear the property again when the child selection changes; it is a visual and programmatic state, not a replacement for updating the checked state.
6. Inline checkboxes
Use .form-check-inline for a short set of related choices that fit naturally on one line.
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="formatPdf" value="pdf">
<label class="form-check-label" for="formatPdf">PDF</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="formatCsv" value="csv">
<label class="form-check-label" for="formatCsv">CSV</label>
</div>7. Reversed checkbox
Use .form-check-reverse when the label should appear before the control, such as in a compact settings list.
<div class="form-check form-check-reverse">
<input class="form-check-input" type="checkbox" id="compactModeCheck">
<label class="form-check-label" for="compactModeCheck">Compact mode</label>
</div>8. Checkbox without visible label text
An icon-only or table checkbox still needs an accessible name. Here aria-label supplies one because there is no visible text label.
<input class="form-check-input" type="checkbox" id="selectInvoice" aria-label="Select invoice INV-1042">Bootstrap switch examples
9. Basic switch
Use for a setting that can be switched on or off. The class changes the presentation, not the underlying checkbox semantics.
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="emailAlertsSwitch">
<label class="form-check-label" for="emailAlertsSwitch">Email alerts</label>
</div>10. Checked switch
Add checked to make the setting initially on.
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="backupSwitch" checked>
<label class="form-check-label" for="backupSwitch">Automatic backup</label>
</div>11. Disabled switch
Use the native disabled state when the setting is unavailable and cannot be changed.
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="syncSwitch" disabled>
<label class="form-check-label" for="syncSwitch">Cloud sync</label>
</div>12. Checked and disabled switch
This displays an active setting that the current user cannot alter.
The Tool Desk
Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="encryptionSwitch" checked disabled>
<label class="form-check-label" for="encryptionSwitch">Device encryption</label>
</div>13. Reversed switch
Combine the switch and reverse modifier to place its label before the control.
<div class="form-check form-switch form-check-reverse">
<input class="form-check-input" type="checkbox" role="switch" id="locationSwitch">
<label class="form-check-label" for="locationSwitch">Location access</label>
</div>14. Switch with helper text
Keep the control’s name concise and associate explanatory text with aria-describedby.
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="digestSwitch" aria-describedby="digestHelp">
<label class="form-check-label" for="digestSwitch">Monthly digest</label>
<div class="form-text" id="digestHelp">Receive one summary email at the start of each month.</div>
</div>15. Switch in a settings row
This editorial layout uses Bootstrap flex utilities to align the setting description and control.
<div class="d-flex justify-content-between align-items-center gap-3 border-bottom py-3">
<div>
<label class="form-check-label fw-semibold" for="darkThemeSwitch">Dark theme</label>
<div class="form-text" id="darkThemeHelp">Use a darker color scheme on this device.</div>
</div>
<div class="form-check form-switch m-0">
<input class="form-check-input" type="checkbox" role="switch" id="darkThemeSwitch" aria-describedby="darkThemeHelp">
</div>
</div>16. State described without relying on color
For a state that needs a visible text cue, update a separate status element when the input changes. The status is not part of the control’s accessible name.
PC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11Crashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minuteRank #4
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="publicProfileSwitch" aria-describedby="profileState">
<label class="form-check-label" for="publicProfileSwitch">Public profile</label>
<span id="profileState" class="form-text">Off</span>
</div>
<script>
const profileSwitch = document.getElementById('publicProfileSwitch');
const profileState = document.getElementById('profileState');
const updateProfileState = () => { profileState.textContent = profileSwitch.checked ? 'On' : 'Off'; };
profileSwitch.addEventListener('change', updateProfileState);
updateProfileState();
</script>17. Native-style switch enhancement
Bootstrap documents the optional switch attribute as progressive enhancement for haptic feedback in iOS Safari 17.4 and later; it does not create Bootstrap styling. The documentation notes Safari 17.4 and later on macOS and iOS can present native-style switches, while other browsers fall back to checkbox appearance. Browser support can change, so consult the Bootstrap component documentation for the current caveat.
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="nativeSwitch" switch>
<label class="form-check-label" for="nativeSwitch">Native-style switch where supported</label>
</div>Button-like checkbox and radio patterns
18. Button-style checkbox
Use .btn-check when a selectable option should look like a button but remain a checkbox to assistive technology.
<input type="checkbox" class="btn-check" id="topicDesign" autocomplete="off">
<label class="btn btn-outline-primary" for="topicDesign">Design</label>19. Checked button-style checkbox
Preselect an option by adding checked to the input.
<input type="checkbox" class="btn-check" id="topicNews" autocomplete="off" checked>
<label class="btn btn-outline-primary" for="topicNews">News</label>20. Disabled button-style checkbox
Disable both the hidden input and label styling so the unavailable state is apparent visually and programmatically.
Do these 3 things before closing this tab:
1Repair Windows errors before they cause bigger problems2Scan for outdated or missing drivers - takes under a minute3Clear out junk files and repair common Windows errors<input type="checkbox" class="btn-check" id="topicOffers" autocomplete="off" disabled>
<label class="btn btn-outline-secondary" for="topicOffers">Offers unavailable</label>21. Grouped checkbox toggles
Use checkbox toggles when users may select multiple values. Give the group a name and each option its own label. Bootstrap 5.0 documents this button-group pattern in its button group guide.
<fieldset>
<legend class="fs-6">Choose file types</legend>
<div class="btn-group" role="group" aria-label="File types">
<input type="checkbox" class="btn-check" id="typeImage" autocomplete="off">
<label class="btn btn-outline-primary" for="typeImage">Images</label>
<input type="checkbox" class="btn-check" id="typeVideo" autocomplete="off">
<label class="btn btn-outline-primary" for="typeVideo">Videos</label>
</div>
</fieldset>22. Radio-style toggle group
Use radios—not switches—when exactly one option must be selected. This button-like treatment is an editorial composition of Bootstrap’s radio inputs and button classes.
<fieldset>
<legend class="fs-6">Display density</legend>
<div class="btn-group" role="group" aria-label="Display density">
<input type="radio" class="btn-check" name="density" id="densityComfortable" autocomplete="off" checked>
<label class="btn btn-outline-primary" for="densityComfortable">Comfortable</label>
<input type="radio" class="btn-check" name="density" id="densityCompact" autocomplete="off">
<label class="btn btn-outline-primary" for="densityCompact">Compact</label>
</div>
</fieldset>Validation and composed checkbox examples
23. Required confirmation checkbox
Use native required when the user must check the box before submitting. Provide an explicit label explaining the confirmation.
<div class="form-check">
<input class="form-check-input" type="checkbox" value="confirmed" id="termsConfirm" required>
<label class="form-check-label" for="termsConfirm">I agree to the terms of service</label>
</div>24. Checkbox in a list group
This editorial combination puts a standard checkbox inside a clickable-looking list row; keep the label associated with the input so the row text remains the control’s name.
<div class="list-group">
<label class="list-group-item d-flex align-items-center gap-2" for="taskReview">
<input class="form-check-input m-0" type="checkbox" id="taskReview" value="review">
Review the draft
</label>
</div>25. Custom color checkbox or switch
Bootstrap does not define a named custom-color checkbox variant here; this example uses a CSS variable override. Confirm that the selected foreground and background colors retain sufficient contrast in checked, focus, and disabled states.
<style>
.accent-check { --bs-form-check-bg: #fff; }
.accent-check:checked { background-color: #6f42c1; border-color: #6f42c1; }
</style>
<div class="form-check">
<input class="form-check-input accent-check" type="checkbox" id="accentChoice">
<label class="form-check-label" for="accentChoice">Use the violet accent</label>
</div>Accessibility checks before shipping
Bootstrap’s forms guidance says every form control needs an appropriate accessible name. A visible associated label is the normal choice; use a concise ARIA name when no visible label is appropriate, and name related control groups with a fieldset and legend or an accessible group label.
Quick Recap
- Keep every
idunique and its visible label’sforvalue identical. - Use checkbox semantics for multi-select, switch semantics for an on/off setting, and radio semantics for a mutually exclusive choice.
- For button-like checkboxes, use
.btn-checkand a label; do not replace them with Bootstrap’s button plugin unless the interaction is genuinely a button action. - Check keyboard focus visibility, text contrast, and checked/disabled states in the actual color combination. Bootstrap notes some default palette combinations may not provide enough contrast.
- For an indeterminate parent checkbox, keep its state synchronized with the child selections using JavaScript.
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
