Bootstrap Checkbox, Radio and Switch: Bootstrap 5 Guide

Bootstrap 5 replaces the browser’s default checkboxes and radio buttons with consistent, theme-colored versions that look the same in every browser. The same markup also gives you toggle switches and checkboxes styled as buttons. This guide covers all of them with examples to copy: checkboxes, radios, switches, inline and reversed layouts, button-style toggles, the indeterminate state, validation, and how to change their color and size. Everything is for Bootstrap 5.3.

A checkbox

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

The wrapper is .form-check, the input is .form-check-input, and the label is .form-check-label. The label’s for must match the input’s id, so clicking the text toggles the box. Add checked to the input to tick it by default, and disabled to grey it out; the label fades with it.

Radio buttons

Radios use the same classes with type="radio". Give every radio in a group the same name, so only one can be selected:

<div class="form-check">
  <input class="form-check-input" type="radio" name="plan" id="plan-monthly" checked>
  <label class="form-check-label" for="plan-monthly">Monthly</label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="plan" id="plan-yearly">
  <label class="form-check-label" for="plan-yearly">Yearly (2 months free)</label>
</div>

For screen readers, wrap a group in a <fieldset> with a <legend> that names the question.

Switches

Add .form-switch to the wrapper to turn a checkbox into a toggle switch:

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

role="switch" tells screen readers it is an on/off switch rather than a checkbox. A switch is still a checkbox underneath, so it submits the same way in a form.

Inline and reversed

Put checkboxes or radios side by side with .form-check-inline:

<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="size-s" value="s">
  <label class="form-check-label" for="size-s">S</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="size-m" value="m">
  <label class="form-check-label" for="size-m">M</label>
</div>

.form-check-reverse puts the box on the right of the label, which suits settings lists:

<div class="form-check form-switch form-check-reverse">
  <input class="form-check-input" type="checkbox" role="switch" id="dark-mode">
  <label class="form-check-label" for="dark-mode">Dark mode</label>
</div>

Checkboxes without a label

When a checkbox has no visible text, for example in a table row, drop the wrapper and give the input an aria-label:

<input class="form-check-input" type="checkbox" value="" aria-label="Select row">

Checkboxes and radios as buttons

.btn-check hides the input and styles its label as a button that stays pressed while checked:

<input type="checkbox" class="btn-check" id="filter-new" autocomplete="off">
<label class="btn btn-outline-primary" for="filter-new">New</label>

<div class="btn-group" role="group" aria-label="View">
  <input type="radio" class="btn-check" name="view" id="view-grid" autocomplete="off" checked>
  <label class="btn btn-outline-secondary" for="view-grid">Grid</label>
  <input type="radio" class="btn-check" name="view" id="view-list" autocomplete="off">
  <label class="btn btn-outline-secondary" for="view-list">List</label>
</div>

autocomplete="off" stops Firefox from restoring the checked state after a reload. The buttons guide covers toggle buttons in more detail.

The indeterminate state

A checkbox can show a dash, meaning “some selected”, for example a “select all” box when only some rows are ticked. There is no HTML attribute for it; set it with JavaScript:

document.querySelector('#select-all').indeterminate = true

Bootstrap styles it with your primary color and a dash. Clicking the box clears the indeterminate state, so update it again when the selection changes.

Validation

Validation works the same way as for other fields; the Bootstrap forms guide has the full setup. Add .is-invalid or .is-valid to the input, with a feedback message after the label:

<div class="form-check">
  <input class="form-check-input is-invalid" type="checkbox" id="consent" required>
  <label class="form-check-label" for="consent">I agree to be contacted</label>
  <div class="invalid-feedback">You must agree before submitting.</div>
</div>

The box and its label turn red, and the message shows below. To validate only after the user submits, use Bootstrap’s .was-validated class on the form instead of adding the classes by hand.

Change the color

Checked boxes use the primary color. To change one set, override the checked styles:

.form-check-input:checked {
  background-color: #18a957;
  border-color: #18a957;
}
.form-check-input:focus {
  border-color: #18a957;
  box-shadow: 0 0 0 .25rem rgba(24, 169, 87, .25);
}

Scope it with a parent class, such as .consent .form-check-input:checked, to change only some checkboxes. To change them everywhere, set $form-check-input-checked-bg-color in Sass, or change $primary, which they follow by default. See how to customize Bootstrap colors.

Change the size

Checkboxes and radios are sized in em, 1em square by default, so they scale with the font size. Make one bigger with a font-size utility on the wrapper:

<div class="form-check fs-4">
  <input class="form-check-input" type="checkbox" id="big">
  <label class="form-check-label" for="big">Larger checkbox</label>
</div>

The same works for switches. For a size without bigger text, set width and height on .form-check-input in your CSS. In Sass, $form-check-input-width (1em) and $form-switch-width (2em) set the defaults.

FAQ

How do I make a checkbox in Bootstrap 5?

Wrap an <input class="form-check-input" type="checkbox" id="..."> and a <label class="form-check-label" for="..."> in a <div class="form-check">. The label’s for must match the input’s id so clicking the text toggles the checkbox.

How do I make a toggle switch in Bootstrap?

Add form-switch to the .form-check wrapper and role="switch" to the checkbox: <div class="form-check form-switch"><input class="form-check-input" type="checkbox" role="switch" id="s1"><label class="form-check-label" for="s1">Label</label></div>.

How do I put checkboxes side by side in Bootstrap?

Add form-check-inline to each .form-check wrapper. The checkboxes then sit on one line with space between them instead of stacking.

How do I change the checkbox color in Bootstrap 5?

Override .form-check-input:checked with your own background-color and border-color, and adjust the :focus shadow to match. To change every checkbox, set $form-check-input-checked-bg-color or $primary in Sass.

How do I make a Bootstrap checkbox bigger?

Add a font-size utility such as fs-4 to the .form-check wrapper, because the checkbox is sized in em. Or set a larger width and height on .form-check-input in your CSS.