Checks & Radios
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) - $18.93</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 Prague</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">
<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 | |
|---|---|---|
| Ava Alvarez | Content Writer | |
| Aria Brennan | Product Designer | |
| Leo Larsen | QA Engineer |
<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 Ava Alvarez"></td>
<td>Ava Alvarez</td>
<td class="text-muted">Content Writer</td>
</tr>
<tr>
<td><input class="form-check-input" type="checkbox" aria-label="Select Aria Brennan"></td>
<td>Aria Brennan</td>
<td class="text-muted">Product Designer</td>
</tr>
<tr>
<td><input class="form-check-input" type="checkbox" aria-label="Select Leo Larsen"></td>
<td>Leo Larsen</td>
<td class="text-muted">QA Engineer</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 workflow kickoff?
<p class="font-semibold mb-2">Will you attend the workflow 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 Nimbus Kit.
</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 Nimbus Kit.</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">Global clients</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">Senior designers only</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">Global clients</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">Weekly demos</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>Brand sprint<small class="block text-muted">We combine strategy, design and technology to build brands that grow.</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>Website package<small class="block text-muted">Senior designers lead every project from the first sketch to the final file.</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>Social kit<small class="block text-muted">We measure success in sign-ups, sales and brand recall, not just awards.</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">
<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" checked>
<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">
<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" checked>
</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" checked>
</div>
</div>
</div>