Bootstrap 5 Checks and Radios Without Labels
Last Updated :
15 Feb, 2023
Bootstrap 5 Checks and radios are a way to take boolean type values easily. Generally, they have a label that shows what value it is taking mainly for user experience and some assistive technologies to work correctly. The label can be removed too for the switch as well as the radio inputs. Checks and radios without labels are used when we need to create checkboxes and radios without any label text.
Bootstrap5 Checks and radios Without labels class:
- .form-check: The .form-check is omitted in this technique and only the input tag is used. We should add an aria-label so that assistive technologies can interpret it well.
Syntax:
<input class="form-check-input"
type="checkbox/radio"
id="..."
aria-label="...">
Example 1: The code example below demonstrates how we can have checks without labels without different backgrounds. The checks in the below row are disabled.
HTML
<!doctype html>
<html lang="en">
<head>
<link href=
rel="stylesheet">
<script src=
</script>
</head>
<body>
<h1 class="m-4 text-success">
GeeksforGeeks
</h1>
<h4 class="ms-4">
Bootstrap 5 Checks and radios Without labels
</h4>
<h5 class="m-5 text-success">
Checks without labels with different backgrounds
</h5>
<div class="row ms-5">
<div class="col-3">
<input class="form-check-input m-3 bg-dark"
type="checkbox" id="defaultCheckbox1"
autocomplete="off">
</div>
<div class="col-3">
<input class="form-check-input m-3
bg-success" type="checkbox"
id="checkedCheckbox1"
autocomplete="off"
checked>
</div>
</div>
<div class="row ms-5">
<div class="col-3">
<input class="form-check-input m-3
bg-warning" type="checkbox"
id="defaultCheckbox1" autocomplete="off"
disabled>
</div>
<div class="col-3">
<input class="form-check-input m-3
bg-danger" type="checkbox"
id="checkedCheckbox1" autocomplete="off"
disabled checked>
</div>
</div>
</body>
</html>
|
Output:
Example 2: The code example below demonstrates how we can have radio inputs without labels.
HTML
<!doctype html>
<html lang="en">
<head>
<link href=
rel="stylesheet">
<script src=
</script>
</head>
<body>
<h1 class="m-4 text-success">
GeeksforGeeks</h1>
<h4 class="ms-4">
Bootstrap 5 Checks and radios Without labels
</h4>
<div class="m-4">
<div class="card m-4">
<div class="card-body">
<div class="container d-flex
justify-content-between">
<h5 class="card-title">
Are you a Human?
</h5>
<input class="form-check-input me-3"
type="radio" name="option"
id="disabledRadioSwitch"
disabled checked>
</div>
</div>
</div>
<div class="card m-4">
<div class="card-body">
<div class="container d-flex
justify-content-between">
<h5 class="card-title">
Do you want to learn Bootstrap 5?
</h5>
<input class="form-check-input me-3" type="radio"
name="options" id="defaultRadioSwitch"
autocomplete="off">
</div>
</div>
</div>
</div>
</body>
</html>
|
Output:
Reference: https://getbootstrap.com/docs/5.1/forms/checks-radios/#without-labels
Share your thoughts in the comments
Please Login to comment...