Default Checkbox
No props are required when using the default style.
<div class="form-check mb-3">
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
<label class="form-check-label" for="flexCheckDefault">
Default checkbox
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckChecked" checked>
<label class="form-check-label" for="flexCheckChecked">
Checked checkbox
</label>
</div>Disabled Checkbox
Add the disabled attribute and the associated <label>s are automatically styled to match with a lighter color to help indicate the input’s state.
<div class="form-check mb-3">
<input class="form-check-input" type="checkbox" value="" id="flexCheckDisabled" disabled>
<label class="form-check-label" for="flexCheckDisabled">
Disabled checkbox
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckCheckedDisabled" checked disabled>
<label class="form-check-label" for="flexCheckCheckedDisabled">
Disabled checked checkbox
</label>
</div>Sizes Checkbox
No props are required when using the default style.
<div class="form-check form-check-sm mb-3">
<input class="form-check-input" type="checkbox" value="" id="flexCheckSmall" checked>
<label class="form-check-label" for="flexCheckSmall">
Small Checkbox
</label>
</div>
<div class="form-check form-check-lg">
<input class="form-check-input" type="checkbox" value="" id="flexCheckLarge" checked>
<label class="form-check-label" for="flexCheckLarge">
Large Checkbox
</label>
</div>Default Radio
No props are required when using the default style.
<div class="form-check mb-3">
<input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
<label class="form-check-label" for="flexRadioDefault1">
Default radio
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault2" checked>
<label class="form-check-label" for="flexRadioDefault2">
Default checked radio
</label>
</div>Disabled Radio
Add the disabled attribute and the associated <label>s are automatically styled to match with a lighter color to help indicate the input’s state.
<div class="form-check mb-3">
<input class="form-check-input" type="radio" name="flexRadioDisabled" id="flexRadioDisabled" disabled>
<label class="form-check-label" for="flexRadioDisabled">
Disabled radio
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="flexRadioDisabled" id="flexRadioCheckedDisabled" checked disabled>
<label class="form-check-label" for="flexRadioCheckedDisabled">
Disabled checked radio
</label>
</div>Sizes Radio
No props are required when using the default style.
<div class="form-check form-check-sm mb-3">
<input class="form-check-input" type="radio" name="flexRadioSize" id="flexRadioSmall">
<label class="form-check-label" for="flexRadioSmall">
Small radio
</label>
</div>
<div class="form-check form-check-lg">
<input class="form-check-input" type="radio" name="flexRadioSize" id="flexRadioLarge">
<label class="form-check-label" for="flexRadioLarge">
Large radio
</label>
</div>Indeterminate
Checkboxes can utilize the :indeterminate pseudo class when manually set via JavaScript (there is no available HTML attribute for specifying it).
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckIndeterminate">
<label class="form-check-label" for="flexCheckIndeterminate">
Indeterminate checkbox
</label>
</div>Colors Checkbox
<div class="form-check form-check-primary mb-3">
<input class="form-check-input" type="checkbox" value="" id="CustomflexCheck01" checked>
<label class="form-check-label" for="CustomflexCheck01">
Primary Checkbox
</label>
</div>
<div class="form-check form-check-secondary mb-3">
<input class="form-check-input" type="checkbox" value="" id="CustomflexCheck02" checked>
<label class="form-check-label" for="CustomflexCheck02">
Secondary Checkbox
</label>
</div>
<div class="form-check form-check-success mb-3">
<input class="form-check-input" type="checkbox" value="" id="CustomflexCheck03" checked>
<label class="form-check-label" for="CustomflexCheck03">
Success Checkbox
</label>
</div>
<div class="form-check form-check-info mb-3">
<input class="form-check-input" type="checkbox" value="" id="CustomflexCheck04" checked>
<label class="form-check-label" for="CustomflexCheck04">
Info Checkbox
</label>
</div>
<div class="form-check form-check-warning mb-3">
<input class="form-check-input" type="checkbox" value="" id="CustomflexCheck05" checked>
<label class="form-check-label" for="CustomflexCheck05">
Warning Checkbox
</label>
</div>
<div class="form-check form-check-danger mb-3">
<input class="form-check-input" type="checkbox" value="" id="CustomflexCheck06" checked>
<label class="form-check-label" for="CustomflexCheck06">
Danger Checkbox
</label>
</div>
<div class="form-check form-check-dark">
<input class="form-check-input" type="checkbox" value="" id="CustomflexCheck07" checked>
<label class="form-check-label" for="CustomflexCheck07">
Dark Checkbox
</label>
</div>Colors Radio
<div class="form-check form-check-primary mb-3">
<input class="form-check-input" type="radio" value="" id="CustomflexRadio01" checked>
<label class="form-check-label" for="CustomflexRadio01">
Primary Checkbox
</label>
</div>
<div class="form-check form-check-secondary mb-3">
<input class="form-check-input" type="radio" value="" id="CustomflexRadio02" checked>
<label class="form-check-label" for="CustomflexRadio02">
Secondary Checkbox
</label>
</div>
<div class="form-check form-check-success mb-3">
<input class="form-check-input" type="radio" value="" id="CustomflexRadio03" checked>
<label class="form-check-label" for="CustomflexRadio03">
Success Checkbox
</label>
</div>
<div class="form-check form-check-info mb-3">
<input class="form-check-input" type="radio" value="" id="CustomflexRadio04" checked>
<label class="form-check-label" for="CustomflexRadio04">
Info Checkbox
</label>
</div>
<div class="form-check form-check-warning mb-3">
<input class="form-check-input" type="radio" value="" id="CustomflexRadio05" checked>
<label class="form-check-label" for="CustomflexRadio05">
Warning Checkbox
</label>
</div>
<div class="form-check form-check-danger mb-3">
<input class="form-check-input" type="radio" value="" id="CustomflexRadio06" checked>
<label class="form-check-label" for="CustomflexRadio06">
Danger Checkbox
</label>
</div>
<div class="form-check form-check-dark">
<input class="form-check-input" type="radio" value="" id="CustomflexRadio07" checked>
<label class="form-check-label" for="CustomflexRadio07">
Dark Checkbox
</label>
</div>Default Switches
A switch has the markup of a custom checkbox but uses the .form-switch class to render a toggle switch. Consider using role="switch" to more accurately convey the nature of the control to assistive technologies that support this role.
<div class="form-check form-switch mb-3">
<input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault">
<label class="form-check-label" for="flexSwitchCheckDefault">Default switch checkbox input</label>
</div>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckChecked" checked>
<label class="form-check-label" for="flexSwitchCheckChecked">Checked switch checkbox input</label>
</div>Disabled Switches
By default, any number of checkboxes and radios that are immediate sibling will be vertically stacked and appropriately spaced with .form-check.
<div class="form-check form-switch mb-3">
<input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDisabled" disabled>
<label class="form-check-label" for="flexSwitchCheckDisabled">Disabled switch checkbox input</label>
</div>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckCheckedDisabled" checked disabled>
<label class="form-check-label" for="flexSwitchCheckCheckedDisabled">Disabled checked switch checkbox input</label>
</div>Sizes Switches
No props are required when using the default style.
<div class="form-check form-check-sm form-switch mb-3">
<input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckSmall" checked>
<label class="form-check-label" for="flexSwitchCheckSmall">Small Form switch</label>
</div>
<div class="form-check form-check-lg form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckCheckedLarge" checked>
<label class="form-check-label" for="flexSwitchCheckCheckedLarge">Large Form Switch</label>
</div>Colors Switches
No props are required when using the default style.
<div class="row">
<div class="col-12 col-xl-6">
<div class="form-check form-switch form-switch-primary mb-3">
<input class="form-check-input" type="checkbox" role="switch" id="SwitchCheck01" checked>
<label class="form-check-label" for="SwitchCheck01">Switch Primary</label>
</div>
<div class="form-check form-switch form-switch-secondary mb-3">
<input class="form-check-input" type="checkbox" role="switch" id="SwitchCheck02" checked>
<label class="form-check-label" for="SwitchCheck02">Switch Secondary</label>
</div>
<div class="form-check form-switch form-switch-success mb-3">
<input class="form-check-input" type="checkbox" role="switch" id="SwitchCheck03" checked>
<label class="form-check-label" for="SwitchCheck03">Switch Success</label>
</div>
<div class="form-check form-switch form-switch-info">
<input class="form-check-input" type="checkbox" role="switch" id="SwitchCheck04" checked>
<label class="form-check-label" for="SwitchCheck04">Switch Info</label>
</div>
</div>
<div class="col-12 col-xl-6">
<div class="form-check form-switch form-switch-warning mb-3">
<input class="form-check-input" type="checkbox" role="switch" id="SwitchCheck05" checked>
<label class="form-check-label" for="SwitchCheck05">Switch Warning</label>
</div>
<div class="form-check form-switch form-switch-danger mb-3">
<input class="form-check-input" type="checkbox" role="switch" id="SwitchCheck06" checked>
<label class="form-check-label" for="SwitchCheck06">Switch Danger</label>
</div>
<div class="form-check form-switch form-switch-dark">
<input class="form-check-input" type="checkbox" role="switch" id="SwitchCheck07" checked>
<label class="form-check-label" for="SwitchCheck07">Switch Dark</label>
</div>
</div>
</div>Inline
Group checkboxes or radios on the same horizontal row by adding .form-check-inline to any .form-check.
<div class="row">
<div class="col-12 col-xl-6 col-xxl-4">
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
<label class="form-check-label" for="inlineCheckbox1">1</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
<label class="form-check-label" for="inlineCheckbox2">2</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled>
<label class="form-check-label" for="inlineCheckbox3">3 (disabled)</label>
</div>
</div>
<div class="col-12 col-xl-6 col-xxl-4">
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
<label class="form-check-label" for="inlineRadio1">1</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
<label class="form-check-label" for="inlineRadio2">2</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled>
<label class="form-check-label" for="inlineRadio3">3 (disabled)</label>
</div>
</div>
<div class="col-12 col-xl-6 col-xxl-4">
<div class="form-check form-switch form-check-inline" dir="ltr">
<input type="checkbox" class="form-check-input" id="inlineswitch5">
<label class="form-check-label" for="inlineswitch5">1</label>
</div>
<div class="form-check form-switch form-check-inline" dir="ltr">
<input type="checkbox" class="form-check-input" id="inlineswitch6">
<label class="form-check-label" for="inlineswitch6">2</label>
</div>
<div class="form-check form-switch form-check-inline" dir="ltr">
<input type="checkbox" class="form-check-input" id="inlineswitchdisabled2" disabled>
<label class="form-check-label" for="inlineswitchdisabled2">2</label>
</div>
</div>
</div>Reverse
Put your checkboxes, radios, and switches on the opposite side with the .form-check-reverse modifier class.
<div class="form-check form-check-reverse mb-3">
<input class="form-check-input" type="checkbox" value="" id="reverseCheck1">
<label class="form-check-label" for="reverseCheck1">
Reverse checkbox
</label>
</div>
<div class="form-check form-check-reverse mb-3">
<input class="form-check-input" type="checkbox" value="" id="reverseCheck2" disabled>
<label class="form-check-label" for="reverseCheck2">
Disabled reverse checkbox
</label>
</div>
<div class="form-check form-switch form-check-reverse">
<input class="form-check-input" type="checkbox" id="flexSwitchCheckReverse">
<label class="form-check-label" for="flexSwitchCheckReverse">Reverse switch checkbox input</label>
</div>Without labels
Omit the wrapping .form-check for checkboxes and radios that have no label text. Remember to still provide some form of accessible name for assistive technologies (for instance, using aria-label). See the forms overview accessibility section for details.
<div>
<input class="form-check-input mb-3" type="checkbox" id="checkboxNoLabel" value="" aria-label="...">
</div>
<div>
<input class="form-check-input" type="radio" name="radioNoLabel" id="radioNoLabel1" value="" aria-label="...">
</div>Checkbox Toggle Buttons
No props are required when using the default style.
<div class="d-flex flex-wrap gap-2">
<div>
<input type="checkbox" class="btn-check" id="btn-check" autocomplete="off">
<label class="btn btn-light-primary" for="btn-check">Single toggle</label>
</div>
<div>
<input type="checkbox" class="btn-check" id="btn-check-2" checked autocomplete="off">
<label class="btn btn-light-primary" for="btn-check-2">Checked</label>
</div>
<div>
<input type="checkbox" class="btn-check" id="btn-check-3" autocomplete="off" disabled>
<label class="btn btn-light-primary" for="btn-check-3">Disabled</label>
</div>
</div>Radio Toggle Buttons
No props are required when using the default style.
<div class="d-flex flex-wrap gap-2">
<div>
<input type="radio" class="btn-check" name="options" id="option1" autocomplete="off" checked>
<label class="btn btn-light-info" for="option1">Checked</label>
</div>
<div>
<input type="radio" class="btn-check" name="options" id="option2" autocomplete="off">
<label class="btn btn-light-info" for="option2">Radio</label>
</div>
<div>
<input type="radio" class="btn-check" name="options" id="option3" autocomplete="off" disabled>
<label class="btn btn-light-info" for="option3">Disabled</label>
</div>
<div>
<input type="radio" class="btn-check" name="options" id="option4" autocomplete="off">
<label class="btn btn-light-info" for="option4">Radio</label>
</div>
</div>Checkbox With Icons
No props are required when using the default style.
<div class="d-flex flex-wrap gap-2">
<div>
<input type="checkbox" class="btn-check" id="btn-check001" autocomplete="off">
<label class="btn btn-outline-primary" for="btn-check001">
<i class="ri-instagram-line"></i> Instagram
</label>
</div>
<div>
<input type="checkbox" class="btn-check" id="btn-check002" autocomplete="off" checked>
<label class="btn btn-outline-primary" for="btn-check002">
<i class="ri-twitter-line"></i> Twitter
</label>
</div>
<div>
<input type="checkbox" class="btn-check" id="btn-check003" autocomplete="off">
<label class="btn btn-outline-primary" for="btn-check003">
<i class="ri-facebook-line"></i> Facebook
</label>
</div>
<div>
<input type="checkbox" class="btn-check" id="btn-check004" autocomplete="off" checked>
<label class="btn btn-outline-primary" for="btn-check004">
<i class="ri-linkedin-box-fill"></i> LinkedIn
</label>
</div>
</div>Radio With Icons
No props are required when using the default style.
<div class="d-flex flex-wrap gap-2">
<div>
<input type="radio" name="radioIcons" class="btn-check" id="btn-check011" autocomplete="off">
<label class="btn btn-outline-info" for="btn-check011">
<i class="ri-instagram-line"></i> Instagram
</label>
</div>
<div>
<input type="radio" name="radioIcons" class="btn-check" id="btn-check012" autocomplete="off">
<label class="btn btn-outline-info" for="btn-check012">
<i class="ri-twitter-line"></i> Twitter
</label>
</div>
<div>
<input type="radio" name="radioIcons" class="btn-check" id="btn-check013" autocomplete="off" checked>
<label class="btn btn-outline-info" for="btn-check013">
<i class="ri-facebook-line"></i> Facebook
</label>
</div>
<div>
<input type="radio" name="radioIcons" class="btn-check" id="btn-check014" autocomplete="off">
<label class="btn btn-outline-info" for="btn-check014">
<i class="ri-linkedin-box-fill"></i> LinkedIn
</label>
</div>
</div>Payment Method Group
<ul class="list-group">
<li class="list-group-item list-group-item-action d-flex align-items-center gap-3">
<input class="form-check-input" type="radio" name="paymentMethod" id="payment-check1" value="visa">
<label class="form-check-label" for="payment-check1">
<span class="d-flex align-items-center">
<img src="assets/images/cards/img-01.png" height="28" alt="Visa">
<span class="ms-2">
<span class="fs-6 fw-bold">Visa Card</span>
<span class="d-block text-muted">Fast and secure transactions with your Visa card.</span>
</span>
</span>
</label>
</li>
<li class="list-group-item list-group-item-action d-flex align-items-center gap-3">
<input class="form-check-input" type="radio" name="paymentMethod" id="payment-check2" value="mastercard">
<label class="form-check-label" for="payment-check2">
<span class="d-flex align-items-center">
<img src="assets/images/cards/img-05.png" height="28" alt="Visa">
<span class="ms-2">
<span class="fs-6 fw-bold">MasterCard</span>
<span class="d-block text-muted">Enjoy flexibility with your MasterCard for easy payments.</span>
</span>
</span>
</label>
</li>
<li class="list-group-item list-group-item-action d-flex align-items-center gap-3">
<input class="form-check-input" type="radio" name="paymentMethod" id="payment-check3" value="paypal" checked>
<label class="form-check-label" for="payment-check3">
<span class="d-flex align-items-center">
<img src="assets/images/cards/img-03.png" height="28" alt="Visa">
<span class="ms-2">
<span class="fs-6 fw-bold">PayPal</span>
<span class="d-block text-muted">Secure and convenient payments with your PayPal account.</span>
</span>
</span>
</label>
</li>
<li class="list-group-item list-group-item-action d-flex align-items-center gap-3">
<input class="form-check-input" type="radio" name="paymentMethod" id="payment-check4" value="bitcoin">
<label class="form-check-label" for="payment-check4">
<span class="d-flex align-items-center">
<img src="assets/images/cards/img-04.png" height="28" alt="Visa">
<span class="ms-2">
<span class="fs-6 fw-bold">Bitcoin</span>
<span class="d-block text-muted">Utilize your Bitcoin wallet for secure transactions.</span>
</span>
</span>
</label>
</li>
</ul>Images Checkbox Group
Custom
Checked Image
Disabled Image
Disabled Checked Image
<div class="main-img-checkbox">
<div class="row g-4">
<div class="col-xxl-3 col-sm-6">
<div class="card-wrapper overflow-hidden">
<div class="img-checkbox">
<input class="main-img-cover form-check-input" id="img-check-1" type="checkbox">
<label class="form-check-label mb-0" for="img-check-1">
<img class="h-224px" src="assets/images/small/img-5.jpg" alt="coffee-beans">
</label>
</div>
</div>
<h6 class="sub-title text-center m-3 mb-0">Custom</h6>
</div>
<div class="col-xxl-3 col-sm-6">
<div class="card-wrapper overflow-hidden">
<div class="img-checkbox">
<input class="main-img-cover form-check-input" id="img-check-2" type="checkbox" checked>
<label class="form-check-label mb-0" for="img-check-2">
<img class="h-224px" src="assets/images/small/img-5.jpg" alt="tree">
</label>
</div>
</div>
<h6 class="sub-title text-center m-3 mb-0">Checked Image</h6>
</div>
<div class="col-xxl-3 col-sm-6">
<div class="card-wrapper overflow-hidden">
<div class="img-checkbox">
<input class="main-img-cover form-check-input" id="img-check-3" type="checkbox" disabled>
<label class="form-check-label mb-0" for="img-check-3">
<img class="h-224px" src="assets/images/small/img-5.jpg" alt="flowers">
</label>
</div>
</div>
<h6 class="sub-title text-center m-3 mb-0">Disabled Image</h6>
</div>
<div class="col-xxl-3 col-sm-6">
<div class="card-wrapper overflow-hidden">
<div class="img-checkbox">
<input class="main-img-cover form-check-input" id="img-check-4" type="checkbox" disabled checked>
<label class="form-check-label mb-0" for="img-check-4">
<img class="h-224px" src="assets/images/small/img-5.jpg" alt="rose-tea">
</label>
</div>
</div>
<h6 class="sub-title text-center m-3 mb-0">Disabled Checked Image</h6>
</div>
</div>
</div>