#### Default

#### States

Default
Checked
Disabled
Disabled checked

    ================
        Default
    ================
    <div class="form-check form-switch form-check-inline">
        <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault">
        <label class="form-check-label" for="flexSwitchCheckDefault">Default</label>
    </div>

    =======================
        Default Checked
    =======================
    <div class="form-check form-switch form-check-inline">
        <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckChecked" checked>
        <label class="form-check-label" for="flexSwitchCheckChecked">Checked</label>
    </div>

    ================
        Disabled
    ================
    <div class="form-check form-switch form-check-inline">
        <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDisabled" disabled>
        <label class="form-check-label" for="flexSwitchCheckDisabled">Disabled</label>
    </div>

    ===========================
        Checked and Default
    ===========================
    <div class="form-check form-switch form-check-inline">
        <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckCheckedDisabled" checked disabled>
        <label class="form-check-label" for="flexSwitchCheckCheckedDisabled">Disabled checked</label>
    </div>

#### Colors

Primary
Info
Success
Danger
Secondary
Warning
Dark

    =============
      Primary
    =============
    <div class="form-check form-switch form-check-inline form-switch-primary">
        <input class="form-check-input" type="checkbox" role="switch" id="form-switch-primary" checked>
        <label class="form-check-label" for="form-switch-primary">Primary</label>
    </div>

    =============
      Info
    =============

    <div class="form-check form-switch form-check-inline form-switch-info">
        <input class="form-check-input" type="checkbox" role="switch" id="form-switch-info">
        <label class="form-check-label" for="form-switch-info">Info</label>
    </div>

    =============
      Success
    =============

    <div class="form-check form-switch form-check-inline form-switch-success">
        <input class="form-check-input" type="checkbox" role="switch" id="form-switch-success">
        <label class="form-check-label" for="form-switch-success">Success</label>
    </div>

    =============
      Danger
    =============

    <div class="form-check form-switch form-check-inline form-switch-danger">
        <input class="form-check-input" type="checkbox" role="switch" id="form-switch-danger">
        <label class="form-check-label" for="form-switch-danger">Danger</label>
    </div>

    =============
      Secondary
    =============

    <div class="form-check form-switch form-check-inline form-switch-secondary">
        <input class="form-check-input" type="checkbox" role="switch" id="form-switch-secondary">
        <label class="form-check-label" for="form-switch-secondary">Secondary</label>
    </div>

    =============
      Warning
    =============

    <div class="form-check form-switch form-check-inline form-switch-warning">
        <input class="form-check-input" type="checkbox" role="switch" id="form-switch-warning">
        <label class="form-check-label" for="form-switch-warning">Warning</label>
    </div>

    =============
      Dark
    =============

    <div class="form-check form-switch form-check-inline form-switch-dark">
        <input class="form-check-input" type="checkbox" role="switch" id="form-switch-dark">
        <label class="form-check-label" for="form-switch-dark">Dark</label>
    </div>

#### Icons

#### States

Default
Checked
Disabled
Disabled Checked

    <div class="switch form-switch-custom switch-inline form-switch-primary">
        <input class="switch-input" type="checkbox" role="switch" id="form-custom-switch-default">
        <label class="switch-label" for="form-custom-switch-default">Default</label>
    </div>

    <div class="switch form-switch-custom switch-inline form-switch-primary">
        <input class="switch-input" type="checkbox" role="switch" id="form-custom-switch-checked" checked>
        <label class="switch-label" for="form-custom-switch-checked">Checked</label>
    </div>

    <div class="switch form-switch-custom switch-inline form-switch-primary">
        <input class="switch-input" type="checkbox" role="switch" id="form-custom-switch-disabled" disabled>
        <label class="switch-label" for="form-custom-switch-disabled">Disabled</label>
    </div>

    <div class="switch form-switch-custom switch-inline form-switch-primary">
        <input class="switch-input" type="checkbox" role="switch" id="form-custom-switch-disabled-checked" checked disabled>
        <label class="switch-label" for="form-custom-switch-disabled-checked">Disabled Checked</label>
    </div>

#### Colors

Primary
Info
Success
Warning
Secondary
Danger
Dark

    <div class="switch form-switch-custom switch-inline form-switch-primary">
        <input class="switch-input" type="checkbox" role="switch" id="form-custom-switch-primary" checked>
        <label class="switch-label" for="form-custom-switch-primary">Primary</label>
    </div>

    <div class="switch form-switch-custom switch-inline form-switch-info">
        <input class="switch-input" type="checkbox" role="switch" id="form-custom-switch-info">
        <label class="switch-label" for="form-custom-switch-info">Info</label>
    </div>

    <div class="switch form-switch-custom switch-inline form-switch-success">
        <input class="switch-input" type="checkbox" role="switch" id="form-custom-switch-success">
        <label class="switch-label" for="form-custom-switch-success">Success</label>
    </div>

    <div class="switch form-switch-custom switch-inline form-switch-warning">
        <input class="switch-input" type="checkbox" role="switch" id="form-custom-switch-warning">
        <label class="switch-label" for="form-custom-switch-warning">Warning</label>
    </div>

    <div class="switch form-switch-custom switch-inline form-switch-secondary">
        <input class="switch-input" type="checkbox" role="switch" id="form-custom-switch-secondary">
        <label class="switch-label" for="form-custom-switch-secondary">Secondary</label>
    </div>

    <div class="switch form-switch-custom switch-inline form-switch-danger">
        <input class="switch-input" type="checkbox" role="switch" id="form-custom-switch-danger">
        <label class="switch-label" for="form-custom-switch-danger">Danger</label>
    </div>

    <div class="switch form-switch-custom switch-inline form-switch-dark">
        <input class="switch-input" type="checkbox" role="switch" id="form-custom-switch-dark">
        <label class="switch-label" for="form-custom-switch-dark">Dark</label>
    </div>

