Skip to content

Bootstrap Checks and Radios

Checkboxes and radio buttons get custom, accessible styling through Bootstrap's form-check classes. This lesson covers standard checks, radios, switches, and inline variants.

Bootstrap Checks and Radios Overview

Bootstrap wraps a native <input type="checkbox"> or <input type="radio"> together with its <label> inside a .form-check container, applying custom styling to the input via form-check-input and consistent spacing to the label via form-check-label, while keeping the native accessibility behavior intact.

Variants include form-check-inline for horizontally arranged options, and the form-switch modifier, which turns a checkbox into a toggle-switch style control commonly used for settings and preferences.

Concept Description Common Usage
.form-check Wrapper for a single checkbox or radio with its label Standard selection controls
.form-check-input Styled native checkbox or radio input Custom-looking but fully native accessible input
.form-check-inline Displays multiple checks/radios horizontally Short lists of options in a row
.form-switch Renders a checkbox as a toggle switch On/off settings and preferences
Grouped radios (shared name) Radios sharing a name attribute Mutually exclusive option groups

Bootstrap Checks and Radios Example

<div class="form-check">
  <input class="form-check-input" type="checkbox" id="terms">
  <label class="form-check-label" for="terms">I agree to the terms</label>
</div>

<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="plan" id="planBasic" value="basic">
  <label class="form-check-label" for="planBasic">Basic</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="plan" id="planPro" value="pro">
  <label class="form-check-label" for="planPro">Pro</label>
</div>

<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" role="switch" id="notifications">
  <label class="form-check-label" for="notifications">Enable notifications</label>
</div>

The first checkbox uses the standard vertical form-check layout. The two radio buttons share the same name attribute, making them mutually exclusive, and form-check-inline places them side by side. The final example uses form-switch to render a checkbox as a toggle switch, with role="switch" reinforcing its accessible semantics.

Top 10 Bootstrap Checks and Radios Examples

These are the check and radio patterns you'll use for almost every selection control.

# Example Syntax
1 Basic checkbox <input class="form-check-input" type="checkbox" id="a"><label class="form-check-label" for="a">Option</label>
2 Basic radio <input class="form-check-input" type="radio" name="g" id="a"><label class="form-check-label" for="a">Option</label>
3 Inline checkbox group <div class="form-check form-check-inline">...</div>
4 Toggle switch <div class="form-check form-switch"><input class="form-check-input" type="checkbox" role="switch"></div>
5 Disabled checkbox <input class="form-check-input" type="checkbox" disabled>
6 Pre-checked checkbox <input class="form-check-input" type="checkbox" checked>
7 Checkbox without label <input class="form-check-input" type="checkbox" aria-label="Select row">
8 Reversed check layout <div class="form-check form-check-reverse">...</div>
9 Radio group vertical list <div class="form-check">...</div><div class="form-check">...</div>
10 Switch with helper text <div class="form-check form-switch"><input class="form-check-input" type="checkbox"><label class="form-check-label">Dark mode</label></div>

Best Practices

  • Always pair form-check-input with a properly linked form-check-label using matching id/for attributes.
  • Use form-switch for binary settings that read naturally as on/off, like notifications or dark mode.
  • Give radio buttons in the same group an identical name attribute so only one can be selected.
  • Use form-check-inline only for short lists; long inline lists become hard to scan.
  • Add aria-label when a checkbox has no visible label, such as a table row selector.
  • Pre-check sensible defaults (like 'Remember me') only when it genuinely helps most users.
  • Keep related checks and radios grouped visually and, where relevant, wrapped in a fieldset with a legend.

Common Mistakes

  • Forgetting a shared name attribute on radios, allowing multiple mutually exclusive options to be selected.
  • Leaving out the label's for attribute, breaking click-to-toggle behavior and accessibility.
  • Using form-switch without role="switch", losing some assistive technology semantics.
  • Styling a checkbox to look like a switch manually instead of using the built-in form-switch class.
  • Overusing form-check-inline for long lists that would read better stacked vertically.
  • Not disabling dependent options visually when a related checkbox is unchecked.

Key Takeaways

  • form-check wraps a checkbox or radio input together with its label for consistent styling.
  • Radios sharing a name attribute form a mutually exclusive group.
  • form-switch turns a checkbox into an accessible toggle-switch control.
  • form-check-inline arranges short option lists horizontally.
  • Proper label association and aria-label usage keep these controls accessible.

Pro Tip

For settings pages with many on/off options, use form-switch consistently across the whole page instead of mixing plain checkboxes and switches, so the interaction pattern stays predictable.

You now understand Bootstrap checks, radios, and switches. Continue to Bootstrap Form Validation to add feedback states to your forms.