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 -->
Form check card
<div class="row gx-3">
<div class="col-6 col-md-3 mb-3">
<!-- Radio Check -->
<div class="form-check form-check-card text-center">
<input class="form-check-input" type="radio" name="typeOfListing" id="typeOfListing1">
<label class="form-check-label" for="typeOfListing1">
<img class="w-50 mb-3" src="../assets/svg/illustrations/small-house.svg" alt="SVG">
<span class="d-block">House</span>
</label>
</div>
<!-- End Radio Check -->
</div>
<!-- End Col -->
<div class="col-6 col-md-3 mb-3">
<!-- Radio Check -->
<div class="form-check form-check-card text-center">
<input class="form-check-input" type="radio" name="typeOfListing" id="typeOfListing2" checked>
<label class="form-check-label" for="typeOfListing2">
<img class="w-50 mb-3" src="../assets/svg/illustrations/flat-house.svg" alt="SVG">
<span class="d-block">Flat</span>
</label>
</div>
<!-- End Radio Check -->
</div>
<!-- End Col -->
<div class="col-6 col-md-3 mb-3">
<!-- Radio Check -->
<div class="form-check form-check-card text-center">
<input class="form-check-input" type="radio" name="typeOfListing" id="typeOfListing3">
<label class="form-check-label" for="typeOfListing3">
<img class="w-50 mb-3" src="../assets/svg/illustrations/multi-family-house.svg" alt="SVG">
<span class="d-block">Multi-family</span>
</label>
</div>
<!-- End Radio Check -->
</div>
<!-- End Col -->
<div class="col-6 col-md-3 mb-3">
<!-- Radio Check -->
<div class="form-check form-check-card text-center">
<input class="form-check-input" type="radio" name="typeOfListing" id="typeOfListing4">
<label class="form-check-label" for="typeOfListing4">
<img class="w-50 mb-3" src="../assets/svg/illustrations/farm-land.svg" alt="SVG">
<span class="d-block">Farms/Land</span>
</label>
</div>
<!-- End Radio Check -->
</div>
<!-- End Col -->
</div>
<!-- End Row -->
Form check bookmark
<!-- Checkbbox Bookmark -->
<div class="form-check form-check-bookmark">
<input class="form-check-input" type="checkbox" value="" id="bookmarkCheck1">
<label class="form-check-label" for="bookmarkCheck1">
<span class="form-check-bookmark-default">
<i class="bi-star me-1"></i> Save this job
</span>
<span class="form-check-bookmark-active">
<i class="bi-star-fill me-1"></i> Saved
</span>
</label>
</div>
<!-- End Checkbbox Bookmark -->
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 -->