BS5-checkbox-disabled

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

by

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 the 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:

Bootstrap5-checkbox

Example code:

<!DOCTYPE html>
<html>
<head>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">

</head>



<body>

<div class="container m-4">

<h2>Which are you favourites?</h2>

<div class="form-check">

  <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">

  <label class="form-check-label" for="flexCheckDefault">

    Java

  </label>

</div>

<div class="form-check">

  <input class="form-check-input" type="checkbox" value="" id="flexCheckChecked" checked>

  <label class="form-check-label" for="flexCheckChecked">

    Python

  </label>

</div>

<div class="form-check">

  <input class="form-check-input" type="checkbox" value="" id="flexCheckChecked" >

  <label class="form-check-label" for="flexCheckChecked">

    Kotlin

  </label>

</div>

<div class="form-check">

  <input class="form-check-input" type="checkbox" value="" id="flexCheckChecked" checked>

  <label class="form-check-label" for="flexCheckChecked">

    C#

  </label>

</div>

</div>

</body>

</html>

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:

Online demo and code

checkbox-Indeterminate

<!DOCTYPE html>
<html>
<head>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>

</head>

<body>

<div class="container m-4">

<h3 id="indeterminate">Indeterminate Checboxes</h3>

<div class="form-check">

  <input class="form-check-input" type="checkbox" value="" id="flexCheckIndeterminate">

  <label class="form-check-label" for="flexCheckIndeterminate">

    Bootstrap

  </label>

</div>

<div class="form-check">

  <input class="form-check-input" type="checkbox" value="" id="flexCheckIndeterminate2" >

  <label class="form-check-label" for="flexCheckIndeterminate2">

  Bulma

  </label>

</div>

<div class="form-check">

  <input class="form-check-input" type="checkbox" value="" id="flexCheckIndeterminate3" >

  <label class="form-check-label" for="flexCheckIndeterminate2">

  Materialize

  </label>

</div>
<div class="form-check">

  <input class="form-check-input" type="checkbox" value="" id="flexCheckIndeterminate4" >

  <label class="form-check-label" for="flexCheckIndeterminate4">

  Skeleton

  </label>

</div>
</div>

<script>

  var x = document.getElementById("flexCheckIndeterminate").indeterminate = true;
  var x = document.getElementById("flexCheckIndeterminate2").indeterminate = true;
  var x = document.getElementById("flexCheckIndeterminate3").indeterminate = true;
  var x = document.getElementById("flexCheckIndeterminate4").indeterminate = true;

</script>

</body>

</html>

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:

<!DOCTYPE html>
<html>
<head>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</head>

<body>

<div class="container m-4">

<h2>Disabled Checkbox</h2>

<div class="form-check">

  <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault" disabled>

  <label class="form-check-label" for="flexCheckDefault">

    Bootstrap

  </label>

</div>

<div class="form-check">

  <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault" disabled>

  <label class="form-check-label" for="flexCheckDefault">

  Bulma

  </label>

</div>

<div class="form-check">

  <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault" disabled>

  <label class="form-check-label" for="flexCheckDefault">

  Materialize

  </label>

</div>

<div class="form-check">

  <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault" disabled>

  <label class="form-check-label" for="flexCheckDefault">

  Skeleton

  </label>

</div>

</div>

</body>

</html>

Result:

BS5-checkbox-disabled

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:

<!DOCTYPE html>
<html>
<head>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">

</head>

<body>

<div class="container m-4">

<h3>Inline Checkboxes</h3>

<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">Bootstrap</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">Bulma</label>

</div>

<div class="form-check form-check-inline">

  <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled>

  <label class="form-check-label" for="inlineCheckbox3">Materialize (disabled)</label>

</div>
<div class="form-check form-check-inline">

  <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option4">

  <label class="form-check-label" for="inlineCheckbox3">Pure </label>

</div>
</div>

</body>

</html>

BS5-checkbox-inline

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:

Online demo and code
<!DOCTYPE html>
<html>

<head>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
</head>

<body>
<div class="container m-4">

<h3>Switch Checkboxes</h3>

<div class="form-check form-switch">

    <input class="form-check-input" type="checkbox" id="switchDefault">

    <label class="form-check-label" for="switchDefault">Java</label>

</div>

<div class="form-check form-switch">

    <input class="form-check-input" type="checkbox" id="switchChecked" checked>

    <label class="form-check-label" for="switchChecked">Python</label>

</div>

<div class="form-check form-switch">

    <input class="form-check-input" type="checkbox" id="switchDisabled" disabled>

    <label class="form-check-label" for="switchDisabled">Fox Pro</label>

</div>

<div class="form-check form-switch">

    <input class="form-check-input" type="checkbox" id="switchDefault" >

    <label class="form-check-label" for="switchDefault">Kotlin</label>

</div>

<div class="form-check form-switch">

    <input class="form-check-input" type="checkbox" id="switchDefault" >

    <label class="form-check-label" for="switchDefault">Go Lang</label>

</div>

<div class="form-check form-switch">

    <input class="form-check-input" type="checkbox" id="switchDisabled" disabled>

    <label class="form-check-label" for="switchDisabled">COBOL</label>

</div>

</div>

</body>

</html>

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:

BS5-checkbox-toggle-btn

Code:

<!DOCTYPE html>
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
</head>
<body>

<div class="container m-4">

<h3>Checkbox toggle buttons</h3>

<div class="form-check">

<input type="checkbox" class="btn-check" id="btn-check" autocomplete="off">

<label class="btn btn-primary" for="btn-check">Single toggle</label>

</div>

<br><br>

<div class="form-check">

<input type="checkbox" class="btn-check" id="btn-check-2" checked autocomplete="off">

<label class="btn btn-primary" for="btn-check-2">Checked</label>

</div>

<br><br>

<div class="form-check">

<input type="checkbox" class="btn-check" id="btn-check-3" autocomplete="off" disabled>

<label class="btn btn-primary" for="btn-check-3">Disabled</label>

</div>

</div>
</body>

</html>

Checkbox buttons – outlined style

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

checkbox-toggle-outline

<!DOCTYPE html>
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
</head>

<body>

<div class="container m-4">

<h3>Toggle button outlined</h3>

<input type="checkbox" class="btn-check" id="btn-check-outlined" autocomplete="off">

<label class="btn btn-outline-success" for="btn-check-outlined">Single toggle Outlined</label><br><br><br>

<input type="checkbox" class="btn-check" id="btn-check-2-outlined" checked autocomplete="off">

<label class="btn btn-outline-warning" for="btn-check-2-outlined">Checked Outlined</label><br><br><br>

<input type="checkbox" class="btn-check" id="btn-check-2-outlined" disabled autocomplete="off">

<label class="btn btn-outline-warning" for="btn-check-2-outlined">Disabled Outlined</label><br><br><br>

</div>

</body>

</html>

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

    Related Tutorials:
  1. Bootstrap 3 Checkbox
  2. 31 Animated Bootstrap Popovers and Modals by velocity.js
  3. Dropdown in Bootstrap 4
  4. A little about Bulma Buttons
  5. 12 Examples to Learn Using Bootstrap 5 Dropdown
  6. Button Styles in Bootstrap 4
  7. Forms in Bootstrap 4
  8. Bootstrap Buttons with 9 Demos
  9. How to Create Button Groups in Bootstrap 5
  10. Bootstrap 5 Carousel: Learn with 8 Demos