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 -->
Custom check
Use .form-check-custom class to change the default style of the check-icon style.
<!-- Checkbox -->
<div class="form-check form-check-custom mb-3">
<input type="checkbox" id="formCheckCustom1" class="form-check-input">
<label class="form-check-label" for="formCheckCustom1">Unchecked</label>
</div>
<!-- End Checkbox -->
<!-- Checkbox -->
<div class="form-check form-check-custom mb-3">
<input type="checkbox" id="formCheckCustom2" class="form-check-input" checked>
<label class="form-check-label" for="formCheckCustom2">Checked</label>
</div>
<!-- End Checkbox -->
Also, works with type="radio"
<!-- Checkbox -->
<div class="form-check form-check-custom mb-3">
<input type="radio" id="formCheckCustomRadio1" name="formCheckCustomRadioName" class="form-check-input">
<label class="form-check-label" for="formCheckCustomRadio1">Unchecked</label>
</div>
<!-- End Checkbox -->
<!-- Checkbox -->
<div class="form-check form-check-custom mb-3">
<input type="radio" id="formCheckCustomRadio2" name="formCheckCustomRadioName" class="form-check-input" checked>
<label class="form-check-label" for="formCheckCustomRadio2">Checked</label>
</div>
<!-- End Checkbox -->
Form check reverse
<!-- Radio Check -->
<label class="form-check form-check-reverse" for="checkReverseEg1">
<input type="checkbox" class="form-check-input" id="checkReverseEg1" checked>
<span class="form-check-label">Unchecked Checkbox</span>
</label>
<!-- End Radio Check -->
<!-- Radio Check -->
<label class="form-check form-check-reverse" for="checkReverseEg2">
<input type="checkbox" class="form-check-input" id="checkReverseEg2">
<span class="form-check-label">Checked Checkbox</span>
</label>
<!-- End Radio Check -->
<!-- Radio Check -->
<label class="form-check form-check-reverse" for="radioReverseEg1">
<input type="radio" class="form-check-input" name="radioReverseEg" id="radioReverseEg1" checked>
<span class="form-check-label">Unchecked Radio</span>
</label>
<!-- End Radio Check -->
<!-- Radio Check -->
<label class="form-check form-check-reverse" for="radioReverseEg2">
<input type="radio" class="form-check-input" name="radioReverseEg" id="radioReverseEg2">
<span class="form-check-label">Checked Radio</span>
</label>
<!-- End Radio Check -->
Form check select
<!-- Radio Check -->
<label class="form-check form-check-select" for="checkSelectEg1">
<input type="radio" class="form-check-input" name="checkSelectEg" id="checkSelectEg1">
<span class="form-check-label">
<span class="fw-medium">Professional</span>
<span class="d-block h4 mb-0">$19.99</span>
<span class="d-block fs-6 text-muted">All the basics for starting a new business</span>
</span>
<span class="form-check-stretched-bg"></span>
</label>
<!-- End Radio Check -->
<!-- Radio Check -->
<label class="form-check form-check-select" for="checkSelectEg2">
<input type="radio" class="form-check-input" name="checkSelectEg" id="checkSelectEg2" checked>
<span class="form-check-label">
<span class="fw-medium">Team <span class="badge bg-soft-primary text-primary rounded-pill">Most popular</span></span>
<span class="d-block h4 mb-0">$39.99</span>
<span class="d-block fs-6 text-muted">Everything you need for a growing business</span>
</span>
<span class="form-check-stretched-bg"></span>
</label>
<!-- End Radio Check -->
<!-- Radio Check -->
<label class="form-check form-check-select" for="checkSelectEg3">
<input type="radio" class="form-check-input" name="checkSelectEg" id="checkSelectEg3">
<span class="form-check-label">
<span class="fw-medium">Enterprise</span>
<span class="d-block h4 mb-0">$59.99</span>
<span class="d-block fs-6 text-muted">Advanced features for scaling your business</span>
</span>
<span class="form-check-stretched-bg"></span>
</label>
<!-- End Radio Check -->
Form check pinned
<!-- Radio Check -->
<label class="form-check form-check-select form-check-pinned-top-end" for="formCheckPinnedEg1">
<input type="radio" class="form-check-input" name="formCheckPinnedEg" id="formCheckPinnedEg1">
<span class="form-check-label">
<span class="fw-medium">Professional</span>
<span class="d-block h4 mb-0">$19.99</span>
<span class="d-block fs-6 text-muted">All the basics for starting a new business</span>
</span>
<span class="form-check-stretched-bg"></span>
</label>
<!-- End Radio Check -->
<!-- Radio Check -->
<label class="form-check form-check-select form-check-pinned-top-end" for="formCheckPinnedEg2">
<input type="radio" class="form-check-input" name="formCheckPinnedEg" id="formCheckPinnedEg2" checked>
<span class="form-check-label">
<span class="fw-medium">Team <span class="badge bg-soft-primary text-primary rounded-pill">Most popular</span></span>
<span class="d-block h4 mb-0">$39.99</span>
<span class="d-block fs-6 text-muted">Everything you need for a growing business</span>
</span>
<span class="form-check-stretched-bg"></span>
</label>
<!-- End Radio Check -->
<!-- Radio Check -->
<label class="form-check form-check-select form-check-pinned-top-end" for="formCheckPinnedEg3">
<input type="radio" class="form-check-input" name="formCheckPinnedEg" id="formCheckPinnedEg3">
<span class="form-check-label">
<span class="fw-medium">Enterprise</span>
<span class="d-block h4 mb-0">$59.99</span>
<span class="d-block fs-6 text-muted">Advanced features for scaling your business</span>
</span>
<span class="form-check-stretched-bg"></span>
</label>
<!-- End Radio Check -->
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.