Radio
Radios for one choice out of many - from plain stacked lists to button groups, selectable cards, plan pickers, swatches and rating scales.
1Stacked radios
The default vertical list inside a fieldset with a legend.
<fieldset>
<legend class="fs-6 fw-semibold">Payment method</legend>
<div class="form-check">
<input class="form-check-input" type="radio" name="pay-489" id="rd-490" checked>
<label class="form-check-label" for="rd-490">Credit or debit card</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="pay-489" id="rd-491">
<label class="form-check-label" for="rd-491">Bank transfer</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="pay-489" id="rd-492">
<label class="form-check-label" for="rd-492">Pay on invoice (30 days)</label>
</div>
</fieldset>2Inline radios
form-check-inline for short options in one line.
Email frequency
<p class="fw-semibold mb-2">Email frequency</p>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="freq-493" id="rd-494">
<label class="form-check-label" for="rd-494">Daily</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="freq-493" id="rd-495" checked>
<label class="form-check-label" for="rd-495">Weekly</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="freq-493" id="rd-496">
<label class="form-check-label" for="rd-496">Monthly</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="freq-493" id="rd-497">
<label class="form-check-label" for="rd-497">Never</label>
</div>3Disabled radios
Unavailable options stay visible but cannot be chosen.
<div class="form-check">
<input class="form-check-input" type="radio" name="ship-speed-498" id="rd-dis-499" disabled>
<label class="form-check-label" for="rd-dis-499">Same-day delivery (not available in Valencia)</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="ship-speed-498" id="rd-dis-on-500" checked disabled>
<label class="form-check-label" for="rd-dis-on-500">Standard delivery (selected by your plan)</label>
</div>4Button radios
A compact segmented control built from radios and a btn-group.
<div class="btn-group" role="group" aria-label="Chart range">
<input type="radio" class="btn-check" name="range-tab-501" id="rd-btn-502" autocomplete="off">
<label class="btn btn-outline-secondary btn-sm" for="rd-btn-502">1D</label>
<input type="radio" class="btn-check" name="range-tab-501" id="rd-btn-503" autocomplete="off">
<label class="btn btn-outline-secondary btn-sm" for="rd-btn-503">1W</label>
<input type="radio" class="btn-check" name="range-tab-501" id="rd-btn-504" autocomplete="off" checked>
<label class="btn btn-outline-secondary btn-sm" for="rd-btn-504">1M</label>
<input type="radio" class="btn-check" name="range-tab-501" id="rd-btn-505" autocomplete="off">
<label class="btn btn-outline-secondary btn-sm" for="rd-btn-505">3M</label>
<input type="radio" class="btn-check" name="range-tab-501" id="rd-btn-506" autocomplete="off">
<label class="btn btn-outline-secondary btn-sm" for="rd-btn-506">1Y</label>
<input type="radio" class="btn-check" name="range-tab-501" id="rd-btn-507" autocomplete="off">
<label class="btn btn-outline-secondary btn-sm" for="rd-btn-507">All</label>
</div>5Outline radios in colours
Each priority has its own colour while still being a single choice.
Priority
<p class="fw-semibold mb-2">Priority</p>
<div class="d-flex flex-wrap gap-2">
<input type="radio" class="btn-check" name="priority-508" id="rd-prio-509" autocomplete="off">
<label class="btn btn-outline-success rounded-pill px-3" for="rd-prio-509">Low</label>
<input type="radio" class="btn-check" name="priority-508" id="rd-prio-510" autocomplete="off" checked>
<label class="btn btn-outline-info rounded-pill px-3" for="rd-prio-510">Medium</label>
<input type="radio" class="btn-check" name="priority-508" id="rd-prio-511" autocomplete="off">
<label class="btn btn-outline-warning rounded-pill px-3" for="rd-prio-511">High</label>
<input type="radio" class="btn-check" name="priority-508" id="rd-prio-512" autocomplete="off">
<label class="btn btn-outline-danger rounded-pill px-3" for="rd-prio-512">Critical</label>
</div>6Card radios
Whole cards act as radio options; the checked card gets a primary outline.
<div class="row g-3">
<div class="col-md-4">
<input type="radio" class="btn-check" name="ship-option-513" id="rd-card-514" autocomplete="off" checked>
<label class="card h-100 tl-card-radio" for="rd-card-514"><span class="card-body"><span class="fs-4 text-primary d-block mb-1"><i class="bi bi-truck" aria-hidden="true"></i></span><span class="d-block fw-semibold">Standard</span><span class="d-block small text-body-secondary">4-6 business days</span><span class="d-block fw-semibold mt-2">Free</span></span></label>
</div>
<div class="col-md-4">
<input type="radio" class="btn-check" name="ship-option-513" id="rd-card-515" autocomplete="off">
<label class="card h-100 tl-card-radio" for="rd-card-515"><span class="card-body"><span class="fs-4 text-primary d-block mb-1"><i class="bi bi-lightning-charge" aria-hidden="true"></i></span><span class="d-block fw-semibold">Express</span><span class="d-block small text-body-secondary">1-2 business days</span><span class="d-block fw-semibold mt-2">$10.02</span></span></label>
</div>
<div class="col-md-4">
<input type="radio" class="btn-check" name="ship-option-513" id="rd-card-516" autocomplete="off">
<label class="card h-100 tl-card-radio" for="rd-card-516"><span class="card-body"><span class="fs-4 text-primary d-block mb-1"><i class="bi bi-shop" aria-hidden="true"></i></span><span class="d-block fw-semibold">Pick up</span><span class="d-block small text-body-secondary">Ready tomorrow in Auckland</span><span class="d-block fw-semibold mt-2">Free</span></span></label>
</div>
</div>7Plan picker
Radio rows with name, description and price; the selected row is highlighted.
<div class="vstack gap-2">
<label class="tl-plan border rounded-3 p-3 d-flex align-items-center gap-3" for="rd-plan-518"><input class="form-check-input m-0 flex-shrink-0" type="radio" name="plan-517" id="rd-plan-518"><span class="flex-grow-1"><span class="fw-semibold">UX fundamentals</span><small class="d-block text-body-secondary">For individuals</small></span><span class="text-end"><span class="fs-5 fw-bold">$19</span><small class="text-body-secondary">/mo</small></span></label>
<label class="tl-plan border rounded-3 p-3 d-flex align-items-center gap-3" for="rd-plan-519"><input class="form-check-input m-0 flex-shrink-0" type="radio" name="plan-517" id="rd-plan-519" checked><span class="flex-grow-1"><span class="fw-semibold">Data analysis</span> <span class="badge text-bg-primary ms-1">Popular</span><small class="d-block text-body-secondary">For small teams up to 20</small></span><span class="text-end"><span class="fs-5 fw-bold">$33</span><small class="text-body-secondary">/mo</small></span></label>
<label class="tl-plan border rounded-3 p-3 d-flex align-items-center gap-3" for="rd-plan-520"><input class="form-check-input m-0 flex-shrink-0" type="radio" name="plan-517" id="rd-plan-520"><span class="flex-grow-1"><span class="fw-semibold">Web development</span><small class="d-block text-body-secondary">Unlimited seats and SSO</small></span><span class="text-end"><span class="fs-5 fw-bold">$136</span><small class="text-body-secondary">/mo</small></span></label>
</div>8List group radios
Radios inside list group items for settings panels.
<div class="list-group">
<label class="list-group-item" for="rd-lg-522"><input class="form-check-input me-2" type="radio" name="lg-plan-521" id="rd-lg-522">Notify me about everything</label>
<label class="list-group-item" for="rd-lg-523"><input class="form-check-input me-2" type="radio" name="lg-plan-521" id="rd-lg-523" checked>Only direct messages and mentions</label>
<label class="list-group-item" for="rd-lg-524"><input class="form-check-input me-2" type="radio" name="lg-plan-521" id="rd-lg-524">Nothing - mute all notifications</label>
</div>9Radios with descriptions
A second line explains each permission level.
<fieldset>
<legend class="fs-6 fw-semibold">Role for Ethan Lindqvist</legend>
<div class="form-check mb-2">
<input class="form-check-input" type="radio" name="access-525" id="rd-desc-526" aria-describedby="rd-desc-help-527">
<label class="form-check-label fw-semibold" for="rd-desc-526">Viewer</label>
<div id="rd-desc-help-527" class="form-text mt-0">
Can view and comment
</div>
</div>
<div class="form-check mb-2">
<input class="form-check-input" type="radio" name="access-525" id="rd-desc-528" aria-describedby="rd-desc-help-529" checked>
<label class="form-check-label fw-semibold" for="rd-desc-528">Editor</label>
<div id="rd-desc-help-529" class="form-text mt-0">
Can edit content and invite viewers
</div>
</div>
<div class="form-check mb-2">
<input class="form-check-input" type="radio" name="access-525" id="rd-desc-530" aria-describedby="rd-desc-help-531">
<label class="form-check-label fw-semibold" for="rd-desc-530">Admin</label>
<div id="rd-desc-help-531" class="form-text mt-0">
Full access including billing
</div>
</div>
</fieldset>10Star rating
Five radios drawn as stars; checked and earlier stars light up.
<fieldset class="tl-stars">
<legend class="fs-6 fw-semibold">Rate your order</legend>
<div class="d-flex flex-row-reverse justify-content-end gap-1">
<input type="radio" class="btn-check" name="stars-532" id="rd-star-533" autocomplete="off">
<label class="btn btn-link p-0 fs-3" for="rd-star-533" aria-label="5 stars"><i class="bi bi-star-fill" aria-hidden="true"></i></label>
<input type="radio" class="btn-check" name="stars-532" id="rd-star-534" autocomplete="off" checked>
<label class="btn btn-link p-0 fs-3" for="rd-star-534" aria-label="4 stars"><i class="bi bi-star-fill" aria-hidden="true"></i></label>
<input type="radio" class="btn-check" name="stars-532" id="rd-star-535" autocomplete="off">
<label class="btn btn-link p-0 fs-3" for="rd-star-535" aria-label="3 stars"><i class="bi bi-star-fill" aria-hidden="true"></i></label>
<input type="radio" class="btn-check" name="stars-532" id="rd-star-536" autocomplete="off">
<label class="btn btn-link p-0 fs-3" for="rd-star-536" aria-label="2 stars"><i class="bi bi-star-fill" aria-hidden="true"></i></label>
<input type="radio" class="btn-check" name="stars-532" id="rd-star-537" autocomplete="off">
<label class="btn btn-link p-0 fs-3" for="rd-star-537" aria-label="1 star"><i class="bi bi-star-fill" aria-hidden="true"></i></label>
</div>
</fieldset>11Size picker
Square toggle buttons for clothing sizes; sold-out sizes are disabled.
Size
XXL is sold out
<p class="fw-semibold mb-2">Size</p>
<div class="d-flex flex-wrap gap-2">
<input type="radio" class="btn-check" name="size-538" id="rd-size-539" autocomplete="off">
<label class="btn btn-outline-dark tl-size" for="rd-size-539">XS</label>
<input type="radio" class="btn-check" name="size-538" id="rd-size-540" autocomplete="off">
<label class="btn btn-outline-dark tl-size" for="rd-size-540">S</label>
<input type="radio" class="btn-check" name="size-538" id="rd-size-541" autocomplete="off" checked>
<label class="btn btn-outline-dark tl-size" for="rd-size-541">M</label>
<input type="radio" class="btn-check" name="size-538" id="rd-size-542" autocomplete="off">
<label class="btn btn-outline-dark tl-size" for="rd-size-542">L</label>
<input type="radio" class="btn-check" name="size-538" id="rd-size-543" autocomplete="off">
<label class="btn btn-outline-dark tl-size" for="rd-size-543">XL</label>
<input type="radio" class="btn-check" name="size-538" id="rd-size-544" autocomplete="off" disabled>
<label class="btn btn-outline-dark tl-size" for="rd-size-544">XXL</label>
</div>
<p class="small text-body-secondary mt-2 mb-0">XXL is sold out</p>12Colour swatches
Round swatches as radios, with a ring around the selected colour.
<fieldset>
<legend class="fs-6 fw-semibold">Colour</legend>
<div class="d-flex gap-2">
<input type="radio" class="btn-check" name="colour-545" id="rd-swatch-546" autocomplete="off" checked>
<label class="tl-swatch" for="rd-swatch-546" style="background: var(--wt-primary);" title="Primary"><span class="visually-hidden">Primary</span></label>
<input type="radio" class="btn-check" name="colour-545" id="rd-swatch-547" autocomplete="off">
<label class="tl-swatch" for="rd-swatch-547" style="background: var(--wt-secondary);" title="Secondary"><span class="visually-hidden">Secondary</span></label>
<input type="radio" class="btn-check" name="colour-545" id="rd-swatch-548" autocomplete="off">
<label class="tl-swatch" for="rd-swatch-548" style="background: var(--wt-accent);" title="Accent"><span class="visually-hidden">Accent</span></label>
<input type="radio" class="btn-check" name="colour-545" id="rd-swatch-549" autocomplete="off">
<label class="tl-swatch" for="rd-swatch-549" style="background: var(--bs-dark);" title="Dark"><span class="visually-hidden">Dark</span></label>
<input type="radio" class="btn-check" name="colour-545" id="rd-swatch-550" autocomplete="off">
<label class="tl-swatch" for="rd-swatch-550" style="background: var(--bs-light);" title="Light"><span class="visually-hidden">Light</span></label>
</div>
</fieldset>13Yes / No toggle
Two radios as a full-width segmented control for binary questions.
Is this a gift?
<p class="fw-semibold mb-2">Is this a gift?</p>
<div class="btn-group w-100" role="group" aria-label="Is this a gift">
<input type="radio" class="btn-check" name="yesno-551" id="rd-yes-552" autocomplete="off">
<label class="btn btn-outline-primary" for="rd-yes-552"><i class="bi bi-gift" aria-hidden="true"></i> Yes</label>
<input type="radio" class="btn-check" name="yesno-551" id="rd-no-553" autocomplete="off" checked>
<label class="btn btn-outline-primary" for="rd-no-553">No</label>
</div>14Reverse radios
Labels first and radios at the end of the line with form-check-reverse.
<div style="max-width: 20rem;">
<div class="form-check form-check-reverse">
<input class="form-check-input" type="radio" name="align-554" id="rd-555" checked>
<label class="form-check-label" for="rd-555">Align left</label>
</div>
<div class="form-check form-check-reverse">
<input class="form-check-input" type="radio" name="align-554" id="rd-556">
<label class="form-check-label" for="rd-556">Align centre</label>
</div>
<div class="form-check form-check-reverse">
<input class="form-check-input" type="radio" name="align-554" id="rd-557">
<label class="form-check-label" for="rd-557">Align right</label>
</div>
</div>15Payment method tiles
A grid of icon tiles for the payment method.
<div class="row row-cols-2 row-cols-sm-4 g-2">
<div class="col">
<input type="radio" class="btn-check" name="pay-method-558" id="rd-pm-559" autocomplete="off" checked>
<label class="btn btn-outline-secondary w-100 py-3" for="rd-pm-559"><span class="d-block fs-4"><i class="bi bi-credit-card" aria-hidden="true"></i></span>Card</label>
</div>
<div class="col">
<input type="radio" class="btn-check" name="pay-method-558" id="rd-pm-560" autocomplete="off">
<label class="btn btn-outline-secondary w-100 py-3" for="rd-pm-560"><span class="d-block fs-4"><i class="bi bi-paypal" aria-hidden="true"></i></span>PayPal</label>
</div>
<div class="col">
<input type="radio" class="btn-check" name="pay-method-558" id="rd-pm-561" autocomplete="off">
<label class="btn btn-outline-secondary w-100 py-3" for="rd-pm-561"><span class="d-block fs-4"><i class="bi bi-bank" aria-hidden="true"></i></span>Bank</label>
</div>
<div class="col">
<input type="radio" class="btn-check" name="pay-method-558" id="rd-pm-562" autocomplete="off">
<label class="btn btn-outline-secondary w-100 py-3" for="rd-pm-562"><span class="d-block fs-4"><i class="bi bi-wallet2" aria-hidden="true"></i></span>Wallet</label>
</div>
</div>16Survey matrix
One radio group per row in a table, labelled with aria-label.
| Statement | Disagree | Neutral | Agree |
|---|---|---|---|
| The app is easy to use | |||
| Support answered quickly | |||
| I would recommend Novaera |
<div class="table-responsive">
<table class="table align-middle text-center mb-0">
<thead>
<tr>
<th scope="col" class="text-start">Statement</th>
<th scope="col" class="small">Disagree</th>
<th scope="col" class="small">Neutral</th>
<th scope="col" class="small">Agree</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row" class="text-start fw-normal">The app is easy to use</th>
<td><input class="form-check-input" type="radio" name="survey-563" aria-label="The app is easy to use: Disagree"></td>
<td><input class="form-check-input" type="radio" name="survey-563" aria-label="The app is easy to use: Neutral"></td>
<td><input class="form-check-input" type="radio" name="survey-563" aria-label="The app is easy to use: Agree"></td>
</tr>
<tr>
<th scope="row" class="text-start fw-normal">Support answered quickly</th>
<td><input class="form-check-input" type="radio" name="survey-564" aria-label="Support answered quickly: Disagree"></td>
<td><input class="form-check-input" type="radio" name="survey-564" aria-label="Support answered quickly: Neutral"></td>
<td><input class="form-check-input" type="radio" name="survey-564" aria-label="Support answered quickly: Agree"></td>
</tr>
<tr>
<th scope="row" class="text-start fw-normal">I would recommend Novaera</th>
<td><input class="form-check-input" type="radio" name="survey-565" aria-label="I would recommend Novaera: Disagree"></td>
<td><input class="form-check-input" type="radio" name="survey-565" aria-label="I would recommend Novaera: Neutral"></td>
<td><input class="form-check-input" type="radio" name="survey-565" aria-label="I would recommend Novaera: Agree"></td>
</tr>
</tbody>
</table>
</div>17Delivery windows
Bordered radio boxes with the time range aligned right.
Delivery on Nov 30, 2026
<p class="fw-semibold mb-2">Delivery on Nov 30, 2026</p>
<div class="vstack gap-2">
<div class="form-check border rounded-3 p-3 ps-5">
<input class="form-check-input" type="radio" name="slot-566" id="rd-slot-567" checked>
<label class="form-check-label d-flex justify-content-between w-100" for="rd-slot-567"><span>Morning</span><span class="text-body-secondary small">08:00 - 12:00</span></label>
</div>
<div class="form-check border rounded-3 p-3 ps-5">
<input class="form-check-input" type="radio" name="slot-566" id="rd-slot-568">
<label class="form-check-label d-flex justify-content-between w-100" for="rd-slot-568"><span>Afternoon</span><span class="text-body-secondary small">12:00 - 17:00</span></label>
</div>
<div class="form-check border rounded-3 p-3 ps-5">
<input class="form-check-input" type="radio" name="slot-566" id="rd-slot-569">
<label class="form-check-label d-flex justify-content-between w-100" for="rd-slot-569"><span>Evening</span><span class="text-body-secondary small">17:00 - 21:00</span></label>
</div>
</div>18Vertical radio group
btn-group-vertical stacks the radio buttons for sidebars.
<div class="btn-group-vertical" role="group" aria-label="Text alignment">
<input type="radio" class="btn-check" name="align-v-570" id="rd-vert-571" autocomplete="off" checked>
<label class="btn btn-outline-secondary text-start" for="rd-vert-571"><i class="bi bi-text-left" aria-hidden="true"></i> Left</label>
<input type="radio" class="btn-check" name="align-v-570" id="rd-vert-572" autocomplete="off">
<label class="btn btn-outline-secondary text-start" for="rd-vert-572"><i class="bi bi-text-center" aria-hidden="true"></i> Center</label>
<input type="radio" class="btn-check" name="align-v-570" id="rd-vert-573" autocomplete="off">
<label class="btn btn-outline-secondary text-start" for="rd-vert-573"><i class="bi bi-text-right" aria-hidden="true"></i> Right</label>
<input type="radio" class="btn-check" name="align-v-570" id="rd-vert-574" autocomplete="off">
<label class="btn btn-outline-secondary text-start" for="rd-vert-574"><i class="bi bi-justify" aria-hidden="true"></i> Justify</label>
</div>19Appearance setting
Large icon buttons let people choose light, dark or system theme.
Appearance
<p class="fw-semibold mb-2">Appearance</p>
<div class="d-flex flex-wrap gap-3">
<div>
<input type="radio" class="btn-check" name="theme-575" id="rd-theme-576" autocomplete="off">
<label class="btn btn-outline-primary d-flex flex-column align-items-center px-4 py-3" for="rd-theme-576"><span class="fs-3"><i class="bi bi-sun" aria-hidden="true"></i></span><span class="small">Light</span></label>
</div>
<div>
<input type="radio" class="btn-check" name="theme-575" id="rd-theme-577" autocomplete="off">
<label class="btn btn-outline-primary d-flex flex-column align-items-center px-4 py-3" for="rd-theme-577"><span class="fs-3"><i class="bi bi-moon-stars" aria-hidden="true"></i></span><span class="small">Dark</span></label>
</div>
<div>
<input type="radio" class="btn-check" name="theme-575" id="rd-theme-578" autocomplete="off" checked>
<label class="btn btn-outline-primary d-flex flex-column align-items-center px-4 py-3" for="rd-theme-578"><span class="fs-3"><i class="bi bi-circle-half" aria-hidden="true"></i></span><span class="small">System</span></label>
</div>
</div>20NPS scale
An 11-point scale from 0 to 10 coloured by detractor, passive and promoter.
<fieldset>
<legend class="fs-6 fw-semibold">How likely are you to recommend Novaera to a friend?</legend>
<div class="d-flex flex-wrap gap-1">
<input type="radio" class="btn-check" name="nps-579" id="rd-nps-580" autocomplete="off">
<label class="btn btn-sm btn-outline-danger tl-nps" for="rd-nps-580">0</label>
<input type="radio" class="btn-check" name="nps-579" id="rd-nps-581" autocomplete="off">
<label class="btn btn-sm btn-outline-danger tl-nps" for="rd-nps-581">1</label>
<input type="radio" class="btn-check" name="nps-579" id="rd-nps-582" autocomplete="off">
<label class="btn btn-sm btn-outline-danger tl-nps" for="rd-nps-582">2</label>
<input type="radio" class="btn-check" name="nps-579" id="rd-nps-583" autocomplete="off">
<label class="btn btn-sm btn-outline-danger tl-nps" for="rd-nps-583">3</label>
<input type="radio" class="btn-check" name="nps-579" id="rd-nps-584" autocomplete="off">
<label class="btn btn-sm btn-outline-danger tl-nps" for="rd-nps-584">4</label>
<input type="radio" class="btn-check" name="nps-579" id="rd-nps-585" autocomplete="off">
<label class="btn btn-sm btn-outline-danger tl-nps" for="rd-nps-585">5</label>
<input type="radio" class="btn-check" name="nps-579" id="rd-nps-586" autocomplete="off">
<label class="btn btn-sm btn-outline-danger tl-nps" for="rd-nps-586">6</label>
<input type="radio" class="btn-check" name="nps-579" id="rd-nps-587" autocomplete="off">
<label class="btn btn-sm btn-outline-warning tl-nps" for="rd-nps-587">7</label>
<input type="radio" class="btn-check" name="nps-579" id="rd-nps-588" autocomplete="off">
<label class="btn btn-sm btn-outline-warning tl-nps" for="rd-nps-588">8</label>
<input type="radio" class="btn-check" name="nps-579" id="rd-nps-589" autocomplete="off">
<label class="btn btn-sm btn-outline-success tl-nps" for="rd-nps-589">9</label>
<input type="radio" class="btn-check" name="nps-579" id="rd-nps-590" autocomplete="off">
<label class="btn btn-sm btn-outline-success tl-nps" for="rd-nps-590">10</label>
</div>
<div class="d-flex justify-content-between small text-body-secondary mt-1" style="max-width: 32rem;">
<span>Not at all likely</span><span>Extremely likely</span>
</div>
</fieldset>