Checks & Switches
Examples and usage guidelines for checkboxes, switches, and custom components for creating a wide variety of checkboxes.
Bootstrap Checks & radios documentationCheckbox and radios
Default bootstrap examples.
You will receive notifications about actions to your email.
<!-- Checkbox -->
<div class="form-check mb-3">
<input type="checkbox" id="formCheck11" class="form-check-input">
<label class="form-check-label" for="formCheck11">Unchecked</label>
</div>
<!-- End Checkbox -->
<!-- Checkbox -->
<div class="form-check mb-3">
<input type="checkbox" id="formCheck12" class="form-check-input" checked>
<label class="form-check-label" for="formCheck12">Checked</label>
</div>
<!-- End Checkbox -->
<!-- Checkbox -->
<div class="form-check mb-3">
<input type="checkbox" id="formCheck13" class="form-check-input indeterminate-checkbox" checked>
<label class="form-check-label" for="formCheck13">Indeterminate</label>
</div>
<!-- End Checkbox -->
<!-- Checkbox -->
<div class="form-check mb-3">
<input type="checkbox" id="formHelperCheck1" class="form-check-input">
<label class="form-check-label" for="formHelperCheck1">Notify about new notifications</label>
<div class="text-muted">You will receive notifications about actions to your email.</div>
</div>
<!-- Checkbox -->
<div class="form-check mb-3">
<input type="checkbox" id="formCheck14" class="form-check-input" disabled>
<label class="form-check-label" for="formCheck14">Unchecked and disabled</label>
</div>
<!-- End Checkbox -->
<!-- Checkbox -->
<div class="form-check mb-3">
<input type="checkbox" id="formCheck15" class="form-check-input" checked disabled>
<label class="form-check-label" for="formCheck15">Checked and disabled</label>
</div>
<!-- End Checkbox -->
You will receive notifications about actions to your email.
<!-- Checkbox -->
<div class="form-check mb-3">
<input type="radio" id="formRadio1" class="form-check-input" name="formRadio">
<label class="form-check-label" for="formRadio1">Unchecked</label>
</div>
<!-- End Checkbox -->
<!-- Checkbox -->
<div class="form-check mb-3">
<input type="radio" id="formRadio2" class="form-check-input" checked name="formRadio">
<label class="form-check-label" for="formRadio2">Checked</label>
</div>
<!-- End Checkbox -->
<!-- Checkbox -->
<div class="form-check mb-3">
<input type="radio" id="formRadio4" class="form-check-input" name="formRadio">
<label class="form-check-label" for="formRadio4">Notify about new notifications</label>
<div class="text-muted">You will receive notifications about actions to your email.</div>
</div>
<!-- Checkbox -->
<div class="form-check mb-3">
<input type="radio" id="formRadio5" class="form-check-input" disabled name="formRadio">
<label class="form-check-label" for="formRadio5">Unchecked and disabled</label>
</div>
<!-- End Checkbox -->
<!-- Checkbox -->
<div class="form-check mb-3">
<input type="radio" id="formRadio6" class="form-check-input" checked disabled>
<label class="form-check-label" for="formRadio6">Checked and disabled</label>
</div>
<!-- End Checkbox -->
Group checkboxes or radios on the same horizontal row by adding .form-check-inline to any .form-check.
<!-- Form Check -->
<div class="form-check form-check-inline">
<input type="checkbox" id="formInlineCheck1" class="form-check-input">
<label class="form-check-label" for="formInlineCheck1">Unchecked</label>
</div>
<!-- End Form Check -->
<!-- Form Check -->
<div class="form-check form-check-inline">
<input type="checkbox" id="formInlineCheck2" class="form-check-input indeterminate-checkbox" checked>
<label class="form-check-label" for="formInlineCheck2">Indeterminate</label>
</div>
<!-- End Form Check -->
<!-- Form Check -->
<div class="form-check form-check-inline">
<input type="checkbox" id="formInlineCheck3" class="form-check-input" checked>
<label class="form-check-label" for="formInlineCheck3">Checked</label>
</div>
<!-- End Form Check -->
<!-- Form Check -->
<div class="form-check form-check-inline">
<input type="radio" id="formInlineRadio1" class="form-check-input" name="formInlineRadio">
<label class="form-check-label" for="formInlineRadio1">Unchecked</label>
</div>
<!-- End Form Check -->
<!-- Form Check -->
<div class="form-check form-check-inline">
<input type="radio" id="formInlineRadio2" class="form-check-input indeterminate-checkbox" checked name="formInlineRadio">
<label class="form-check-label" for="formInlineRadio2">Checked</label>
</div>
<!-- End Form Check -->
<!-- Form Check -->
<div class="form-check form-check-inline">
<input type="radio" id="formInlineRadio3" class="form-check-input indeterminate-checkbox" name="formInlineRadio">
<label class="form-check-label" for="formInlineRadio3">Unchecked</label>
</div>
<!-- End Form Check -->
Radio checkbox within a .form-control
<div class="row">
<div class="col-sm mb-2 mb-sm-0">
<!-- Form Radio -->
<label class="form-control" for="formControlRadioEg1">
<span class="form-check">
<input type="radio" class="form-check-input" name="formControlRadioEg" id="formControlRadioEg1" checked>
<span class="form-check-label">Checked</span>
</span>
</label>
<!-- End Form Radio -->
</div>
<div class="col-sm mb-2 mb-sm-0">
<!-- Form Radio -->
<label class="form-control" for="formControlRadioEg2">
<span class="form-check">
<input type="radio" class="form-check-input" name="formControlRadioEg" id="formControlRadioEg2">
<span class="form-check-label">Unchecked</span>
</span>
</label>
<!-- End Form Radio -->
</div>
<div class="col-sm mb-2 mb-sm-0">
<!-- Form Radio -->
<label class="form-control" for="formControlRadioEg3">
<span class="form-check">
<input type="radio" class="form-check-input" name="formControlRadioEg" id="formControlRadioEg3" disabled>
<span class="form-check-label">Disabled</span>
</span>
</label>
<!-- End Form Radio -->
</div>
</div>
<!-- End Row -->
Checkbox reverse
Use .form-check-reverse to place the checkbox icon on the right side.
<div class="row">
<div class="col-sm mb-2 mb-sm-0">
<!-- Form Radio -->
<label class="form-control" for="formControlRadioReverseEg1">
<span class="form-check form-check-reverse">
<input type="radio" class="form-check-input" name="formControlRadioReverseEg" id="formControlRadioReverseEg1" checked>
<span class="form-check-label">Checked</span>
</span>
</label>
<!-- End Form Radio -->
</div>
<div class="col-sm mb-2 mb-sm-0">
<!-- Form Radio -->
<label class="form-control" for="formControlRadioReverseEg2">
<span class="form-check form-check-reverse">
<input type="radio" class="form-check-input" name="formControlRadioReverseEg" id="formControlRadioReverseEg2">
<span class="form-check-label">Unchecked</span>
</span>
</label>
<!-- End Form Radio -->
</div>
<div class="col-sm mb-2 mb-sm-0">
<!-- Form Radio -->
<label class="form-control" for="formControlRadioReverseEg3">
<span class="form-check form-check-reverse">
<input type="radio" class="form-check-input" name="formControlRadioReverseEg" id="formControlRadioReverseEg3" disabled>
<span class="form-check-label">Disabled</span>
</span>
</label>
<!-- End Form Radio -->
</div>
</div>
<!-- End Row -->
Colorful checkbox
Use .form-check-[color-name] to apply other theme color style checkbox options.
<div class="row">
<div class="col-sm mb-2 mb-sm-0">
<!-- Form Radio -->
<label class="form-control" for="formControlRadioReverseEg1">
<span class="form-check">
<input type="radio" class="form-check-input" name="formControlRadioReverseEg" id="formControlRadioReverseEg1" checked>
<span class="form-check-label">Checked</span>
</span>
</label>
<!-- End Form Radio -->
</div>
<div class="col-sm mb-2 mb-sm-0">
<!-- Form Radio -->
<label class="form-control" for="formControlRadioReverseEg2">
<span class="form-check">
<input type="radio" class="form-check-input" name="formControlRadioReverseEg" id="formControlRadioReverseEg2">
<span class="form-check-label">Unchecked</span>
</span>
</label>
<!-- End Form Radio -->
</div>
<div class="col-sm mb-2 mb-sm-0">
<!-- Form Radio -->
<label class="form-control" for="formControlRadioReverseEg3">
<span class="form-check">
<input type="radio" class="form-check-input" name="formControlRadioReverseEg" id="formControlRadioReverseEg3" disabled>
<span class="form-check-label">Disabled</span>
</span>
</label>
<!-- End Form Radio -->
</div>
</div>
<!-- End Row -->
Input group break
Long contents don't fit in small screens? Use .input-group-{breakpoint}-vertical modifier classes to break horizontal alignment and keep the same style in vertical order. Reduce browser size to see it in action.
<div class="input-group input-group-sm-vertical">
<!-- Radio Check -->
<label class="form-control" for="editUserModalAccountTypeModalRadioEg1_1">
<span class="form-check">
<input type="radio" class="form-check-input" name="editUserModalAccountTypeModalRadioEg1_" id="editUserModalAccountTypeModalRadioEg1_1" checked>
<span class="form-check-label">Individual</span>
</span>
</label>
<!-- End Radio Check -->
<!-- Radio Check -->
<label class="form-control" for="editUserModalAccountTypeModalRadioEg1_2">
<span class="form-check">
<input type="radio" class="form-check-input" name="editUserModalAccountTypeModalRadioEg1_" id="editUserModalAccountTypeModalRadioEg1_2">
<span class="form-check-label">Company</span>
</span>
</label>
<!-- End Radio Check -->
</div>
Vertical example:
<div class="input-group input-group-vertical">
<!-- Radio Check -->
<label class="form-control" for="editUserModalAccountTypeModalRadioEg2_1">
<span class="form-check">
<input type="radio" class="form-check-input" name="editUserModalAccountTypeModalRadioEg2_" id="editUserModalAccountTypeModalRadioEg2_1" checked>
<span class="form-check-label">Individual</span>
</span>
</label>
<!-- End Radio Check -->
<!-- Radio Check -->
<label class="form-control" for="editUserModalAccountTypeModalRadioEg2_2">
<span class="form-check">
<input type="radio" class="form-check-input" name="editUserModalAccountTypeModalRadioEg2_" id="editUserModalAccountTypeModalRadioEg2_2">
<span class="form-check-label">Company</span>
</span>
</label>
<!-- End Radio Check -->
</div>
Checkbox select
-
2hrBrian Warner
changed an issue from "In Progress" to Review
-
K10hr
Klara Hampton
mentioned you in a comment
Nice work, love! You really nailed it. Keep it up!
-
3dyRuby Walter
joined the Slack group HS Team
-
17dyfrom Google
Start using forms to capture the information of prospects visiting your Google website
-
2mnSara Villar
completed FD-7 task
<!-- List Group -->
<ul class="list-group list-group-flush navbar-card-list-group">
<!-- Item -->
<li class="list-group-item form-check-select">
<div class="row">
<div class="col-auto">
<div class="d-flex align-items-center">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="notificationCheck1" checked>
<label class="form-check-label" for="notificationCheck1"></label>
<span class="form-check-stretched-bg"></span>
</div>
<img class="avatar avatar-sm avatar-circle" src="../assets/img/160x160/img3.jpg" alt="Image Description">
</div>
</div>
<!-- End Col -->
<div class="col ms-n2">
<h5 class="mb-1">Brian Warner</h5>
<p class="text-body fs-5">changed an issue from "In Progress" to <span class="badge bg-success">Review</span></p>
</div>
<!-- End Col -->
<small class="col-auto text-muted text-cap">2hr</small>
<!-- End Col -->
</div>
<!-- End Row -->
<a class="stretched-link" href="#"></a>
</li>
<!-- End Item -->
<!-- Item -->
<li class="list-group-item form-check-select">
<div class="row">
<div class="col-auto">
<div class="d-flex align-items-center">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="notificationCheck2" checked>
<label class="form-check-label" for="notificationCheck2"></label>
<span class="form-check-stretched-bg"></span>
</div>
<div class="avatar avatar-sm avatar-soft-dark avatar-circle">
<span class="avatar-initials">K</span>
</div>
</div>
</div>
<!-- End Col -->
<div class="col ms-n2">
<h5 class="mb-1">Klara Hampton</h5>
<p class="text-body fs-5">mentioned you in a comment</p>
<blockquote class="blockquote blockquote-sm">
Nice work, love! You really nailed it. Keep it up!
</blockquote>
</div>
<!-- End Col -->
<small class="col-auto text-muted text-cap">10hr</small>
<!-- End Col -->
</div>
<!-- End Row -->
<a class="stretched-link" href="#"></a>
</li>
<!-- End Item -->
<!-- Item -->
<li class="list-group-item form-check-select">
<div class="row">
<div class="col-auto">
<div class="d-flex align-items-center">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="notificationCheck3" checked>
<label class="form-check-label" for="notificationCheck3"></label>
<span class="form-check-stretched-bg"></span>
</div>
<div class="avatar avatar-sm avatar-circle">
<img class="avatar-img" src="../assets/img/160x160/img10.jpg" alt="Image Description">
</div>
</div>
</div>
<!-- End Col -->
<div class="col ms-n2">
<h5 class="mb-1">Ruby Walter</h5>
<p class="text-body fs-5">joined the Slack group HS Team</p>
</div>
<!-- End Col -->
<small class="col-auto text-muted text-cap">3dy</small>
<!-- End Col -->
</div>
<!-- End Row -->
<a class="stretched-link" href="#"></a>
</li>
<!-- End Item -->
<!-- Item -->
<li class="list-group-item form-check-select">
<div class="row">
<div class="col-auto">
<div class="d-flex align-items-center">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="notificationCheck4">
<label class="form-check-label" for="notificationCheck4"></label>
<span class="form-check-stretched-bg"></span>
</div>
<div class="avatar avatar-sm avatar-circle">
<img class="avatar-img" src="../assets/svg/brands/google-icon.svg" alt="Image Description">
</div>
</div>
</div>
<!-- End Col -->
<div class="col ms-n2">
<h5 class="mb-1">from Google</h5>
<p class="text-body fs-5">Start using forms to capture the information of prospects visiting your Google website</p>
</div>
<!-- End Col -->
<small class="col-auto text-muted text-cap">17dy</small>
<!-- End Col -->
</div>
<!-- End Row -->
<a class="stretched-link" href="#"></a>
</li>
<!-- End Item -->
<!-- Item -->
<li class="list-group-item form-check-select">
<div class="row">
<div class="col-auto">
<div class="d-flex align-items-center">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="notificationCheck5">
<label class="form-check-label" for="notificationCheck5"></label>
<span class="form-check-stretched-bg"></span>
</div>
<div class="avatar avatar-sm avatar-circle">
<img class="avatar-img" src="../assets/img/160x160/img7.jpg" alt="Image Description">
</div>
</div>
</div>
<!-- End Col -->
<div class="col ms-n2">
<h5 class="mb-1">Sara Villar</h5>
<p class="text-body fs-5">completed <i class="bi-journal-bookmark-fill text-primary"></i> FD-7 task</p>
</div>
<!-- End Col -->
<small class="col-auto text-muted text-cap">2mn</small>
<!-- End Col -->
</div>
<!-- End Row -->
<a class="stretched-link" href="#"></a>
</li>
<!-- End Item -->
</ul>
<!-- End List Group -->
Checkbox switch
<!-- Form Check -->
<div class="form-check form-check-switch">
<input class="form-check-input" type="checkbox" value="" id="connectionsCheckbox1">
<label class="form-check-label btn-sm" for="connectionsCheckbox1">
<span class="form-check-default">
<i class="bi-person-plus-fill"></i> Connect
</span>
<span class="form-check-active">
<i class="bi-check-lg me-2"></i> Connected
</span>
</label>
</div>
<!-- End Form Check -->
<!-- Form Check -->
<div class="form-check form-check-switch">
<input class="form-check-input" type="checkbox" value="" id="starredCheckbox1" checked>
<label class="form-check-label btn-icon btn-sm rounded-circle" for="starredCheckbox1">
<span class="form-check-default" data-bs-toggle="tooltip" data-bs-placement="top" title="Pin">
<i class="bi-star"></i>
</span>
<span class="form-check-active" data-bs-toggle="tooltip" data-bs-placement="top" title="Pinned">
<i class="bi-star-fill"></i>
</span>
</label>
</div>
<!-- End Form Check -->
Checkbox dashed
<label class="form-check form-check-dashed" for="logoUploader">
<img id="logoImg" class="avatar avatar-xl avatar-4x3 avatar-centered h-100 mb-2" src="../assets/svg/illustrations/oc-browse.svg" alt="Image Description">
<span class="d-block">Browse your file here</span>
<input type="file" class="form-check-input" id="logoUploader">
</label>
Select stretched
Basic
Free
Forever free
- 1 user
- Front plan features
- 1 app
Terms & conditions apply
Starter
$32 / mon
Or prepay monthly
- 3 users
- Front plan features
- 3 apps
- Product support
Terms & conditions apply
Enterprise
$54 / mon
Or prepay annually
- Unlimited users
- Front plan features
- Unlimited apps
- Product support
Terms & conditions apply
<div class="row">
<div class="col-md mb-3">
<!-- Card -->
<div class="card card-lg form-check form-check-select-stretched h-100 zi-1">
<div class="card-header text-center">
<!-- Form Check -->
<input type="radio" class="form-check-input" name="billingPricingRadio" id="billingPricingRadio1" value="basic">
<label class="form-check-label" for="billingPricingRadio1"></label>
<!-- End Form Check -->
<span class="card-subtitle">Basic</span>
<h2 class="card-title display-3 text-dark">Free</h2>
<p class="card-text">Forever free</p>
</div>
<div class="card-body d-flex justify-content-center">
<!-- List Checked -->
<ul class="list-checked list-checked-primary mb-0">
<li class="list-checked-item">1 user</li>
<li class="list-checked-item">Front plan features</li>
<li class="list-checked-item">1 app</li>
</ul>
<!-- End List Checked -->
</div>
<div class="card-footer border-0 text-center">
<div class="d-grid mb-2">
<button type="button" class="form-check-select-stretched-btn btn btn-white">Select plan</button>
</div>
<p class="card-text small">
<i class="bi-question-circle me-1"></i> Terms & conditions apply
</p>
</div>
</div>
<!-- End Card -->
</div>
<!-- End Col -->
<div class="col-md mb-3">
<!-- Card -->
<div class="card card-lg form-check form-check-select-stretched h-100 zi-1">
<div class="card-header text-center">
<!-- Form Check -->
<input type="radio" class="form-check-input" name="billingPricingRadio" id="billingPricingRadio2" checked value="starter">
<label class="form-check-label" for="billingPricingRadio2"></label>
<!-- End Form Check -->
<span class="card-subtitle">Starter</span>
<h2 class="card-title display-3 text-dark">
$<span id="pricingCount1"
data-hs-toggle-switch-item-options='{
"min": 22,
"max": 32
}'>32</span>
<span class="fs-6 text-muted">/ mon</span>
</h2>
<p class="card-text">Or prepay monthly</p>
</div>
<div class="card-body d-flex justify-content-center">
<!-- List Checked -->
<ul class="list-checked list-checked-primary mb-0">
<li class="list-checked-item">3 users</li>
<li class="list-checked-item">Front plan features</li>
<li class="list-checked-item">3 apps</li>
<li class="list-checked-item">Product support</li>
</ul>
<!-- End List Checked -->
</div>
<div class="card-footer border-0 text-center">
<div class="d-grid mb-2">
<button type="button" class="form-check-select-stretched-btn btn btn-white">Select plan</button>
</div>
<p class="card-text small">
<i class="bi-question-circle me-1"></i> Terms & conditions apply
</p>
</div>
</div>
<!-- End Card -->
</div>
<!-- End Col -->
<div class="col-md mb-3">
<!-- Card -->
<div class="card card-lg form-check form-check-select-stretched h-100 zi-1">
<div class="card-header text-center">
<!-- Form Check -->
<input type="radio" class="form-check-input" name="billingPricingRadio" id="billingPricingRadio3" value="enterprise">
<label class="form-check-label" for="billingPricingRadio3"></label>
<!-- End Form Check -->
<span class="card-subtitle">Enterprise</span>
<h2 class="card-title display-3 text-dark">
$<span id="pricingCount2"
data-hs-toggle-switch-item-options='{
"min": 42,
"max": 54
}'>54</span>
<span class="fs-6 text-muted">/ mon</span>
</h2>
<p class="card-text">Or prepay annually</p>
</div>
<div class="card-body d-flex justify-content-center">
<!-- List Checked -->
<ul class="list-checked list-checked-primary mb-0">
<li class="list-checked-item">Unlimited users</li>
<li class="list-checked-item">Front plan features</li>
<li class="list-checked-item">Unlimited apps</li>
<li class="list-checked-item">Product support</li>
</ul>
<!-- End List Checked -->
</div>
<div class="card-footer border-0 text-center">
<div class="d-grid mb-2">
<button type="button" class="form-check-select-stretched-btn btn btn-white">Select plan</button>
</div>
<p class="card-text small">
<i class="bi-question-circle me-1"></i> Terms & conditions apply
</p>
</div>
</div>
<!-- End Card -->
</div>
<!-- End Col -->
</div>
<!-- End Row -->
Label Highlighter
Light
Dark
<div class="row gx-3">
<!-- Check -->
<div class="col-6">
<div class="form-check form-check-label-highlighter text-center">
<input type="radio" class="form-check-input" name="labelHighlighterRadio" id="labelHighlighterRadio1" checked value="default">
<label class="form-check-label mb-2" for="labelHighlighterRadio1">
<img class="form-check-img" src="../assets/img/900x562/img1.jpg" alt="Image Description">
</label>
<span class="form-check-text">Light</span>
</div>
</div>
<!-- End Check -->
<!-- Check -->
<div class="col-6">
<div class="form-check form-check-label-highlighter text-center">
<input type="radio" class="form-check-input" name="labelHighlighterRadio" id="labelHighlighterRadio2" value="dark">
<label class="form-check-label mb-2" for="labelHighlighterRadio2">
<img class="form-check-img" src="../assets/img/900x562/img6.jpg" alt="Image Description">
</label>
<span class="form-check-text">Dark</span>
</div>
</div>
<!-- End Check -->
</div>
<!-- End Row -->
Switches
Replace a standard checkbox input with a toggle switch.
<!-- Checkbox Switch -->
<div class="form-check form-switch mb-4">
<input type="checkbox" class="form-check-input" id="formSwitch1">
<label class="form-check-label" for="formSwitch1">Unchecked</label>
</div>
<!-- End Checkbox Switch -->
<!-- Checkbox Switch -->
<div class="form-check form-switch mb-4">
<input type="checkbox" class="form-check-input" id="formSwitch2" checked>
<label class="form-check-label" for="formSwitch2">Checked</label>
</div>
<!-- End Checkbox Switch -->
<!-- Checkbox Switch -->
<div class="form-check form-switch form-switch-between mb-4">
<label class="form-check-label">Off</label>
<input type="checkbox" class="form-check-input">
<label class="form-check-label">On</label>
</div>
<!-- End Checkbox Switch -->
<!-- Checkbox Switch -->
<div class="form-check form-switch mb-4">
<input type="checkbox" class="form-check-input" id="formSwitch4" disabled>
<label class="form-check-label" for="formSwitch4">Disabled</label>
</div>
<!-- End Checkbox Switch -->
<!-- Checkbox Switch -->
<div class="form-check form-switch mb-4">
<input type="checkbox" class="form-check-input" id="formSwitch5" checked disabled>
<label class="form-check-label" for="formSwitch5">Checked & disabled</label>
</div>
<!-- End Checkbox Switch -->
Validation states
It provides valuable, actionable feedback to your users with HTML5 form validation.
<!-- Check -->
<div class="form-check mb-3">
<input type="checkbox" id="validCheck" class="form-check-input is-valid" checked>
<label class="form-check-valid" for="validCheck">Valid check</label>
</div>
<!-- End Check -->
<!-- Check -->
<div class="form-check mb-3">
<input type="checkbox" id="invalidCheck" class="form-check-input is-invalid" checked>
<label class="form-check-invalid" for="invalidCheck">Invalid check</label>
</div>
<!-- End Check -->
<!-- Check -->
<div class="form-check mb-3">
<input type="radio" id="validRadio" class="form-check-input is-valid" checked>
<label class="form-check-valid" for="validRadio">Valid radio</label>
</div>
<!-- End Check -->
<!-- Check -->
<div class="form-check mb-3">
<input type="radio" id="invalidRadio" class="form-check-input is-invalid" checked>
<label class="form-check-invalid" for="invalidRadio">Invalid radio</label>
</div>
<!-- End Check -->
<!-- Checkbox Switch -->
<div class="form-check form-switch mb-4">
<input type="checkbox" class="form-check-input is-valid" id="validSwitch" checked>
<label class="form-check-valid">Valid toggle switch</label>
</div>
<!-- End Checkbox Switch -->
<!-- Checkbox Switch -->
<div class="form-check form-switch mb-4">
<input type="checkbox" class="form-check-input is-invalid" id="invalidSwitch" checked>
<label class="form-check-invalid">Invalid toggle switch</label>
</div>
<!-- End Checkbox Switch -->