Checkboxes, radios and switches for single and multiple choices. Use stacked or inline layouts, toggle buttons, list groups and settings rows to make choices quick to scan.
1Default checkboxes
Stacked checkboxes, one checked by default.
<div class="form-check">
<input class="form-check-input" type="checkbox" id="chk-remember-78" checked>
<label class="form-check-label" for="chk-remember-78">Remember me on this device</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="chk-updates-79">
<label class="form-check-label" for="chk-updates-79">Email me product updates</label>
</div>2Disabled checks
Disabled checks are greyed out and their labels too.
<div class="form-check">
<input class="form-check-input" type="checkbox" id="chk-dis-80" disabled>
<label class="form-check-label" for="chk-dis-80">Two-factor backup codes (set up 2FA first)</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="chk-dis-on-81" checked disabled>
<label class="form-check-label" for="chk-dis-on-81">Security alerts (always on)</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="dis-radio" id="rad-dis-82" disabled>
<label class="form-check-label" for="rad-dis-82">Phone support (Business plan)</label>
</div>3Stacked radios
Radios sharing a name so only one delivery speed can be chosen.
<fieldset>
<legend class="fs-6 fw-semibold">Delivery</legend>
<div class="form-check">
<input class="form-check-input" type="radio" name="delivery-83" id="del-std-84" checked>
<label class="form-check-label" for="del-std-84">Standard (3-5 days)</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="delivery-83" id="del-exp-85">
<label class="form-check-label" for="del-exp-85">Express (next day) - $8.23</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="delivery-83" id="del-pick-86">
<label class="form-check-label" for="del-pick-86">Pick up in Austin</label>
</div>
</fieldset>4Inline checkboxes
form-check-inline places short options on one line and wraps on small screens.
Must have
<p class="fw-semibold mb-2">Must have</p>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="amenity-87">
<label class="form-check-label" for="amenity-87">Wi-Fi</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="amenity-88" checked>
<label class="form-check-label" for="amenity-88">Parking</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="amenity-89" checked>
<label class="form-check-label" for="amenity-89">Breakfast</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="amenity-90">
<label class="form-check-label" for="amenity-90">Pet friendly</label>
</div>5Inline radios
A short set of radios side by side, here for a billing cycle.
Billing cycle
<p class="fw-semibold mb-2">Billing cycle</p>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="gender-91" id="cycle-92">
<label class="form-check-label" for="cycle-92">Monthly</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="gender-91" id="cycle-93">
<label class="form-check-label" for="cycle-93">Quarterly</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="gender-91" id="cycle-94" checked>
<label class="form-check-label" for="cycle-94">Yearly</label>
</div>6Switches
form-switch turns a checkbox into an on/off toggle; role="switch" announces it correctly.
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="sw-mentions-95" checked>
<label class="form-check-label" for="sw-mentions-95">Notify me when someone mentions me</label>
</div>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="sw-digest-96" checked>
<label class="form-check-label" for="sw-digest-96">Weekly digest</label>
</div>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="sw-sms-97">
<label class="form-check-label" for="sw-sms-97">SMS reminders</label>
</div>7Reverse layout
form-check-reverse puts the control on the right, aligned with the end of the row.
<div class="form-check form-check-reverse">
<input class="form-check-input" type="checkbox" id="rev-public-98" checked>
<label class="form-check-label" for="rev-public-98">Public profile</label>
</div>
<div class="form-check form-check-reverse form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="rev-search-99">
<label class="form-check-label" for="rev-search-99">Show me in search results</label>
</div>8Checks without labels
In tables a visible label would be noise; aria-label keeps the checkbox accessible.
| Name | Role | |
|---|---|---|
| Ruby Varga | Finance Lead | |
| Jonah Mensah | Sales Executive | |
| Omar Tanaka | Marketing Lead |
<div class="table-responsive">
<table class="table table-sm align-middle mb-0">
<thead>
<tr>
<th scope="col" style="width: 2.5rem;"><input class="form-check-input" type="checkbox" aria-label="Select all rows"></th>
<th scope="col">Name</th>
<th scope="col">Role</th>
</tr>
</thead>
<tbody>
<tr>
<td><input class="form-check-input" type="checkbox" aria-label="Select Ruby Varga"></td>
<td>Ruby Varga</td>
<td class="text-body-secondary">Finance Lead</td>
</tr>
<tr>
<td><input class="form-check-input" type="checkbox" aria-label="Select Jonah Mensah"></td>
<td>Jonah Mensah</td>
<td class="text-body-secondary">Sales Executive</td>
</tr>
<tr>
<td><input class="form-check-input" type="checkbox" aria-label="Select Omar Tanaka"></td>
<td>Omar Tanaka</td>
<td class="text-body-secondary">Marketing Lead</td>
</tr>
</tbody>
</table>
</div>9Toggle buttons
btn-check styles a checkbox as a button that stays pressed while checked.
<div class="d-flex gap-2">
<input type="checkbox" class="btn-check" id="tb-bold-100" autocomplete="off" checked>
<label class="btn btn-outline-secondary" for="tb-bold-100" aria-label="Bold"><i class="bi bi-type-bold" aria-hidden="true"></i></label>
<input type="checkbox" class="btn-check" id="tb-italic-101" autocomplete="off">
<label class="btn btn-outline-secondary" for="tb-italic-101" aria-label="Italic"><i class="bi bi-type-italic" aria-hidden="true"></i></label>
<input type="checkbox" class="btn-check" id="tb-underline-102" autocomplete="off">
<label class="btn btn-outline-secondary" for="tb-underline-102" aria-label="Underline"><i class="bi bi-type-underline" aria-hidden="true"></i></label>
</div>10Radio button group
Radios inside a btn-group behave like a segmented control.
<div class="btn-group" role="group" aria-label="Choose a view">
<input type="radio" class="btn-check" name="view-103" id="view-list-104" autocomplete="off" checked>
<label class="btn btn-outline-primary" for="view-list-104"><i class="bi bi-list-ul" aria-hidden="true"></i> List</label>
<input type="radio" class="btn-check" name="view-103" id="view-grid-105" autocomplete="off">
<label class="btn btn-outline-primary" for="view-grid-105"><i class="bi bi-grid" aria-hidden="true"></i> Grid</label>
<input type="radio" class="btn-check" name="view-103" id="view-board-106" autocomplete="off">
<label class="btn btn-outline-primary" for="view-board-106"><i class="bi bi-kanban" aria-hidden="true"></i> Board</label>
</div>11Coloured toggle radios
Each option can use its own outline colour to hint at its meaning.
Will you attend the routine kickoff?
<p class="fw-semibold mb-2">Will you attend the routine kickoff?</p>
<div class="d-flex flex-wrap gap-2">
<input type="radio" class="btn-check" name="answer-107" id="ans-yes-108" autocomplete="off" checked>
<label class="btn btn-outline-success" for="ans-yes-108">Going</label>
<input type="radio" class="btn-check" name="answer-107" id="ans-maybe-109" autocomplete="off">
<label class="btn btn-outline-warning" for="ans-maybe-109">Maybe</label>
<input type="radio" class="btn-check" name="answer-107" id="ans-no-110" autocomplete="off">
<label class="btn btn-outline-danger" for="ans-no-110">Can't make it</label>
</div>12Checks with descriptions
A muted line under each label explains the consequence of the option.
A copy of your workspace is saved every night at 02:00.
<div class="form-check mb-3">
<input class="form-check-input" type="checkbox" id="chk-backup-111" aria-describedby="chk-backup-help-112" checked>
<label class="form-check-label fw-semibold" for="chk-backup-111">Automatic backups</label>
<div id="chk-backup-help-112" class="form-text mt-0">
A copy of your workspace is saved every night at 02:00.
</div>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="chk-share-113" aria-describedby="chk-share-help-114">
<label class="form-check-label fw-semibold" for="chk-share-113">Share usage data</label>
<div id="chk-share-help-114" class="form-text mt-0">
Anonymous statistics help us improve Sage.
</div>
</div>13Terms agreement
A required agreement checkbox with inline links to the documents.
<div class="form-check">
<input class="form-check-input" type="checkbox" id="chk-terms-115" required>
<label class="form-check-label small" for="chk-terms-115">I agree to the <a href="#">Terms of Service</a> and <a href="#">Privacy Policy</a> of Sage.</label>
</div>14Checkbox list group
Checkboxes inside list-group items; stretched-link makes the whole row clickable.
<ul class="list-group">
<li class="list-group-item"><input class="form-check-input me-2" type="checkbox" id="lg-chk-116" checked><label class="form-check-label stretched-link" for="lg-chk-116">Carbon-neutral delivery</label></li>
<li class="list-group-item"><input class="form-check-input me-2" type="checkbox" id="lg-chk-117"><label class="form-check-label stretched-link" for="lg-chk-117">Hand-checked quality</label></li>
<li class="list-group-item"><input class="form-check-input me-2" type="checkbox" id="lg-chk-118"><label class="form-check-label stretched-link" for="lg-chk-118">Sustainable materials</label></li>
<li class="list-group-item"><input class="form-check-input me-2" type="checkbox" id="lg-chk-119"><label class="form-check-label stretched-link" for="lg-chk-119">Sustainable materials</label></li>
</ul>15Radio list group
Each list item is a label so the full row selects the option.
<div class="list-group">
<label class="list-group-item d-flex gap-2" for="lg-rad-121"><input class="form-check-input flex-shrink-0" type="radio" name="lg-radio-120" id="lg-rad-121"><span>Linen shirt<small class="d-block text-body-secondary">Thousands of shoppers already trust us, and we work hard to keep it that way.</small></span></label>
<label class="list-group-item d-flex gap-2" for="lg-rad-122"><input class="form-check-input flex-shrink-0" type="radio" name="lg-radio-120" id="lg-rad-122" checked><span>Canvas tote<small class="d-block text-body-secondary">Thousands of five-star reviews from customers who came back for more.</small></span></label>
<label class="list-group-item d-flex gap-2" for="lg-rad-123"><input class="form-check-input flex-shrink-0" type="radio" name="lg-radio-120" id="lg-rad-123"><span>Ceramic mug<small class="d-block text-body-secondary">Every piece is made in small batches from materials we test ourselves.</small></span></label>
</div>16Large switches
A custom size class scales the switch for touch-friendly settings screens.
<div class="form-check form-switch tl-switch-lg mb-2">
<input class="form-check-input" type="checkbox" role="switch" id="big-switch-124" checked>
<label class="form-check-label" for="big-switch-124">Do not disturb</label>
</div>
<div class="form-check form-switch tl-switch-lg">
<input class="form-check-input" type="checkbox" role="switch" id="big-switch-2-125">
<label class="form-check-label" for="big-switch-2-125">Vacation mode</label>
</div>17Checks in columns
row-cols spreads a long list of checkboxes into tidy columns.
<fieldset>
<legend class="fs-6 fw-semibold">Amenities</legend>
<div class="row row-cols-2 row-cols-md-3 g-2">
<div class="col">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="feat-126">
<label class="form-check-label" for="feat-126">Air conditioning</label>
</div>
</div>
<div class="col">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="feat-127">
<label class="form-check-label" for="feat-127">Kitchen</label>
</div>
</div>
<div class="col">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="feat-128">
<label class="form-check-label" for="feat-128">Washer</label>
</div>
</div>
<div class="col">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="feat-129">
<label class="form-check-label" for="feat-129">Workspace</label>
</div>
</div>
<div class="col">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="feat-130">
<label class="form-check-label" for="feat-130">Balcony</label>
</div>
</div>
<div class="col">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="feat-131" checked>
<label class="form-check-label" for="feat-131">Gym access</label>
</div>
</div>
<div class="col">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="feat-132">
<label class="form-check-label" for="feat-132">Pool</label>
</div>
</div>
<div class="col">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="feat-133">
<label class="form-check-label" for="feat-133">EV charger</label>
</div>
</div>
<div class="col">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="feat-134" checked>
<label class="form-check-label" for="feat-134">Elevator</label>
</div>
</div>
</div>
</fieldset>18Required check with feedback
An invalid checkbox shows its error message right below the label.
You must confirm your age to continue.
<div class="form-check">
<input class="form-check-input is-invalid" type="checkbox" id="chk-age-135" required>
<label class="form-check-label" for="chk-age-135">I confirm I am 18 or older</label>
<div class="invalid-feedback">
You must confirm your age to continue.
</div>
</div>19Coloured checks
Small custom classes recolour the checked state for status-specific options.
<div class="form-check">
<input class="form-check-input tl-check-success" type="checkbox" id="tone-ok-136" checked>
<label class="form-check-label" for="tone-ok-136">Show completed tasks</label>
</div>
<div class="form-check">
<input class="form-check-input tl-check-warning" type="checkbox" id="tone-warn-137" checked>
<label class="form-check-label" for="tone-warn-137">Show tasks due soon</label>
</div>
<div class="form-check">
<input class="form-check-input tl-check-danger" type="checkbox" id="tone-bad-138" checked>
<label class="form-check-label" for="tone-bad-138">Show overdue tasks</label>
</div>20Settings rows
Label and description on the left, switch on the right - the classic settings screen.
<div class="list-group">
<div class="list-group-item d-flex justify-content-between align-items-center gap-3">
<label for="set-sw-139" class="mb-0"><span class="d-block fw-semibold">Desktop notifications</span><small class="text-body-secondary">Pop-ups while the app is open</small></label>
<div class="form-check form-switch m-0">
<input class="form-check-input" type="checkbox" role="switch" id="set-sw-139" checked>
</div>
</div>
<div class="list-group-item d-flex justify-content-between align-items-center gap-3">
<label for="set-sw-140" class="mb-0"><span class="d-block fw-semibold">Email summaries</span><small class="text-body-secondary">A recap of activity every Monday</small></label>
<div class="form-check form-switch m-0">
<input class="form-check-input" type="checkbox" role="switch" id="set-sw-140" checked>
</div>
</div>
<div class="list-group-item d-flex justify-content-between align-items-center gap-3">
<label for="set-sw-141" class="mb-0"><span class="d-block fw-semibold">Read receipts</span><small class="text-body-secondary">Let others see when you read messages</small></label>
<div class="form-check form-switch m-0">
<input class="form-check-input" type="checkbox" role="switch" id="set-sw-141">
</div>
</div>
</div>