Bootstrap - BS-5 checkboxes and radio buttons

Bootstrap 5 provides a modern and flexible way to create checkboxes and radio buttons with the .form-check component. It replaces the older .custom-control system from Bootstrap 4 and makes it simpler, more responsive, and more accessible.

1. Basic Checkboxes

Bootstrap uses the .form-check class for checkboxes. Inside it, you have:

.form-check-input → for the checkbox itself.
.form-check-label → for the label text.

Example: Basic Checkbox

<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="checkbox" value="" id="flexCheckChecked" checked>
  <label class="form-check-label" for="flexCheckChecked">
    Checked checkbox
  </label>
</div>

Key Points:

checked → Makes the checkbox selected by default.
id + for → Links input and label for better accessibility.

2. Basic Radio Buttons

Radio buttons work similarly but require the same name attribute so only one option can be selected.

Example: Basic Radios

<div class="form-check">
  <input class="form-check-input" type="radio" name="gender" id="male" checked>
  <label class="form-check-label" for="male">
    Male
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="gender" id="female">
  <label class="form-check-label" for="female">
    Female
  </label>
</div>

Key Point:
All radio buttons in the same group must share the same name.

3. Inline Checkboxes and Radios

Use .form-check-inline to display multiple checkboxes or radios horizontally.

Example: Inline Checkboxes

<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
  <label class="form-check-label" for="inlineCheckbox1">HTML</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
  <label class="form-check-label" for="inlineCheckbox2">CSS</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3">
  <label class="form-check-label" for="inlineCheckbox3">JavaScript</label>
</div>

Example: Inline Radios

<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
  <label class="form-check-label" for="inlineRadio1">Option 1</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
  <label class="form-check-label" for="inlineRadio2">Option 2</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled>
  <label class="form-check-label" for="inlineRadio3">Disabled</label>
</div>

4. Switch-Style Checkboxes

Bootstrap 5 allows you to turn checkboxes into toggle switches using .form-switch.

Example: Switches

<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault">
  <label class="form-check-label" for="flexSwitchCheckDefault">Default switch</label>
</div>

<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" id="flexSwitchCheckChecked" checked>
  <label class="form-check-label" for="flexSwitchCheckChecked">Checked switch</label>
</div>

5. Disabled States

You can disable individual checkboxes or radios, or disable the entire .form-check block.

Example: Disabled Checkboxes

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="disabledCheckbox" disabled>
  <label class="form-check-label" for="disabledCheckbox">
    Disabled checkbox
  </label>
</div>

Example: Disabled Radios

<div class="form-check">
  <input class="form-check-input" type="radio" name="disabledRadio" id="disabledRadio1" disabled>
  <label class="form-check-label" for="disabledRadio1">
    Disabled radio
  </label>
</div>

6. Custom Colors for Checkboxes and Radios

Bootstrap 5 supports color variants using utility classes.

<div class="form-check">
  <input class="form-check-input bg-primary" type="checkbox" id="primaryCheck">
  <label class="form-check-label" for="primaryCheck">Primary</label>
</div>
<div class="form-check">
  <input class="form-check-input bg-success" type="checkbox" id="successCheck" checked>
  <label class="form-check-label" for="successCheck">Success</label>
</div>
<div class="form-check">
  <input class="form-check-input bg-danger" type="checkbox" id="dangerCheck">
  <label class="form-check-label" for="dangerCheck">Danger</label>
</div>

7. Checkbox and Radio Validation

Bootstrap 5 supports form validation styles for checkboxes and radios.

<form class="needs-validation" novalidate>
  <div class="mb-3">
    <p>Select your favorite language:</p>
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="htmlCheck" required>
      <label class="form-check-label" for="htmlCheck">HTML</label>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="cssCheck" required>
      <label class="form-check-label" for="cssCheck">CSS</label>
    </div>
    <div class="invalid-feedback">
      Please select at least one option.
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit</button>
</form>

8. Full Example: All Types Together

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap 5 Checkboxes & Radios</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="p-4">

  <h3>Bootstrap 5 Checkboxes & Radios</h3>

  <!-- Basic Checkboxes -->
  <h5>Basic Checkboxes</h5>
  <div class="form-check">
    <input class="form-check-input" type="checkbox" id="check1" checked>
    <label class="form-check-label" for="check1">Checked</label>
  </div>
  <div class="form-check">
    <input class="form-check-input" type="checkbox" id="check2">
    <label class="form-check-label" for="check2">Unchecked</label>
  </div>

  <hr>

  <!-- Basic Radios -->
  <h5>Basic Radios</h5>
  <div class="form-check">
    <input class="form-check-input" type="radio" name="gender" id="male" checked>
    <label class="form-check-label" for="male">Male</label>
  </div>
  <div class="form-check">
    <input class="form-check-input" type="radio" name="gender" id="female">
    <label class="form-check-label" for="female">Female</label>
  </div>

  <hr>

  <!-- Inline Checkboxes -->
  <h5>Inline Checkboxes</h5>
  <div class="form-check form-check-inline">
    <input class="form-check-input" type="checkbox" id="inline1">
    <label class="form-check-label" for="inline1">HTML</label>
  </div>
  <div class="form-check form-check-inline">
    <input class="form-check-input" type="checkbox" id="inline2">
    <label class="form-check-label" for="inline2">CSS</label>
  </div>
  <div class="form-check form-check-inline">
    <input class="form-check-input" type="checkbox" id="inline3">
    <label class="form-check-label" for="inline3">JS</label>
  </div>

  <hr>

  <!-- Switches -->
  <h5>Switch Checkboxes</h5>
  <div class="form-check form-switch">
    <input class="form-check-input" type="checkbox" id="switch1">
    <label class="form-check-label" for="switch1">Default Switch</label>
  </div>
  <div class="form-check form-switch">
    <input class="form-check-input" type="checkbox" id="switch2" checked>
    <label class="form-check-label" for="switch2">Checked Switch</label>
  </div>

  <hr>

  <!-- Colors -->
  <h5>Custom Colors</h5>
  <div class="form-check">
    <input class="form-check-input bg-primary" type="checkbox" id="primaryCheck">
    <label class="form-check-label" for="primaryCheck">Primary</label>
  </div>
  <div class="form-check">
    <input class="form-check-input bg-danger" type="checkbox" id="dangerCheck">
    <label class="form-check-label" for="dangerCheck">Danger</label>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>