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="text-base font-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) - $16.99</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 Cape Town</label>
</div>
</fieldset>4Inline checkboxes
form-check-inline places short options on one line and wraps on small screens.
Must have
<p class="font-semibold mb-2">Must have</p>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="amenity-87" checked>
<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">
<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="font-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 Quinn | Finance Lead | |
| Ella Nguyen | Support Specialist | |
| Owen Varga | Art Director |
<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 Quinn"></td>
<td>Ruby Quinn</td>
<td class="text-muted">Finance Lead</td>
</tr>
<tr>
<td><input class="form-check-input" type="checkbox" aria-label="Select Ella Nguyen"></td>
<td>Ella Nguyen</td>
<td class="text-muted">Support Specialist</td>
</tr>
<tr>
<td><input class="form-check-input" type="checkbox" aria-label="Select Owen Varga"></td>
<td>Owen Varga</td>
<td class="text-muted">Art Director</td>
</tr>
</tbody>
</table>
</div>9Toggle buttons
btn-check styles a checkbox as a button that stays pressed while checked.
<div class="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-fill" 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-fill" 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 idea kickoff?
<p class="font-semibold mb-2">Will you attend the idea kickoff?</p>
<div class="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-4">
<input class="form-check-input" type="checkbox" id="chk-backup-111" aria-describedby="chk-backup-help-112" checked>
<label class="form-check-label font-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 font-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 Mira Point.
</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 Mira Point.</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">Sustainable materials</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">Member prices</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">Member prices</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 flex gap-2" for="lg-rad-121"><input class="form-check-input shrink-0" type="radio" name="lg-radio-120" id="lg-rad-121"><span>Linen shirt<small class="block text-muted">Our team has done this many times, so you never have to guess.</small></span></label>
<label class="list-group-item flex gap-2" for="lg-rad-122"><input class="form-check-input shrink-0" type="radio" name="lg-radio-120" id="lg-rad-122" checked><span>Canvas tote<small class="block text-muted">Free shipping on orders over $50 and easy returns within 30 days.</small></span></label>
<label class="list-group-item flex gap-2" for="lg-rad-123"><input class="form-check-input shrink-0" type="radio" name="lg-radio-120" id="lg-rad-123"><span>Ceramic mug<small class="block text-muted">Thousands of five-star reviews from customers who came back for more.</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="text-base font-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" checked>
<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" checked>
<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" checked>
<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" checked>
<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">
<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 flex justify-between items-center gap-4">
<label for="set-sw-139" class="mb-0"><span class="block font-semibold">Desktop notifications</span><small class="text-muted">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 flex justify-between items-center gap-4">
<label for="set-sw-140" class="mb-0"><span class="block font-semibold">Email summaries</span><small class="text-muted">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">
</div>
</div>
<div class="list-group-item flex justify-between items-center gap-4">
<label for="set-sw-141" class="mb-0"><span class="block font-semibold">Read receipts</span><small class="text-muted">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>