<div class="form-check">
    <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>

<div class="form-check">
    <input class="form-check-input" type="checkbox" value="" id="flexCheckIndeterminate" checked>
    <label class="form-check-label" for="flexCheckIndeterminate">
        Indeterminate checkbox
    </label>
</div>

<div class="form-check">
    <input class="form-check-input" type="checkbox" value="" id="flexCheckIndeterminateDisabled" disabled checked>
    <label class="form-check-label" for="flexCheckIndeterminateDisabled">
        Disabled indeterminate checkbox
    </label>
</div>

<div class="form-check">
    <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>

<script>
    var checkbox1 = document.getElementById("flexCheckIndeterminate");
    checkbox1.indeterminate = true;
    var checkbox2 = document.getElementById("flexCheckIndeterminateDisabled");
    checkbox2.indeterminate = true;
</script>

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

<input type="checkbox" class="btn-check" id="btn-check">
<label class="btn btn-theme" for="btn-check">Single toggle</label>

<input type="checkbox" class="btn-check" id="btn-check-2" checked>
<label class="btn btn-theme" for="btn-check-2">Checked</label>

<input type="checkbox" class="btn-check" id="btn-check-3" disabled>
<label class="btn btn-theme" for="btn-check-3">Disabled</label>

<div class="row">
    <div class="col-12 col-sm-6 col-md-4 col-lg-3">
        <div class="form-check mb-3">
            <input class="form-check-input" type="checkbox" value="" id="checkC1" checked>
            <label class="form-check-label" for="checkC1">
            Theme checkbox
            </label>
        </div>

        <div class="form-check mb-3" style="--adminuiux-theme-1:var(--adminuiux-theme-accent-1)">
            <input class="form-check-input" type="checkbox" value="" id="checkC2" checked>
            <label class="form-check-label" for="checkC2">
            Accent checkbox
            </label>
        </div>

        <div class="form-check theme-brown mb-3">
            <input class="form-check-input" type="checkbox" value="" id="checkC14" checked>
            <label class="form-check-label" for="checkC14">
            Theme-purple checkbox
            </label>
        </div>

        <div class="form-check mb-3" style="--adminuiux-theme-1:var(--bs-primary)">
            <input class="form-check-input" type="checkbox" value="" id="checkC3" checked>
            <label class="form-check-label" for="checkC3">
            Primary checkbox
            </label>
        </div>
    </div>
    <div class="col-12 col-sm-6 col-md-4 col-lg-3">
        <div class="form-check mb-3" style="--adminuiux-theme-1:var(--bs-secondary)">
            <input class="form-check-input" type="checkbox" value="" id="checkC4" checked>
            <label class="form-check-label" for="checkC4">
            Secondary checkbox
            </label>
        </div>

        <div class="form-check mb-3" style="--adminuiux-theme-1:var(--bs-info)">
            <input class="form-check-input" type="checkbox" value="" id="checkC5" checked>
            <label class="form-check-label" for="checkC5">
            Info checkbox
            </label>
        </div>

        <div class="form-check mb-3" style="--adminuiux-theme-1:var(--bs-success)">
            <input class="form-check-input" type="checkbox" value="" id="checkC6" checked>
            <label class="form-check-label" for="checkC6">
            Success checkbox
            </label>
        </div>
    </div>
    <div class="col-12 col-sm-6 col-md-4 col-lg-3">
        <div class="form-check mb-3" style="--adminuiux-theme-1:var(--bs-warning)">
            <input class="form-check-input" type="checkbox" value="" id="checkC7" checked>
            <label class="form-check-label" for="checkC7">
            Warning checkbox
            </label>
        </div>

        <div class="form-check mb-3" style="--adminuiux-theme-1:var(--bs-danger)">
            <input class="form-check-input" type="checkbox" value="" id="checkC8" checked>
            <label class="form-check-label" for="checkC8">
            Danger checkbox
            </label>
        </div>

        <div class="form-check mb-3" style="--adminuiux-theme-1:var(--bs-dark)">
            <input class="form-check-input" type="checkbox" value="" id="checkC10" checked>
            <label class="form-check-label" for="checkC10">
            Dark checkbox
            </label>
        </div>
    </div>

    <div class="col-12 col-sm-6 col-md-4 col-lg-3">
        <div class="form-check theme-red mb-3">
            <input class="form-check-input" type="checkbox" value="" id="checkC11" checked>
            <label class="form-check-label" for="checkC11">
            Theme-red checkbox
            </label>
        </div>

        <div class="form-check theme-orange mb-3">
            <input class="form-check-input" type="checkbox" value="" id="checkC12" checked>
            <label class="form-check-label" for="checkC12">
            Theme-orange checkbox
            </label>
        </div>
    
        <div class="form-check theme-teal mb-3">
            <input class="form-check-input" type="checkbox" value="" id="checkC13" checked>
            <label class="form-check-label" for="checkC13">
            Theme-teal checkbox
            </label>
        </div>
    </div>
 </div>
 <input type="checkbox" class="btn-check" id="btn-check11">
 <label class="btn btn-theme" for="btn-check11">Theme</label>
 
 <input type="checkbox" class="btn-check" id="btn-check13" checked>
 <label class="btn btn-accent" for="btn-check13">Accent</label>
 
 <input type="checkbox" class="btn-check" id="btn-check12">
 <label class="btn btn-primary" for="btn-check12">Primary</label>
 
 <input type="checkbox" class="btn-check" id="btn-check14">
 <label class="btn btn-secondary" for="btn-check14">Secondary</label>
 
 <input type="checkbox" class="btn-check" id="btn-check15" checked>
 <label class="btn btn-info" for="btn-check15">Info</label>
 
 <input type="checkbox" class="btn-check" id="btn-check16">
 <label class="btn btn-success" for="btn-check16">Success</label>
 
 <input type="checkbox" class="btn-check" id="btn-check17">
 <label class="btn btn-warning" for="btn-check17">Warning</label>
 
 <input type="checkbox" class="btn-check" id="btn-check18" checked>
 <label class="btn btn-danger" for="btn-check18">Danger</label>
 
 <input type="checkbox" class="btn-check" id="btn-check19">
 <label class="btn btn-light" for="btn-check19">Light</label>
 
 <input type="checkbox" class="btn-check" id="btn-check20">
 <label class="btn btn-dark" for="btn-check20">Dark</label>