Form Checkbox and Radio Components in Bootstrap 5.3

In Bootstrap 5.3, form checkbox and radio components are part of the built-in form control features provided by the framework. These components allow you to create checkboxes and radio buttons that are styled consistently across different browsers and devices.

Form Checkbox:

A form checkbox is a UI component that allows users to select one or more options from a predefined list. In Bootstrap 5.3, you can create checkboxes using the <input> element with the type="checkbox" attribute. To style these checkboxes, you can add the form-check class to the parent <div> or <label> element, and the checkbox itself will automatically receive the form-check-input class.

<div class="form-check">
    <input type="checkbox" class="form-check-input" id="check1" />
    <label for="check1" class="form-check-label"> Bootstrap Simple Checkbox</label>
</div>

Checked Keyword in Checkbox

In Bootstrap 5.3, the checked value of a form checkbox can be accessed using JavaScript. Here's an example of how you can retrieve the checked value of a checkbox using Bootstrap 5.3

<div class="form-check">
    <input type="checkbox" class="form-check-input" id="check2" checked />
    <label for="check2" class="form-check-label"> Bootstrap Simple Checkbox Checked</label>
</div>

Inside the <div>, there is an <input> element with the class "form-check-input." The type attribute is set to "checkbox" to indicate that it's a checkbox input. The id attribute is set to "check2" to associate the input with the label. The "checked" attribute is included, which makes the checkbox initially selected or checked.

Form Radio:

A form radio button is a UI component that allows users to select a single option from a predefined set of options. In Bootstrap 5.3, you can create radio buttons using the <input> element with the type="radio" attribute. Similar to checkboxes, you can style radio buttons by adding the form-check class to the parent <div> or <label> element, and the radio button itself will receive the form-check-input class.

<div class="form-check">
    <input type="radio" class="form-check-input" id="radio1" name="radioSample" />
    <label for="radio1" class="form-check-label"> Bootstrap Simple Radio</label>
</div>

Bootstrap Custom Checkbox as Switch

To create a Bootstrap custom checkbox that looks like a switch in Bootstrap 5.3, you can use the Bootstrap Switch plugin. This plugin enhances the default checkbox component and transforms it into a toggle switch. Here's how you can implement it

Include the necessary CSS and JavaScript files for Bootstrap in your HTML file. You can either download the files and host them locally or use a CDN.

<div class="form-check form-switch">
    <input type="checkbox" class="form-check-input" id="switch1" role="switch" />
    <label for="switch1" class="form-check-label"> Bootstrap Switch Unchecked</label>
</div>

The outer <div> element has the classes "form-check" and "form-switch" applied to it. These classes are used to style the checkbox switch.
Inside the <div>, there is an <input> element with the class "form-check-input". The type attribute is set to "checkbox" to indicate that it's a checkbox input. The id attribute is set to "switch1" to associate the input with the label using the for attribute.
The <input> element also has the attribute role="switch". This ARIA attribute helps in providing semantic meaning to assistive technologies, indicating that the input element represents a switch.
Following the <input> element, there is a <label> element with the class "form-check-label". The for attribute is set to "switch1" to associate the label with the corresponding checkbox using its unique id value. The label text is "Bootstrap Switch Unchecked."
By using these HTML elements and Bootstrap classes, the code creates a checkbox switch with the unchecked state. The switch will be styled according to the Bootstrap form control style, with the appearance of a toggle switch.

Inline Checkbox

To create an inline checkbox layout in Bootstrap 5.3, you can use the form-check-inline class to align the checkboxes horizontally.

<div class="form-check form-check-inline">
  <input type="checkbox" id="checkCourse1" class="form-check-input" />
  <label for="checkCourse1" class="form-check-label">C Program</label>
</div>

The outer <div> element has the classes "form-check" and "form-check-inline" applied to it. These classes are used to create an inline layout for the checkbox and label.

