Bootstrap 5 Checks box is a square box that is ticked when it is activated. It allows the user to select one or more options among all the limited choices.
The checkbox check is used to tick (select) the checkbox item. The check has two options that are given below:
- Indeterminate: The checkboxes can use the :indeterminate pseudo-class to set the check state to indeterminate. It can be set by using JavaScript.
- Disabled: It is used to disable the checkboxes. To disable the checkbox, we will use the disabled attribute.
Syntax:
<div class="form-check">
<input class="form-check-input"
type="checkbox" value="..." id="...">
<label class="form-check-label" for="...">
Content
</label>
</div>
Example 1: In this example, we will create checkbox elements.
HTML
<!DOCTYPE html> <html>
<head>
<title>Bootstrap 5 Checks and radios Checks</title>
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous">
</script>
</head>
<body>
<div class="container">
<h1 class="text-success text-center">
GeeksforGeeks
</h1>
<h2 class="text-center">
Bootstrap5 Checks and radios Checks
</h2>
<h3>Select Technology</h3>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="html">
<label class="form-check-label" for="html">
HTML
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="css">
<label class="form-check-label" for="css">
CSS
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="js">
<label class="form-check-label" for="js">
JavaScript
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="bootstrap" checked>
<label class="form-check-label" for="bootstrap">
Bootstrap
</label>
</div>
</div>
</body>
</html>
|
Output:
Example 2: In this example, we will create checkboxes with indeterminate states.
HTML
<!DOCTYPE html> <html>
<head>
<title>Bootstrap 5 Checks and radios Checks</title>
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous">
</script>
</head>
<body>
<div class="container">
<h1 class="text-success text-center">
GeeksforGeeks
</h1>
<h2 class="text-center">
Bootstrap 5 Checks and radios Checks
</h2>
<h3>Select Technology</h3>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="html">
<label class="form-check-label" for="html">
HTML
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="css">
<label class="form-check-label" for="css">
CSS
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="js">
<label class="form-check-label" for="js">
JavaScript
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="bootstrap" checked>
<label class="form-check-label" for="bootstrap">
Bootstrap
</label>
</div>
</div>
<script>
var doc = document.getElementsByTagName("input");
for (var i = 0; i < doc.length; i++) {
doc[i].indeterminate = true;
}
</script>
</body>
</html>
|
Output:
Example 3: In this example, we will create disabled states checkboxes.
HTML
<!DOCTYPE html> <html>
<head>
<title>Bootstrap 5 Checks and radios Checks</title>
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous">
</script>
</head>
<body>
<div class="container">
<h1 class="text-success text-center">
GeeksforGeeks
</h1>
<h2 class="text-center">
Bootstrap 5 Checks and radios Checks
</h2>
<h3>Select Technology</h3>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="html" disabled>
<label class="form-check-label" for="html">
HTML
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="css">
<label class="form-check-label" for="css">
CSS
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="js">
<label class="form-check-label" for="js">
JavaScript
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="bootstrap" checked disabled>
<label class="form-check-label" for="bootstrap">
Bootstrap
</label>
</div>
</div>
</body>
</html>
|
Output:
Reference: https://getbootstrap.com/docs/5.0/forms/checks-radios/#checks