Bootstrap 5 Checkboxes and Radio Buttons

How it works

Checkboxes represent independent on/off choices, while a radio group selects one option from a related set. Radios share a name and have distinct IDs and values. A fieldset and legend can supply the group question without repeating it in every label. Avoid a consent checkbox that is preselected or bundled into an unrelated choice. This example’s optional reminder is only local sample state and does not subscribe anyone or transmit contact information.

Run and inspect

Save the complete document as index.html in a separate lab folder. Place Bootstrap 5.3.8 CSS beside it. Open the file in a normal browser. A separate local static server is optional; no database or PHP execution is required. Keep the Bootstrap licence with redistributed assets.

Download this complete HTML source.

Try in playground

The preview injects local Bootstrap CSS when you select Run code. It blocks external resources and actual form submission; nothing runs on import. Bootstrap plugin scripts are not loaded there.

Example

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap 5 Distinguish Independent Options From One Required Choice</title>
  <link rel="stylesheet" href="bootstrap.min.css">
</head>
<body>
<main class="container py-4">
  <h1 class="h3 mb-4">Repair day</h1>
<form><fieldset class="mb-3"><legend class="fs-6">Which practice material?</legend><div class="form-check"><input class="form-check-input" type="radio" name="material" id="material-paper" value="paper" checked><label class="form-check-label" for="material-paper">Paper</label></div><div class="form-check"><input class="form-check-input" type="radio" name="material" id="material-fabric" value="fabric"><label class="form-check-label" for="material-fabric">Fabric</label></div></fieldset><div class="form-check"><input class="form-check-input" type="checkbox" id="reminder"><label class="form-check-label" for="reminder">Show the local reminder option</label></div></form>
</main>
</body>
</html>

Expected result

Selecting Fabric clears Paper, while the independent checkbox can be toggled separately.

The shared radio name makes the exclusivity native browser behaviour. Clicking the associated label also activates its control. A switch uses checkbox semantics under Bootstrap styling; it is appropriate for a clear binary setting, not a replacement for an unexplained mode change. State must match any actual saved preference before claiming persistence.