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 -->
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.