##### Default Checkbox

No `props` are required when using the default style.

Default checkbox
Checked checkbox

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

Disabled checkbox
Disabled checked checkbox

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

Small Checkbox
Large Checkbox

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

Default radio
Default checked radio

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

Disabled radio
Disabled checked radio

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

Small radio
Large radio

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

Indeterminate checkbox

    <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

Primary Checkbox
Secondary Checkbox
Success Checkbox
Info Checkbox
Warning Checkbox
Danger Checkbox
Dark 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

Primary Checkbox
Secondary Checkbox
Success Checkbox
Info Checkbox
Warning Checkbox
Danger Checkbox
Dark Checkbox

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

Default switch checkbox input
Checked switch checkbox input

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

Disabled switch checkbox input
Disabled checked switch checkbox input

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

Small Form switch
Large Form Switch

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

Switch Primary
Switch Secondary
Switch Success
Switch Info
Switch Warning
Switch Danger
Switch Dark

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

1
2
3 (disabled)
1
2
3 (disabled)
1
2
2

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

Reverse checkbox
Disabled reverse checkbox
Reverse switch checkbox input

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

Single toggle
Checked
Disabled

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

Checked
Radio
Disabled
Radio

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

Instagram
Twitter
Facebook
LinkedIn

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

Instagram
Twitter
Facebook
LinkedIn

    <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

- Visa Card Fast and secure transactions with your Visa card.
- MasterCard Enjoy flexibility with your MasterCard for easy payments.
- PayPal Secure and convenient payments with your PayPal account.
- Bitcoin Utilize your Bitcoin wallet for secure transactions.

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

Theme Customization

###### Layout:

##### Vertical

##### Horizontal

##### Semi Box

###### Content Width:

##### Default

##### Box

###### Layout Direction:

##### LTR

##### RTL

###### Layout Mode:

##### Light

##### Dark

##### System

###### Sidebar Size:

##### Default

##### Medium

##### Icon

##### Icon hover

###### Sidebar Color:

##### Light

##### Dark