#### Custom

#### Mutiple

Slim
Rounded
ON OFF
Inner Text
Inner Icon
Circlular Icon

    <div class="switch form-switch-custom switch-inline form-switch-primary form-switch-custom slim-toggle">
        <div class="input-checkbox">
            <input class="switch-input" type="checkbox" role="switch" id="form-custom-switch-slim" checked>
        </div>
        <label class="switch-label" for="form-custom-switch-slim">Slim</label>
    </div>

    <div class="switch form-switch-custom switch-inline form-switch-primary form-switch-custom material-toggle">
        <div class="input-checkbox">
            <input class="switch-input" type="checkbox" role="switch" id="form-custom-switch-primary-ss" checked>
        </div>
        <label class="switch-label" for="form-custom-switch-primary-ss">Rounded</label>
    </div>

    <div class="switch form-switch-custom switch-inline form-switch-primary form-switch-custom inner-text-toggle">
        <div class="input-checkbox">
            <span class="switch-chk-label label-left">ON</span>
            <input class="switch-input" type="checkbox" role="switch" id="form-custom-switch-inner-text" checked>
            <span class="switch-chk-label label-right">OFF</span>
        </div>
        <label class="switch-label" for="form-custom-switch-inner-text">Inner Text</label>
    </div>

    <div class="switch form-switch-custom switch-inline form-switch-primary form-switch-custom inner-icon-toggle">
        <div class="input-checkbox">
            <span class="switch-chk-label label-left"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M6.995 12c0 2.761 2.246 5.007 5.007 5.007s5.007-2.246 5.007-5.007-2.246-5.007-5.007-5.007S6.995 9.239 6.995 12zM11 19h2v3h-2zm0-17h2v3h-2zm-9 9h3v2H2zm17 0h3v2h-3zM5.637 19.778l-1.414-1.414 2.121-2.121 1.414 1.414zM16.242 6.344l2.122-2.122 1.414 1.414-2.122 2.122zM6.344 7.759 4.223 5.637l1.415-1.414 2.12 2.122zm13.434 10.605-1.414 1.414-2.122-2.122 1.414-1.414z"></path></svg></span>
            <input class="switch-input" type="checkbox" role="switch" id="form-custom-switch-inner-icon" checked>
            <span class="switch-chk-label label-right"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 11.807A9.002 9.002 0 0 1 10.049 2a9.942 9.942 0 0 0-5.12 2.735c-3.905 3.905-3.905 10.237 0 14.142 3.906 3.906 10.237 3.905 14.143 0a9.946 9.946 0 0 0 2.735-5.119A9.003 9.003 0 0 1 12 11.807z"></path></svg></span>
        </div>
        <label class="switch-label" for="form-custom-switch-inner-icon">Inner Icon</label>
    </div>

    <div class="switch form-switch-custom switch-inline form-switch-primary form-switch-custom inner-icon-circle-toggle">
        <div class="input-checkbox">
            <input class="switch-input" type="checkbox" role="switch" id="form-custom-switch-circular-inner-icon" checked>
        </div>
        <label class="switch-label" for="form-custom-switch-circular-inner-icon">Circlular Icon</label>
    </div>

#### Double Label

Light Dark
Light
Dark

    <div class="switch form-switch-custom switch-inline form-switch-primary form-switch-custom dual-label-toggle">
        <label class="switch-label switch-label-left" for="form-custom-switch-dual-label">Monthly</label>
        <div class="input-checkbox">
            <input class="switch-input" type="checkbox" role="switch" id="form-custom-switch-dual-label" checked>
        </div>
        <label class="switch-label switch-label-right" for="form-custom-switch-dual-label">Yearly</label>
    </div>

    <br/>
    <br/>

    <div class="switch form-switch-custom switch-inline form-switch-primary form-switch-custom inner-label-toggle show">
        <div class="input-checkbox">
            <span class="switch-chk-label label-left">OFF</span>
            <input class="switch-input" type="checkbox" role="switch" id="form-custom-switch-inner-label" onchange="this.checked ? this.closest('.inner-label-toggle').classList.add('show') : this.closest('.inner-label-toggle').classList.remove('show')" checked>
            <span class="switch-chk-label label-right">ON</span>
        </div>
    </div>