Checkboxes and radios in Bootsrap

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>

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.

Practice

1. What is the main difference between checkboxes and radio buttons in Bootstrap forms?

easy

A. Radios can be unchecked by clicking again; checkboxes cannot.

B. Checkboxes allow multiple selections; radios allow only one selection.

C. Checkboxes are styled differently but behave the same as radios.

D. Checkboxes allow only one selection; radios allow multiple selections.

Solution

1. Step 1: Understand checkbox behavior

   Checkboxes let users pick more than one option at the same time.

2. Step 2: Understand radio button behavior

   Radio buttons let users pick only one option from a group.

3. Final Answer:

   Checkboxes allow multiple selections; radios allow only one selection. -> Option B

4. Quick Check:

   Checkboxes = multiple, Radios = single [OK]

Hint: Checkboxes = many choices, radios = one choice [OK]

Common Mistakes:

• Confusing which input allows multiple selections
• Thinking radios can be unchecked by clicking again
• Assuming checkboxes behave like radios

2. Which of the following is the correct Bootstrap structure for a single checkbox input with label?

easy

A. Option 1

B. Option 1

C. Option 1

D. Option 1

Solution

1. Step 1: Check input and label classes

   Bootstrap requires form-check-input on the input and form-check-label on the label.

2. Step 2: Verify input type and id-label connection

   The input must be type checkbox and the label's for attribute must match input's id.

3. Final Answer:

   Option A has correct classes, input type, and label connection. -> Option A

4. Quick Check:

   Correct classes and matching id-for =
   Option 1 [OK]

Hint: Input uses form-check-input; label uses form-check-label [OK]

Common Mistakes:

• Swapping classes between input and label
• Using wrong input type for checkbox
• Not matching label's for attribute with input id

3. What will be the visual result of this Bootstrap code snippet?

<div class='form-check'>
  <input class='form-check-input' type='radio' name='color' id='red' checked>
  <label class='form-check-label' for='red'>Red</label>
</div>
<div class='form-check'>
  <input class='form-check-input' type='radio' name='color' id='blue'>
  <label class='form-check-label' for='blue'>Blue</label>
</div>

medium

A. Two checkboxes labeled Red and Blue; Blue is selected by default.

B. Two radio buttons labeled Red and Blue; none selected by default.

C. Two radio buttons labeled Red and Blue; Red is selected by default.

D. Two checkboxes labeled Red and Blue; Red is selected by default.

Solution

1. Step 1: Identify input types and attributes

   Both inputs are radio buttons with the same name 'color', so only one can be selected.

2. Step 2: Check which radio is checked by default

   The input with id 'red' has the checked attribute, so it is selected initially.

3. Final Answer:

   Two radio buttons labeled Red and Blue; Red is selected by default. -> Option C

4. Quick Check:

   Radio with checked attribute = selected [OK]

Hint: Look for checked attribute on radio inputs [OK]

Common Mistakes:

• Confusing radio buttons with checkboxes
• Ignoring the checked attribute
• Assuming multiple radios can be selected

4. Identify the error in this Bootstrap checkbox code:

<div class='form-check'>
  <input class='form-check-input' type='checkbox' id='agree'>
  <label class='form-check-label' id='agree'>I agree</label>
</div>

medium

A. The input type should be radio, not checkbox.

B. The input is missing the class form-check-label.

C. The div should have class form-check-input instead of form-check.

D. The label uses id instead of for attribute to link to input.

Solution

1. Step 1: Check label linkage to input

   Labels must use the for attribute matching the input's id for accessibility and clicking.

2. Step 2: Identify incorrect attribute usage

   The label incorrectly uses id='agree' instead of for='agree'.

3. Final Answer:

   The label uses id instead of for attribute to link to input. -> Option D

4. Quick Check:

   Label uses for, not id, to link input [OK]

Hint: Label must use for attribute matching input id [OK]

Common Mistakes:

• Using id on label instead of for
• Missing form-check-input class on input
• Confusing input types checkbox vs radio

5. You want to create a group of checkboxes in Bootstrap where users can select multiple fruits. Which code snippet correctly implements this with accessible labels and Bootstrap styling?

hard

A. \n \n Apple\n\n\n \n Banana\n

B. \n \n Apple\n\n\n \n Banana\n

C. \n \n Apple\n\n\n \n Banana\n

D. \n \n Apple\n\n\n \n Banana\n

Solution

1. Step 1: Confirm input types for multiple selection

   Checkboxes allow multiple selections, so input type must be checkbox.

2. Step 2: Check label and input classes and attributes

   Inputs must have class form-check-input, labels must have form-check-label, and labels must use for matching input id.

3. Step 3: Verify unique ids and consistent names

   Each checkbox has a unique id and the same name attribute to group them logically.

4. Final Answer:

   Option A correctly uses checkboxes with proper classes, unique ids, and accessible labels. -> Option A

5. Quick Check:

   Checkboxes + form-check-input + matching for/id =
   \n \n Apple\n\n

   \n \n Banana\n

   [OK]

Hint: Use checkbox type and matching for/id for labels [OK]

Common Mistakes:

• Using radio buttons instead of checkboxes for multiple choices
• Repeating ids for different inputs
• Swapping input and label classes