Checks, Radios and Switches

Wrap each checkbox or radio in .form-check, with .form-check-input and .form-check-label on the input and label. Add .form-switch (plus role="switch") for a toggle switch, .form-check-inline for a horizontal row, or .form-check-reverse to put the box on the right. .btn-check on the input and .btn on its label make a toggle button.

Checkboxes (one indeterminate), a switch, inline radios and toggle buttonsHTMLLive

<link rel=stylesheet href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css">
<div class="p-3">
  <div class="form-check"><input class="form-check-input" type="checkbox" id="c1" checked>
    <label class="form-check-label" for="c1">Newsletter</label></div>
  <div class="form-check"><input class="form-check-input" type="checkbox" id="c2">
    <label class="form-check-label" for="c2">Select all</label></div>
  <div class="form-check form-switch"><input class="form-check-input" type="checkbox"
    role="switch" id="s1" checked><label class="form-check-label" for="s1">Dark mode</label></div>
  <div class="form-check form-check-inline"><input class="form-check-input" type="radio"
    name="plan" id="r1" checked><label class="form-check-label" for="r1">Monthly</label></div>
  <div class="form-check form-check-inline"><input class="form-check-input" type="radio"
    name="plan" id="r2" disabled><label class="form-check-label" for="r2">Yearly</label></div>
  <input type="checkbox" class="btn-check" id="b1" checked>
  <label class="btn btn-outline-primary btn-sm" for="b1">Bold</label>
</div>
<script>document.getElementById('c2').indeterminate = true;</script>

Browser output of 34

The indeterminate dash is a DOM property only, so set it from JavaScript. Bootstrap 2,007 paints the tick, dot and switch knob as SVG backgrounds. Safari 10 on iOS 17.4+ also accepts the new switch attribute and adds haptic feedback.

MENU