Skip to component content

Checkbox

Toggle a single option using Bootstrap's native checkbox contract.

Use for one optional setting that can be selected or cleared.

Usage

Use .form-check when a single checkbox option can be independently on or off, or when several options in a set may be selected together. Keep the native input and label as siblings, give the input .form-check-input, give the label .form-check-label, and connect them with matching id and for.

Let the label carry the hit target and write it as the choice the user is making. Add a short description below the label only when the consequence is not obvious, and group related checkboxes with a fieldset and legend when they answer one larger question.

Use the native checked and disabled attributes for state, and set indeterminate state from JavaScript because HTML has no indeterminate attribute. Mark invalid state on the input when validation fails so Bootstrap's sibling-state styling can reach the label and feedback.

Checked State

Unchecked and checked states share the same label contract; the input's checked attribute sets the initial state.

Checkbox 
<div class="field-group d-inline-flex">
  <div class="field">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="checkbox-unchecked">
      <label class="form-check-label" for="checkbox-unchecked">Accept terms and conditions</label>
    </div>
  </div>
  <div class="field">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="checkbox-checked" checked>
      <label class="form-check-label" for="checkbox-checked">Accept terms and conditions</label>
    </div>
  </div>
</div>

Invalid State

Set invalid=true to pair with a form's validation state. Unlike other form controls, invalid checkboxes keep the focus ring visible on mouse click so the error stays prominent.

Checkbox 
<div class="field" data-invalid="true">
  <div class="form-check">
    <input class="form-check-input is-invalid" type="checkbox" id="checkbox-invalid" aria-invalid="true">
    <label class="form-check-label" for="checkbox-invalid">Accept terms and conditions</label>
  </div>
</div>

Basic

Pair the checkbox with a label for proper layout and labeling. The form-check wrapper aligns the input and text on a shared baseline.

Checkbox 
<div class="field">
  <div class="form-check">
    <input class="form-check-input" type="checkbox" id="checkbox-basic">
    <label class="form-check-label" for="checkbox-basic">Accept terms and conditions</label>
  </div>
</div>

Description

Add supporting copy below the label with description. The helper text is linked via aria-describedby for screen readers.

Checkbox
By clicking this checkbox, you agree to the terms and conditions.
<div class="field">
  <div class="form-check">
    <input class="form-check-input" type="checkbox" id="checkbox-desc" checked aria-describedby="checkbox-desc-description">
    <label class="form-check-label" for="checkbox-desc">Accept terms and conditions</label>
    <div class="form-text" id="checkbox-desc-description">By clicking this checkbox, you agree to the terms and conditions.</div>
  </div>
</div>

Disabled

Disabled checkboxes lower opacity and drop pointer interaction in both states.

Checkbox 
<div class="field-group d-inline-flex">
  <div class="field">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="checkbox-disabled" disabled>
      <label class="form-check-label" for="checkbox-disabled">Enable notifications</label>
    </div>
  </div>
  <div class="field">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="checkbox-disabled-checked" checked disabled>
      <label class="form-check-label" for="checkbox-disabled-checked">Enable notifications</label>
    </div>
  </div>
</div>

Group

Stack multiple checkboxes with a shared label and description to create a checkbox list.

Checkbox
Show these items on the desktop
Select the items you want to show on the desktop.
<fieldset class="field-fieldset">
  <legend class="field-legend">Show these items on the desktop</legend>
  <div class="field-description form-text">Select the items you want to show on the desktop.</div>
  <div class="field-group">
    <div class="field">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="checkbox-group-hard-disks" checked>
        <label class="form-check-label" for="checkbox-group-hard-disks">Hard disks</label>
      </div>
    </div>
    <div class="field">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="checkbox-group-external" checked>
        <label class="form-check-label" for="checkbox-group-external">External disks</label>
      </div>
    </div>
    <div class="field">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="checkbox-group-cd-dvd">
        <label class="form-check-label" for="checkbox-group-cd-dvd">CDs, DVDs, and iPods</label>
      </div>
    </div>
    <div class="field">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="checkbox-group-servers">
        <label class="form-check-label" for="checkbox-group-servers">Connected servers</label>
      </div>
    </div>
  </div>
</fieldset>

Table

Embed checkboxes inside table rows for batch selection. Use label_wrapper with aria_label so the entire cell is the hit target.

