0
0
Bootsrapmarkup~5 mins

Checkboxes and radios in Bootsrap

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

Checkboxes and radio buttons let users pick options on a form. They help collect choices easily.

When you want users to select one or more options from a list.
When you need to ask yes/no questions.
When you want users to pick only one option from a group.
When you want to show clear clickable options on a form.
When you want to style form inputs quickly with Bootstrap.
Syntax
Bootsrap
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
  <label class="form-check-label" for="flexCheckDefault">
    Default checkbox
  </label>
</div>

<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
  <label class="form-check-label" for="exampleRadios1">
    First radio
  </label>
</div>

Use form-check class to wrap each checkbox or radio for proper spacing.

Use form-check-input on the input and form-check-label on the label for Bootstrap styling.

Examples
A simple checkbox with label linked by for and id.
Bootsrap
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="check1">
  <label class="form-check-label" for="check1">
    Option 1
  </label>
</div>
Two radio buttons in the same group. Only one can be selected.
Bootsrap
<div class="form-check">
  <input class="form-check-input" type="radio" name="group1" id="radio1" value="1" checked>
  <label class="form-check-label" for="radio1">
    Radio 1
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="group1" id="radio2" value="2">
  <label class="form-check-label" for="radio2">
    Radio 2
  </label>
</div>
A checkbox styled as a toggle switch using form-switch.
Bootsrap
<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault">
  <label class="form-check-label" for="flexSwitchCheckDefault">Toggle switch</label>
</div>
Sample Program

This page shows a form with checkboxes and radio buttons styled by Bootstrap. Users can pick multiple fruits with checkboxes and one fruit with radio buttons.

Bootsrap
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap Checkboxes and Radios</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <main class="container py-4">
    <h1>Choose your options</h1>
    <form>
      <section>
        <h2>Checkboxes</h2>
        <div class="form-check">
          <input class="form-check-input" type="checkbox" value="apple" id="checkApple">
          <label class="form-check-label" for="checkApple">Apple</label>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="checkbox" value="banana" id="checkBanana">
          <label class="form-check-label" for="checkBanana">Banana</label>
        </div>
      </section>
      <section class="mt-4">
        <h2>Radio buttons</h2>
        <div class="form-check">
          <input class="form-check-input" type="radio" name="fruit" id="radioOrange" value="orange" checked>
          <label class="form-check-label" for="radioOrange">Orange</label>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="radio" name="fruit" id="radioGrape" value="grape">
          <label class="form-check-label" for="radioGrape">Grape</label>
        </div>
      </section>
      <button type="submit" class="btn btn-primary mt-3">Submit</button>
    </form>
  </main>
</body>
</html>
OutputSuccess
Important Notes

Always link label to input using matching for and id for better accessibility.

Use the same name attribute for radio buttons in a group to allow only one selection.

Bootstrap's form-check classes handle spacing and alignment automatically.

Summary

Checkboxes let users select multiple options; radios let users select one.

Bootstrap styles checkboxes and radios with form-check, form-check-input, and form-check-label classes.

Always connect labels to inputs for easy clicking and accessibility.