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 →iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
Bootstrap checkboxes and switches use native HTML checkbox inputs; Bootstrap styles them with classes such as .form-check, .form-check-input, .form-check-label, and .form-switch. The 25 patterns below are an editorial collection built from Bootstrap 5.3’s documented components—not an official Bootstrap list of 25 examples. Each snippet is an independent pattern, so keep its input IDs unique when combining examples on a page.
Choose the right control before styling it
Use a checkbox when people can select one or more items. Use a switch for a binary setting that takes effect immediately, such as enabling notifications. Use radios when people must choose exactly one option from a set. A button-like checkbox is still a checkbox; reserve a button for an action rather than a persistent selection.
| Pattern | Meaning and semantics | Good fit |
|---|---|---|
| Checkbox | Checkbox; permits one or more selections | Preferences in a form, filters, or a checklist |
| Switch | Checkbox presented as an on/off setting; consider role="switch" for a genuine binary setting |
A setting that can be turned on or off |
| Button-like checkbox | Checkbox, even though its label looks like a button | A selectable option needing compact, button-like styling |
| Radio toggle | Radio; exactly one option in the group can be selected | A choice among mutually exclusive options |
Bootstrap’s documented checkbox and switch markup is at Checks and radios. Its form guidance explains accessible names in Forms. Every input below has a connected label or an explicit accessible name; related controls should also have a group name.
Basic checkbox examples
1. Default checkbox
Use for a single optional choice. The matching for and id connect the visible label to the native checkbox.
#1 Best Overall
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="terms">
<label class="form-check-label" for="terms">Accept the terms</label>
</div>2. Prechecked checkbox
Add the native checked attribute when the option should be selected initially.
<div class="form-check">
<input class="form-check-input" type="checkbox" value="yes" id="weekly-digest" checked>
<label class="form-check-label" for="weekly-digest">Send me a weekly digest</label>
</div>3. Disabled checkbox
Use disabled when an option cannot currently be changed. A label still communicates what the unavailable control represents.
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="archived-option" disabled>
<label class="form-check-label" for="archived-option">Archived option</label>
</div>4. Checked and disabled checkbox
This shows a selected value that is not editable in the current context.
Free tools Windows power users keep installed
One-click scans. No signup required.
<div class="form-check">
<input class="form-check-input" type="checkbox" value="enabled" id="required-feature" checked disabled>
<label class="form-check-label" for="required-feature">Required feature</label>
</div>5. Indeterminate checkbox
Use an indeterminate checkbox to represent a mixed selection, often a parent item whose children are only partly selected. HTML has no indeterminate attribute; set the DOM property with JavaScript.
<div class="form-check">
<input class="form-check-input" type="checkbox" id="select-all-items">
<label class="form-check-label" for="select-all-items">Select all items</label>
</div>
<script>
document.getElementById('select-all-items').indeterminate = true;
</script>6. Inline checkboxes
Add .form-check-inline to place short choices on the same line. The controls remain separate checkboxes, so multiple can be selected.
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="format-email" value="email">
<label class="form-check-label" for="format-email">Email</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="format-sms" value="sms">
<label class="form-check-label" for="format-sms">SMS</label>
</div>7. Reversed checkbox
Use .form-check-reverse to move the control to the opposite side of its label.
<div class="form-check form-check-reverse">
<input class="form-check-input" type="checkbox" id="reverse-label">
<label class="form-check-label" for="reverse-label">Show control on the right</label>
</div>8. Checkbox without visible text
When the design has no visible label, provide an accessible name with aria-label. Prefer a visible label when the interface permits it.
<div class="form-check">
<input class="form-check-input" type="checkbox" id="mark-favorite" aria-label="Mark this item as a favorite">
</div>Bootstrap switch examples
A Bootstrap switch uses checkbox markup inside .form-check.form-switch. Add role="switch" when the control represents a genuine on/off setting. The optional switch attribute is a separate, progressive enhancement for haptic feedback on iOS Safari 17.4 and later; it does not change Bootstrap styling. Safari 17.4 and later on macOS and iOS support native-style switches, while other browsers fall back to checkbox appearance. See Bootstrap’s notes in its switch documentation.
9. Basic switch
Use for a setting that can be turned on or off.
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="dark-mode">
<label class="form-check-label" for="dark-mode">Dark mode</label>
</div>10. Checked switch
Add checked to show that a setting begins enabled.
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="email-alerts" checked>
<label class="form-check-label" for="email-alerts">Email alerts</label>
</div>11. Disabled switch
Disable a setting that cannot currently be changed.
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="managed-setting" disabled>
<label class="form-check-label" for="managed-setting">Managed by your administrator</label>
</div>12. Checked and disabled switch
This communicates that a setting is on but locked.
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="mandatory-setting" checked disabled>
<label class="form-check-label" for="mandatory-setting">Mandatory security setting</label>
</div>13. Reversed switch
Combine .form-switch with .form-check-reverse to position the switch opposite its label.
<div class="form-check form-switch form-check-reverse">
<input class="form-check-input" type="checkbox" role="switch" id="reverse-notifications">
<label class="form-check-label" for="reverse-notifications">Notifications</label>
</div>14. Switch with helper text
Keep the control’s accessible name concise and place extra explanation in helper text associated through aria-describedby.
Quick wins for a faster PC:
Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Repair Windows errors before they cause bigger problemsFix Now →<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="product-updates" aria-describedby="updates-help">
<label class="form-check-label" for="product-updates">Product updates</label>
<div class="form-text" id="updates-help">Receive occasional announcements about new features.</div>
</div>15. Switch in a settings row
A flex row is an editorial layout variation using Bootstrap utilities; it is not a separately named switch component.
<div class="d-flex justify-content-between align-items-center gap-3">
<div>
<label class="form-check-label" for="location-sharing">Location sharing</label>
<div class="form-text" id="location-help">Allow this app to use your location.</div>
</div>
<div class="form-check form-switch m-0">
<input class="form-check-input" type="checkbox" role="switch" id="location-sharing" aria-describedby="location-help">
</div>
</div>16. Switch with a descriptive state label
A switch label should name the setting, not rely on changing text such as “On” or “Off” to identify it. If status text is useful visually, keep the setting’s label connected to the input.
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="auto-save">
<label class="form-check-label" for="auto-save">Automatically save changes</label>
<div class="form-text">Turn on to save edits as you work.</div>
</div>Button-like checkbox and radio examples
Bootstrap’s .btn-check visually pairs a hidden checkbox or radio input with a styled label. Assistive technology still treats the checkbox as a checkbox. Use this for selections, not for commands; Bootstrap’s button plugin behaves and is announced as a button instead. Bootstrap documents these patterns in Checks and radios.
17. Button-style checkbox
Use a button-like label for a selectable option such as a filter.
Rank #4
<input type="checkbox" class="btn-check" id="filter-open" autocomplete="off">
<label class="btn btn-outline-primary" for="filter-open">Open</label>18. Checked button-style checkbox
Set checked to show a selected toggle on initial render.
<input type="checkbox" class="btn-check" id="filter-assigned" autocomplete="off" checked>
<label class="btn btn-outline-primary" for="filter-assigned">Assigned to me</label>19. Disabled button-style checkbox
Disable the input and add the disabled styling to its label so the visual treatment matches the unavailable state.
<input type="checkbox" class="btn-check" id="filter-closed" autocomplete="off" disabled>
<label class="btn btn-outline-secondary disabled" for="filter-closed">Closed</label>20. Grouped checkbox toggles
Checkbox buttons remain independently selectable. Give the group an accessible name with a fieldset and legend; a Bootstrap button group can arrange the controls.
<fieldset>
<legend class="fs-6">Filter by status</legend>
<div class="btn-group" role="group" aria-label="Status filters">
<input type="checkbox" class="btn-check" id="status-new" autocomplete="off">
<label class="btn btn-outline-primary" for="status-new">New</label>
<input type="checkbox" class="btn-check" id="status-active" autocomplete="off">
<label class="btn btn-outline-primary" for="status-active">Active</label>
</div>
</fieldset>21. Radio-style toggle group
When only one option can be chosen, use radios rather than switches or checkboxes. Bootstrap’s button-group pattern supports this exclusive choice.
Do these 3 things before closing this tab:
1Clear out junk files and repair common Windows errors2Scan for outdated or missing drivers - takes under a minute3Repair Windows errors before they cause bigger problems<fieldset>
<legend class="fs-6">Choose a view</legend>
<div class="btn-group" role="group" aria-label="Choose a view">
<input type="radio" class="btn-check" name="view-choice" id="view-list" autocomplete="off" checked>
<label class="btn btn-outline-primary" for="view-list">List</label>
<input type="radio" class="btn-check" name="view-choice" id="view-grid" autocomplete="off">
<label class="btn btn-outline-primary" for="view-grid">Grid</label>
</div>
</fieldset>Bootstrap’s official grouped toggle reference is the version 5.0 Button group page; check your project’s Bootstrap version when using version-specific documentation.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Form and layout variations
22. Required consent checkbox
Use the native required attribute when the user must check a box before submitting. Keep any validation feedback connected to the control in your form implementation.
<div class="form-check">
<input class="form-check-input" type="checkbox" id="privacy-consent" required>
<label class="form-check-label" for="privacy-consent">I agree to the privacy notice</label>
</div>23. Checkbox in a list group
This combines Bootstrap’s list-group layout with a form check. It is a compositional pattern, rather than a distinct checkbox variant.
<ul class="list-group">
<li class="list-group-item">
<div class="form-check m-0">
<input class="form-check-input" type="checkbox" id="task-one">
<label class="form-check-label" for="task-one">Review the release notes</label>
</div>
</li>
</ul>24. Checkbox with a custom color
Bootstrap utilities can customize the checked color; the following is an editorial styling variation. Check contrast in the actual context rather than assuming a framework palette is sufficient.
<div class="form-check">
<input class="form-check-input bg-success border-success" type="checkbox" id="green-option" checked>
<label class="form-check-label" for="green-option">Enable the green option</label>
</div>25. Custom-sized switch
Bootstrap does not define this as a dedicated switch size. This editorial example uses a local CSS class to scale the input; test alignment and focus appearance in the surrounding layout.
Quick Recap
<style>
.large-switch .form-check-input {
width: 3em;
height: 1.5em;
}
</style>
<div class="form-check form-switch large-switch">
<input class="form-check-input" type="checkbox" role="switch" id="large-notifications">
<label class="form-check-label" for="large-notifications">Large notifications switch</label>
</div>Accessibility and implementation checks
- Give every control an accessible name. A visible associated label is usually the clearest option; an unlabeled control needs another accessible name.
- Use distinct
idvalues for every input on the page and point each label’sforattribute to the corresponding ID. - Name related controls as a group, preferably with
<fieldset>and<legend>. For custom grouping, ensure the group has an accessible name. - Match semantics to purpose: checkbox for one-or-more selections, switch for a binary setting, radio for one-of-many choices, and button for an action.
- Verify color contrast and focus visibility for customized or palette-based treatments. Bootstrap cautions that some default color combinations may not provide sufficient contrast in every context.
- For indeterminate state, set the input’s JavaScript
indeterminateproperty; it is not an HTML attribute.
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.