Checkbox
Name Email Role
Ayla Norberg ayla.norberg@example.com Admin
Marcus Voss marcus.voss@example.com User
Priya Kapoor priya.kapoor@example.com Editor
Jonas Eriksen jonas.eriksen@example.com User 
<div class="table-responsive">
  <table class="table table-sm align-middle mb-0">
    <thead>
      <tr>
        <th class="ps-1" style="width: 2.5rem"></th>
        <th>Name</th>
        <th>Email</th>
        <th>Role</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="ps-1">
          <label class="form-check">
            <input class="form-check-input" type="checkbox" id="checkbox-row-1" aria-label="Select Ayla Norberg">
          </label>
        </td>
        <td>Ayla Norberg</td>
        <td>ayla.norberg@example.com</td>
        <td>Admin</td>
      </tr>
      <tr>
        <td class="ps-1">
          <label class="form-check">
            <input class="form-check-input" type="checkbox" id="checkbox-row-2" aria-label="Select Marcus Voss">
          </label>
        </td>
        <td>Marcus Voss</td>
        <td>marcus.voss@example.com</td>
        <td>User</td>
      </tr>
      <tr>
        <td class="ps-1">
          <label class="form-check">
            <input class="form-check-input" type="checkbox" id="checkbox-row-3" checked aria-label="Select Priya Kapoor">
          </label>
        </td>
        <td>Priya Kapoor</td>
        <td>priya.kapoor@example.com</td>
        <td>Editor</td>
      </tr>
      <tr>
        <td class="ps-1">
          <label class="form-check">
            <input class="form-check-input" type="checkbox" id="checkbox-row-4" aria-label="Select Jonas Eriksen">
          </label>
        </td>
        <td>Jonas Eriksen</td>
        <td>jonas.eriksen@example.com</td>
        <td>User</td>
      </tr>
    </tbody>
  </table>
</div>

RTL

Compare Arabic, Hebrew, and English checkbox labels in an RTL layout for terms and notification workflows.

يمكنك تفعيل أو إلغاء تفعيل الإشعارات في أي وقت.
<div class="d-grid gap-2" dir="rtl">
  <div class="field-group">
    <div class="field">
      <div class="form-check form-check-reverse">
        <input class="form-check-input" type="checkbox" id="checkbox-rtl-ar-terms">
        <label class="form-check-label" for="checkbox-rtl-ar-terms">قبول الشروط والأحكام</label>
      </div>
    </div>
    <div class="field">
      <div class="form-check form-check-reverse">
        <input class="form-check-input" type="checkbox" id="checkbox-rtl-ar-notify" checked aria-describedby="checkbox-rtl-ar-notify-description">
        <label class="form-check-label" for="checkbox-rtl-ar-notify">تفعيل الإشعارات</label>
        <div class="form-text" id="checkbox-rtl-ar-notify-description">يمكنك تفعيل أو إلغاء تفعيل الإشعارات في أي وقت.</div>
      </div>
    </div>
  </div>
</div>
ניתן להפעיל או לבטל התראות בכל עת.
<div class="d-grid gap-2" dir="rtl">
  <div class="field-group">
    <div class="field">
      <div class="form-check form-check-reverse">
        <input class="form-check-input" type="checkbox" id="checkbox-rtl-he-terms">
        <label class="form-check-label" for="checkbox-rtl-he-terms">קבלת תנאי השירות</label>
      </div>
    </div>
    <div class="field">
      <div class="form-check form-check-reverse">
        <input class="form-check-input" type="checkbox" id="checkbox-rtl-he-notify" checked aria-describedby="checkbox-rtl-he-notify-description">
        <label class="form-check-label" for="checkbox-rtl-he-notify">הפעלת התראות</label>
        <div class="form-text" id="checkbox-rtl-he-notify-description">ניתן להפעיל או לבטל התראות בכל עת.</div>
      </div>
    </div>
  </div>
</div>
You can enable or disable notifications at any time.
<div class="d-grid gap-2" dir="ltr">
  <div class="field-group">
    <div class="field">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="checkbox-rtl-en-terms">
        <label class="form-check-label" for="checkbox-rtl-en-terms">Accept terms and conditions</label>
      </div>
    </div>
    <div class="field">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="checkbox-rtl-en-notify" checked aria-describedby="checkbox-rtl-en-notify-description">
        <label class="form-check-label" for="checkbox-rtl-en-notify">Enable notifications</label>
        <div class="form-text" id="checkbox-rtl-en-notify-description">You can enable or disable notifications at any time.</div>
      </div>
    </div>
  </div>
</div>

Component reference

Status
Accepted
Runtime
native HTML/CSS
Markup
Bootstrap/native HTML
Reference

For Bootstrap's source behavior and the shared form-check family, see the Bootstrap Checks and radios documentation.

Pages
Home Introduction Installation Layout Examples Account Appearance FAQ Forgot Password Overview Pricing Profile Sign In Sign Up Tasks Users Components Blocks Charts Utilities Support & Evidence Contributing AI Usage Changelog License
Components
Accordion Alert Alert Dialog Avatar Badge Breadcrumb Button Button Group Card Chart Checkbox Close Button Collapsible Combobox Context Menu Data Table Date Picker Dialog Dropdown Menu Empty Field Form Input Input Group Kbd Menubar Native Select Navigation Pagination Popover Progress Radio Group Separator Sheet Sidebar Skeleton Slider Spinner Switch Table Table of Contents Tabs Textarea Toast Toggle Group Tooltip Typography
Utilities
Border Scroll Fade
Blocks
Accordion Panels Sidebar (Floating) Sidebar (Inset)
↵ Go to Page

Settings

Theme
Choose how Moo UI looks on this device.
Sidebar
Choose how the sidebar sits on the page.
Theme Builder
Tune catalog tokens and chart colors for this browser.
Base color
Theme color
Chart color
Heading font
Body font
Radius
Direction
Choose the reading direction. RTL flips the layout live.
Reset

Restore the default appearance.