Bootstrap 5 Checkbox [Simple, Inline, switch, indeterminate, buttons and more]

How to create Checkbox in Bootstrap 5?

• A check allows selecting one or more options from two or more available options in web forms.
• A checkbox has default browser behavior. By using Bootstrap 5 classes for checkboxes, you may improve the layout and behavior of checkboxes
• By using BS 5, you may create normal, intermediate, and disabled state checkboxes
• All these are shown in the example below.

An example of creating normal Bootstrap 5 checkboxes

• For the input type checkbox, you will specify the .form-check-input class in order to apply the style provided by BS 5.
• For the checkbox label, use .form-check-label class and associate it to input checkbox by using its id.
• Structurally, the input and label act as siblings.

Have a look at an example below where we created four checkboxes:

See online demo and code

Particularly, notice two things:

• Id of the check element i.e. flexCheckDefault
• for=”flexCheckDefault” for associating the label

An example of indeterminate label

You may use the .indeterminate pseudo-class for creating intermediate state checkboxes.

No HTML attribute is available for specifying the indeterminate state, so it is done in JavaScript.

See an example of creating intermediate checkboxes:

See online demo and code

Notice the JavaScript used at the end before </body> tag. i.e.

  var x = document.getElementById(“flexCheckIndeterminate”).indeterminate = true;

An example of disabled checkboxes

For creating disabled checkboxes, simply use the disabled attribute of HTML in the input type checkbox. As you add the disabled attribute, the associated label is also disabled and the user won’t be able to interact with it.

See an example below:

See online demo and code

Creating Inline Checkboxes example

Want to create inline checkboxes? Just use the .form-check-inline class to any .form-check for creating inline group of checkboxes.

See an example and its output below:

See online demo and code

Turn checkboxes into switches

You may turn a checkbox into a toggle switch easily. For that, simply use the .form-switch class to render a toggle switch.

See an example below where we created six switches; one is checked, two are disabled and three are in normal state:

See online demo and code

Checkbox as Toggle Button example

Similarly, you may turn checkboxes into toggle buttons by using the .btn styles rather than .form-check-label on the <label> elements.

An example below shows how:

See online demo and code

Checkbox buttons –outlined style

Similarly, you may create checkbox outlined buttons by using outline class as shown in the example below:

See online demo and code

For reference: https://getbootstrap.com/docs/5.0/forms/checks-radios/