## Form - Bootstrap Switches

One stop solution for perfect admin dashboard!

Toggle Code!
Bootstrap Switch! Turn checkboxes and radio buttons into toggle switches. For official documentation, click here .

##### Switch states

Checked Switch
Unchecked Switch
Checked Disabled
Unchecked Disabled
Checked Read-Only
Unchecked Read-Only

    <div class="row mb-20">
        <div class="col-md-6">
            <input type="checkbox" name="my-checkbox" class="bt-switch" checked> <small class="ml-10">Checked Switch</small>
        </div>
        <div class="col-md-6">
            <input type="checkbox" name="my-checkbox" class="bt-switch"> <small class="ml-10">Unchecked Switch</small>
        </div>
    </div>

    <div class="row mb-20">
        <div class="col-md-6">
            <input type="checkbox" name="my-checkbox" class="bt-switch" checked disabled> <small class="ml-10">Checked Disabled</small>
        </div>
        <div class="col-md-6">
            <input type="checkbox" name="my-checkbox" class="bt-switch" disabled> <small class="ml-10">Unchecked Disabled</small>
        </div>
    </div>

    <div class="row">
        <div class="col-md-6">
            <input type="checkbox" name="my-checkbox" class="bt-switch" checked readonly> <small class="ml-10">Checked Read-Only</small>
        </div>
        <div class="col-md-6">
            <input type="checkbox" name="my-checkbox" class="bt-switch" readonly> <small class="ml-10">Unchecked Read-Only</small>
        </div>
    </div>

##### Switch Colors

Default Color
Primary Color
Success Color
Danger Color
Info Color
Warning Color

    <div class="row mb-20">
        <div class="col-md-6">
            <input type="checkbox" name="my-checkbox" class="bt-switch" checked data-on-color="default"> <small class="ml-10">Default Color</small>
        </div>
        <div class="col-md-6">
            <input type="checkbox" name="my-checkbox" class="bt-switch" checked data-on-color="primary"> <small class="ml-10">Primary Color</small>
        </div>
    </div>

    <div class="row mb-20">
        <div class="col-md-6">
            <input type="checkbox" name="my-checkbox" class="bt-switch" checked data-on-color="success"> <small class="ml-10">Success Color</small>
        </div>
        <div class="col-md-6">
            <input type="checkbox" name="my-checkbox" class="bt-switch" checked data-on-color="danger"> <small class="ml-10">Danger Color</small>
        </div>
    </div>

    <div class="row">
        <div class="col-md-6">
            <input type="checkbox" name="my-checkbox" class="bt-switch" checked data-on-color="info"> <small class="ml-10">Info Color</small>
        </div>
        <div class="col-md-6">
            <input type="checkbox" name="my-checkbox" class="bt-switch" checked data-on-color="warning"> <small class="ml-10">Warning Color</small>
        </div>
    </div>

##### Customization

Inverse Switch
Custom Off Color
Intermediate
Inverse Intermediate

    <div class="row mb-20">
        <div class="col-md-6">
            <input type="checkbox" name="my-checkbox" class="bt-switch" checked data-inverse="true"> <small class="ml-10">Inverse Switch</small>
        </div>
        <div class="col-md-6">
            <input type="checkbox" name="my-checkbox" class="bt-switch" data-off-color="danger" data-on-color="success"> <small class="ml-10">Custom Off Color</small>
        </div>
    </div>

    <div class="row mb-20">
        <div class="col-md-6">
            <input type="checkbox" name="my-checkbox" class="bt-switch" checked data-indeterminate="true"> <small class="ml-10">Intermediate</small>
        </div>
        <div class="col-md-6">
            <input type="checkbox" name="my-checkbox" class="bt-switch" data-indeterminate="true" data-inverse="true"> <small class="ml-10">Inverse Intermediate</small>
        </div>
    </div>

##### Custom Labels

Custom Label
Label
Label Text
Custom Button

    <div class="row mb-20">
        <div class="col-md-6">
            <input type="checkbox" name="my-checkbox" class="bt-switch" checked data-on-text="Yes" data-off-text="off"> <small class="ml-10">Custom Label</small>
        </div>
        <div class="col-md-6">
            <input type="checkbox" name="my-checkbox" class="bt-switch" checked data-on-text="Enabled" data-off-text="Disabled"> <small class="ml-10">Label</small>
        </div>
    </div>

    <div class="row mb-20">
        <div class="col-md-6">
            <input type="checkbox" name="my-checkbox" class="bt-switch" checked data-on-color="success" data-label-text="Switch"> <small class="ml-10">Label Text</small>
        </div>
        <div class="col-md-6">
            <input type="checkbox" name="my-checkbox" class="bt-switch" checked data-on-color="danger" data-label-text="||"> <small class="ml-10">Custom Button</small>
        </div>
    </div>