SoroniUIUX

Developer Dashboard UI Template

Please wait great thing is loading...

Checkboxes

Standard Checkboxes


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

Checkboxes Inline


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

Standard Checkbox Buttons


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

Checkbox Colored


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