<div class="form-check">
    <input class="form-check-input" type="radio" value="" id="flexCheckDefault">
    <label class="form-check-label" for="flexCheckDefault">
        Default radio
    </label>
</div>

<div class="form-check">
    <input class="form-check-input" type="radio" value="" id="flexCheckChecked" checked>
    <label class="form-check-label" for="flexCheckChecked">
        Checked radio
    </label>
</div>

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

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

<div class="form-check">
    <input class="form-check-input" type="radio" value="" id="flexCheckDisabled" disabled>
    <label class="form-check-label" for="flexCheckDisabled">
        Disabled radio
    </label>
</div>

<div class="form-check">
    <input class="form-check-input" type="radio" value="" id="flexCheckCheckedDisabled" checked disabled>
    <label class="form-check-label" for="flexCheckCheckedDisabled">
        Disabled checked radio
    </label>
</div>

<script>
    var radio1 = document.getElementById("flexCheckIndeterminate");
    radio1.indeterminate = true;

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

<div class="form-check form-check-inline">
    <input class="form-check-input" type="radio" 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" 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" id="inlineradio3" value="option3" disabled>
    <label class="form-check-label" for="inlineradio3">3 (disabled)</label>
</div>
                    

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

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

<input type="radio" 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="radio" value="" id="radioC1" checked>
            <label class="form-check-label" for="radioC1">
                Theme radio
            </label>
        </div>

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

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

        <div class="form-check mb-3" style="--adminuiux-theme-1:var(--bs-primary)">
            <input class="form-check-input" type="radio" value="" id="radioC3" checked>
            <label class="form-check-label" for="radioC3">
                Primary radio
            </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="radio" value="" id="radioC4" checked>
            <label class="form-check-label" for="radioC4">
                Secondary radio
            </label>
        </div>
        <div class="form-check mb-3" style="--adminuiux-theme-1:var(--bs-info)">
            <input class="form-check-input" type="radio" value="" id="radioC5" checked>
            <label class="form-check-label" for="radioC5">
                Info radio
            </label>
        </div>
        <div class="form-check mb-3" style="--adminuiux-theme-1:var(--bs-success)">
            <input class="form-check-input" type="radio" value="" id="radioC6" checked>
            <label class="form-check-label" for="radioC6">
                Success radio
            </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="radio" value="" id="radioC7" checked>
            <label class="form-check-label" for="radioC7">
                Warning radio
            </label>
        </div>

        <div class="form-check mb-3" style="--adminuiux-theme-1:var(--bs-danger)">
            <input class="form-check-input" type="radio" value="" id="radioC8" checked>
            <label class="form-check-label" for="radioC8">
                Danger radio
            </label>
        </div>
        
        <div class="form-check mb-3" style="--adminuiux-theme-1:var(--bs-dark)">
            <input class="form-check-input" type="radio" value="" id="radioC10" checked>
            <label class="form-check-label" for="radioC10">
                Dark radio
            </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="radio" value="" id="radioC11" checked>
            <label class="form-check-label" for="radioC11">
                Theme-red radio
            </label>
        </div>

        <div class="form-check theme-orange mb-3">
            <input class="form-check-input" type="radio" value="" id="radioC12" checked>
            <label class="form-check-label" for="radioC12">
                Theme-orange radio
            </label>
        </div>

        <div class="form-check theme-teal mb-3">
            <input class="form-check-input" type="radio" value="" id="radioC13" checked>
            <label class="form-check-label" for="radioC13">
                Theme-teal radio
            </label>
        </div>
    </div>
</div>

<input type="radio" class="btn-check" id="btn-check11">
<label class="btn btn-theme" for="btn-check11">Theme</label>

<input type="radio" class="btn-check" id="btn-check13" checked>
<label class="btn btn-accent" for="btn-check13">Accent</label>

<input type="radio" class="btn-check" id="btn-check12">
<label class="btn btn-primary" for="btn-check12">Primary</label>

<input type="radio" class="btn-check" id="btn-check14">
<label class="btn btn-secondary" for="btn-check14">Secondary</label>

<input type="radio" class="btn-check" id="btn-check15" checked>
<label class="btn btn-info" for="btn-check15">Info</label>

<input type="radio" class="btn-check" id="btn-check16">
<label class="btn btn-success" for="btn-check16">Success</label>

<input type="radio" class="btn-check" id="btn-check17">
<label class="btn btn-warning" for="btn-check17">Warning</label>

<input type="radio" class="btn-check" id="btn-check18" checked>
<label class="btn btn-danger" for="btn-check18">Danger</label>

<input type="radio" class="btn-check" id="btn-check19">
<label class="btn btn-light" for="btn-check19">Light</label>

<input type="radio" class="btn-check" id="btn-check20">
<label class="btn btn-dark" for="btn-check20">Dark</label>