Inside the <div>, there is an <input> element with the class "form-check-input". The type attribute is set to "checkbox" to indicate that it's a checkbox input. The id attribute is set to "checkCourse1" to uniquely identify the checkbox.

Inline Radio

To create an inline radio box layout in Bootstrap 5.3, you can use the form-check-inline class to align the radio buttons horizontally. Here's an example:

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

The outer <div> element has the classes "form-check" and "form-check-inline" applied to it. These classes are used to create an inline layout for the radio button and label.

Inside the <div>, there is an <input> element with the type attribute set to "radio". This indicates that it's a radio button input. The name attribute is set to "gender" to group the radio buttons together. The id attribute is set to "male" to uniquely identify the radio button.

Reverse Radio or Checkbox or Switch

To position your checkboxes, radios, and switches on the opposite side, you can use the .form-check-reverse modifier class.

<div class="form-check form-check-reverse">
    <input type="checkbox" id="check7" class="form-check-input" />
    <label for="check7" class="form-check-label">Reverse Checkbox</label>
</div>

<div class="form-check form-check-reverse">
    <input type="radio" id="radio5" class="form-check-input" />
    <label for="radio5" class="form-check-label">Reverse Radio</label>
</div>

<div class="form-check form-check-reverse form-switch">
    <input type="checkbox" id="switch5" class="form-check-input" />
    <label for="switch5" class="form-check-label">Reverse Switch</label>
</div>

Toggle Buttons

In Bootstrap 5.3, you can use the "btn-toggle" class to create toggle buttons. Toggle buttons are similar to switches and allow users to toggle between two states. Here's an example

<div class="my-3">
    <input type="checkbox" id="btn-check" class="btn-check" />
    <label for="btn-check" class="btn btn-primary">Simple Checkbox Toggle Unchecked</label>
</div>
<div class="my-3">
    <input type="checkbox" id="btn-check2" class="btn-check" checked />
    <label for="btn-check2" class="btn btn-primary">Simple Checkbox Toggle Unchecked</label>
</div>

<div class="my-3">
    <input type="checkbox" id="btn-check3" class="btn-check" disabled />
    <label for="btn-check3" class="btn btn-primary">Simple Checkbox Toggle Unchecked</label>
</div>

Radio Toggle Buttons

In Bootstrap 5.3, you can use the "btn-toggle" class to create toggle buttons. Toggle buttons are similar to switches and allow users to toggle between two states. Here's an example

<div class="my-3">
    <input type="radio" id="btn-radio-check1" name="options" class="btn-check" />
    <label for="btn-radio-check1" class="btn btn-secondary">Simple Radio Toggle Unchecked</label>
</div>
<div class="my-3">
    <input type="radio" id="btn-radio-check2" name="options" class="btn-check" />
    <label for="btn-radio-check2" class="btn btn-secondary">Simple Radio Toggle checked</label>
</div>

