YNEX - Blazor Server Tailwind Css Admin Dashboard Template

Checks

Default checkbox

Checked checkbox

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

Disabled

Disabled checkbox

Disabled checked checkbox

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

Radios

Default radio

Default checked radio

<div class="form-check">
    <input class="form-check-input" type="radio" name="flexRadioDefault"
        id="flexRadioDefault1">
    <label class="form-check-label" for="flexRadioDefault1">
        Default radio
    </label>
</div>
<div class="form-check">
    <input class="form-check-input" type="radio" name="flexRadioDefault"
        id="flexRadioDefault2" checked>
    <label class="form-check-label" for="flexRadioDefault2">
        Default checked radio
    </label>
</div>

Disabled

Disabled radio

Disabled checked radio

<div class="form-check">
    <input class="form-check-input" type="radio" name="flexRadioDisabled"
        id="flexRadioDisabled" disabled>
    <label class="form-check-label" for="flexRadioDisabled">
        Disabled radio
    </label>
</div>
<div class="form-check">
    <input class="form-check-input" type="radio" name="flexRadioDisabled"
        id="flexRadioCheckedDisabled" checked disabled>
    <label class="form-check-label" for="flexRadioCheckedDisabled">
        Disabled checked radio
    </label>
</div>

Default (stacked)

Default checkbox

Disabled checkbox

Default radio

Disabled radio

<div class="form-check">
    <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
    <label class="form-check-label" for="defaultCheck1">
        Default checkbox
    </label>
</div>
<div class="form-check">
    <input class="form-check-input" type="checkbox" value="" id="defaultCheck2"
        disabled>
    <label class="form-check-label" for="defaultCheck2">
        Disabled checkbox
    </label>
</div>
<div class="form-check">
    <input class="form-check-input" type="radio" name="exampleRadios"
        id="exampleRadios1" value="option1" checked>
    <label class="form-check-label" for="exampleRadios1">
        Default radio
    </label>
</div>
<div class="form-check mb-0">
    <input class="form-check-input" type="radio" name="exampleRadios"
        id="exampleRadios3" value="option3" disabled>
    <label class="form-check-label" for="exampleRadios3">
        Disabled radio
    </label>
</div>

Switches

Checked

Unchecked

On Off

<div class="form-check form-switch">
    <input class="form-check-input" type="checkbox" role="switch"
        id="flexSwitchCheckDefault">
    <label class="form-check-label" for="flexSwitchCheckDefault">Default switch
        checkbox input</label>
</div>
<div class="form-check form-switch">
    <input class="form-check-input" type="checkbox" role="switch"
        id="flexSwitchCheckChecked" checked>
    <label class="form-check-label" for="flexSwitchCheckChecked">Checked switch
        checkbox input</label>
</div>
<div class="form-check form-switch">
    <input class="form-check-input" type="checkbox" role="switch"
        id="flexSwitchCheckDisabled" disabled>
    <label class="form-check-label" for="flexSwitchCheckDisabled">Disabled
        switch
        checkbox input</label>
</div>
<div class="form-check form-switch mb-0">
    <input class="form-check-input" type="checkbox" role="switch"
        id="flexSwitchCheckCheckedDisabled" checked disabled>
    <label class="form-check-label" for="flexSwitchCheckCheckedDisabled">Disabled
        checked switch checkbox input</label>
</div>

Checkbox Sizes

Default

Medium

Large


<div class="form-check">
    <input class="form-check-input" type="checkbox" value="" id="checkebox-sm" checked>
    <label class="form-check-label" for="checkebox-sm">
        Default
    </label>
</div>
<div class="form-check form-check-md flex items-center">
    <input class="form-check-input" type="checkbox" value="" id="checkebox-md" checked>
    <label class="form-check-label" for="checkebox-md">
        Medium
    </label>
</div>
<div class="form-check form-check-lg flex items-center">
    <input class="form-check-input" type="checkbox" value="" id="checkebox-lg" checked>
    <label class="form-check-label" for="checkebox-lg">
        Large
    </label>
</div>

Radio Sizes

default

Medium

Large


<div class="form-check">
<input class="form-check-input" type="radio" name="Radio" id="Radio-sm">
<label class="form-check-label" for="Radio-sm">
default
</label>
</div>
<div class="form-check form-check-md">
<input class="form-check-input" type="radio" name="Radio" id="Radio-md">
<label class="form-check-label" for="Radio-md">
Medium
</label>
</div>
<div class="form-check form-check-lg">
<input class="form-check-input" type="radio" name="Radio" id="Radio-lg" checked>
<label class="form-check-label" for="Radio-lg">
Large
</label>
</div>

Inline

1

2

3 (disabled)

1

2

3 (disabled)


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

Reverse

Reverse checkbox

Disabled reverse checkbox

<div class="form-check form-check-reverse mb-4">
    <input class="form-check-input" type="checkbox" value=""
        id="reverseCheck1">
    <label class="form-check-label" for="reverseCheck1">
        Reverse checkbox
    </label>
</div>
<div class="form-check form-check-reverse mb-4">
    <input class="form-check-input" type="checkbox" value=""
        id="reverseCheck2" disabled>
    <label class="form-check-label" for="reverseCheck2">
        Disabled reverse checkbox
    </label>
</div>

<div class="form-check form-switch form-check-reverse">
    <input class="form-check-input" type="checkbox"
        id="flexSwitchCheckReverse">
    <label class="form-check-label" for="flexSwitchCheckReverse">Reverse
        switch
        checkbox input</label>
</div>

Switcher

Checks & Radios