Example

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Checkbox & Radio in Bootstrap</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="css/base.css" />
  </head>
  <body>
    <div class="container my-5">
      <h4 class="text-danger mb-3">Checkbox & Radio in Bootstrap</h4>

      <p class="fw-semibold text-dark border-bottom border-dark border-2 py-3">Simple HTML Checkbox</p>
      <div class="mb-3">
        <input type="checkbox" id="simpleCheck" />
        <label for="simpleCheck"> Simple Checkbox</label>
      </div>

      <p class="fw-semibold text-primary border-bottom border-primary py-3">Checkbox in With Bootstrap Class</p>

      <div class="form-check">
        <input type="checkbox" class="form-check-input" id="check1" />
        <label for="check1" class="form-check-label"> Bootstrap Simple Checkbox</label>
      </div>

      <div class="form-check">
        <input type="checkbox" class="form-check-input" id="check2" checked />
        <label for="check2" class="form-check-label"> Bootstrap Simple Checkbox Checked</label>
      </div>

      <div class="form-check">
        <input type="checkbox" class="form-check-input" id="check3" />
        <label for="check3" class="form-check-label"> Bootstrap Indeterminate Checkbox</label>
      </div>

      <p class="fw-semibold text-primary border-bottom border-primary py-3">Checkbox Disable with 3 States Checked | Unchecked | Indeterminate</p>

      <div class="form-check">
        <input type="checkbox" class="form-check-input" id="check4" disabled />
        <label for="check4" class="form-check-label"> Bootstrap Disabled Unchecked Checkbox</label>
      </div>

      <div class="form-check">
        <input type="checkbox" class="form-check-input" id="check5" disabled checked />
        <label for="check5" class="form-check-label"> Bootstrap Disabled checked Checkbox</label>
      </div>

      <div class="form-check">
        <input type="checkbox" class="form-check-input" id="check6" disabled />
        <label for="check6" class="form-check-label"> Bootstrap Disabled Indeterminate Checkbox</label>
      </div>

      <p class="fw-semibold text-dark border-bottom border-dark border-2 py-3">Simple HTML Radio</p>
      <div class="mb-3">
        <input type="radio" id="simpleRadio" />
        <label for="simpleRadio"> Simple Radio Button</label>
      </div>

      <p class="fw-semibold text-primary border-bottom border-primary py-3">Radio in With Bootstrap Class</p>
      <div class="form-check">
        <input type="radio" class="form-check-input" id="radio1" name="radioSample" />
        <label for="radio1" class="form-check-label"> Bootstrap Simple Radio</label>
      </div>

      <div class="form-check">
        <input type="radio" class="form-check-input" id="radio2" name="radioSample" checked />
        <label for="radio2" class="form-check-label"> Bootstrap Simple Radio Checked</label>
      </div>

      <p class="fw-semibold text-primary border-bottom border-primary py-3">Radio Disable with 2 States Checked | Unchecked</p>

      <div class="form-check">
        <input type="radio" class="form-check-input" id="radio3" disabled />
        <label for="radio3" class="form-check-label"> Bootstrap Disabled Unchecked Radio</label>
      </div>

      <div class="form-check">
        <input type="radio" class="form-check-input" id="radio4" disabled checked />
        <label for="radio4" class="form-check-label"> Bootstrap Disabled checked Radio</label>
      </div>

      <p class="fw-semibold text-dark border-bottom border-dark border-2 py-3">Bootstrap Custom Checkbox as <b>Switch</b></p>

      <div class="form-check form-switch">
        <input type="checkbox" class="form-check-input" id="switch1" role="switch" />
        <label for="switch1" class="form-check-label"> Bootstrap Switch Unchecked</label>
      </div>

      <div class="form-check form-switch">
        <input type="checkbox" class="form-check-input" id="switch2" role="switch" checked />
        <label for="switch2" class="form-check-label"> Bootstrap Switch Checked</label>
      </div>

      <div class="form-check form-switch">
        <input type="checkbox" class="form-check-input" id="switch3" role="switch" disabled />
        <label for="switch3" class="form-check-label"> Bootstrap Switch Unchecked Disabled</label>
      </div>

      <div class="form-check form-switch">
        <input type="checkbox" class="form-check-input" id="switch4" role="switch" checked disabled />
        <label for="switch4" class="form-check-label"> Bootstrap Switch Checked Disabled</label>
      </div>

      <p class="fw-semibold text-primary border-bottom border-primary py-3">Inline Design Checkbox</p>

      <div class="container">
        <div class="form-check form-check-inline">
          <input type="checkbox" id="checkCourse1" class="form-check-input" />
          <label for="checkCourse1" class="form-check-label">C Program</label>
        </div>
        <div class="form-check form-check-inline">
          <input type="checkbox" id="checkCourse2" checked class="form-check-input" />
          <label for="checkCourse2" class="form-check-label">C++</label>
        </div>
        <div class="form-check form-check-inline">
          <input type="checkbox" id="checkCourse3" class="form-check-input" />
          <label for="checkCourse3" class="form-check-label">Java</label>
        </div>

        <div class="form-check form-check-inline">
          <input type="checkbox" id="checkCourse4" disabled class="form-check-input" />
          <label for="checkCourse4" class="form-check-label">.Net</label>
        </div>

        <div class="form-check form-check-inline">
          <input type="checkbox" id="checkCourse4" checked disabled class="form-check-input" />
          <label for="checkCourse4" class="form-check-label">Computer Basic</label>
        </div>
      </div>

      <p class="fw-semibold text-primary border-bottom border-primary py-3">Inline Design Radio Button</p>

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

      <p class="fw-semibold text-primary border-bottom border-primary py-3">Radio Button With Disable State</p>
      <div class="container my-2">
        <div class="form-check form-check-inline">
          <input type="radio" name="eduction" id="ug" class="form-check-input" disabled />
          <label for="ug" class="form-check-label">U.G</label>
        </div>
        <div class="form-check form-check-inline">
          <input type="radio" name="eduction" id="pg" class="form-check-input" checked disabled />
          <label for="pg" class="form-check-label">P.G</label>
        </div>
      </div>

      <p class="fw-semibold text-primary border-bottom border-primary py-3">Reverse Radio or Checkbox or Switch</p>

      <div class="form-check form-check-reverse">
        <input type="checkbox" id="check7" class="form-check-input" />
        <label for="check7" class="form-check-label">Reverse Checkbox</label>
      </div>

      <div class="form-check form-check-reverse">
        <input type="radio" id="radio5" class="form-check-input" />
        <label for="radio5" class="form-check-label">Reverse Radio</label>
      </div>

      <div class="form-check form-check-reverse form-switch">
        <input type="checkbox" id="switch5" class="form-check-input" />
        <label for="switch5" class="form-check-label">Reverse Switch</label>
      </div>

      <p class="fw-semibold text-dark border-bottom border-dark border-2 py-3">Toggle Buttons</p>

      <p class="fw-semibold text-primary border-bottom border-primary py-3">Checkbox Toggle Button</p>
      <div class="my-3">
        <input type="checkbox" id="btn-check" class="btn-check" />
        <label for="btn-check" class="btn btn-primary">Simple Checkbox Toggle Unchecked</label>
      </div>
      <div class="my-3">
        <input type="checkbox" id="btn-check2" class="btn-check" checked />
        <label for="btn-check2" class="btn btn-primary">Simple Checkbox Toggle Unchecked</label>
      </div>

      <div class="my-3">
        <input type="checkbox" id="btn-check3" class="btn-check" disabled />
        <label for="btn-check3" class="btn btn-primary">Simple Checkbox Toggle Unchecked</label>
      </div>

      <p class="fw-semibold text-primary border-bottom border-primary py-3">Radio Toggle Button</p>

      <div class="my-3">
        <input type="radio" id="btn-radio-check1" name="options" class="btn-check" />
        <label for="btn-radio-check1" class="btn btn-secondary">Simple Radio Toggle Unchecked</label>
      </div>
      <div class="my-3">
        <input type="radio" id="btn-radio-check2" name="options" class="btn-check" />
        <label for="btn-radio-check2" class="btn btn-secondary">Simple Radio Toggle checked</label>
      </div>

      <p class="fw-semibold text-primary border-bottom border-primary py-3">Toggle Button Colors can change by btn classes</p>

      <div class="my-3">
        <input type="checkbox" id="btn-check4" class="btn-check" />
        <label for="btn-check4" class="btn btn-danger">Simple Checkbox Toggle Primary Color</label>
      </div>
      <div class="my-3">
        <input type="checkbox" id="btn-check5" class="btn-check" />
        <label for="btn-check5" class="btn btn-outline-danger">Simple Checkbox Toggle Primary Outline</label>
      </div>

      <!--Container end -->
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    <script>
      const check3 = document.getElementById("check3");
      check3.indeterminate = true;

      const check6 = document.getElementById("check6");
      check6.indeterminate = true;
    </script>
  </body>
</html>

Live Preview