YNEX - Tailwind Admin 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>

Toggle Switches Style-1


    <div class="grid grid-cols-12 gap-y-1">
        <div class="xl:col-span-4 col-span-12">
            <div class="toggle on mb-4">
                <span></span>
            </div>
        </div>
        <div class="xl:col-span-4 col-span-12">
            <div class="toggle toggle-secondary on mb-4">
                <span></span>
            </div>
        </div>
        <div class="xl:col-span-4 col-span-12">
            <div class="toggle toggle-warning on mb-4">
                <span></span>
            </div>
        </div>
        <div class="xl:col-span-4 col-span-12">
            <div class="toggle toggle-info on mb-4">
                <span></span>
            </div>
        </div>
        <div class="xl:col-span-4 col-span-12">
            <div class="toggle toggle-success on mb-4">
                <span></span>
            </div>
        </div>
        <div class="xl:col-span-4 col-span-12">
            <div class="toggle toggle-danger on mb-4">
                <span></span>
            </div>
        </div>
        <div class="xl:col-span-4 col-span-12">
            <div class="toggle toggle-light on mb-4">
                <span></span>
            </div>
        </div>
        <div class="xl:col-span-4 col-span-12">
            <div class="toggle toggle-dark on mb-4">
                <span></span>
            </div>
        </div>
    </div>

Toggle Switches Style-2

Primary

Secondary

Warning

Info

Success

Danger

Light

Dark


    <div class="grid grid-cols-12 gap-y-1">
        <div class="xl:col-span-4 col-span-12">
            <div class="custom-toggle-switch flex items-center mb-4">
                <input id="toggleswitchPrimary" name="toggleswitch001" type="checkbox" checked>
                <label for="toggleswitchPrimary" class="label-primary"></label><span class="ms-3">Primary</span>
            </div>
        </div>
        <div class="xl:col-span-4 col-span-12">
            <div class="custom-toggle-switch flex items-center mb-4">
                <input id="toggleswitchSecondary" name="toggleswitch002" type="checkbox" checked>
                <label for="toggleswitchSecondary" class="label-secondary"></label><span class="ms-3">Secondary</span>
            </div>
        </div>
        <div class="xl:col-span-4 col-span-12">
            <div class="custom-toggle-switch flex items-center mb-4">
                <input id="toggleswitchWarning" name="toggleswitch003" type="checkbox" checked>
                <label for="toggleswitchWarning" class="label-warning"></label><span class="ms-3">Warning</span>
            </div>
        </div>
        <div class="xl:col-span-4 col-span-12">
            <div class="custom-toggle-switch flex items-center mb-4">
                <input id="toggleswitchInfo" name="toggleswitch004" type="checkbox" checked>
                <label for="toggleswitchInfo" class="label-info"></label><span class="ms-3">Info</span>
            </div>
        </div>
        <div class="xl:col-span-4 col-span-12">
            <div class="custom-toggle-switch flex items-center mb-4">
                <input id="toggleswitchSuccess" name="toggleswitch005" type="checkbox" checked>
                <label for="toggleswitchSuccess" class="label-success"></label><span class="ms-3">Success</span>
            </div>
        </div>
        <div class="xl:col-span-4 col-span-12">
            <div class="custom-toggle-switch flex items-center mb-4">
                <input id="toggleswitchDanger" name="toggleswitch006" type="checkbox" checked>
                <label for="toggleswitchDanger" class="label-danger"></label><span class="ms-3">Danger</span>
            </div>
        </div>
        <div class="xl:col-span-4 col-span-12">
            <div class="custom-toggle-switch flex items-center mb-4">
                <input id="toggleswitchLight" name="toggleswitch007" type="checkbox" checked>
                <label for="toggleswitchLight" class="label-light"></label><span class="ms-3">Light</span>
            </div>
        </div>
        <div class="xl:col-span-4 col-span-12">
            <div class="custom-toggle-switch flex items-center mb-4">
                <input id="toggleswitchDark" name="toggleswitch008" type="checkbox" checked>
                <label for="toggleswitchDark" class="label-dark"></label><span class="ms-3">Dark</span>
            </div>
        </div>
    </div>

Toggle Switch-1 Sizes

Small size toggle switch toggle-sm

Default toggle switch

Large size toggle switch toggle-lg

<div class="flex items-center flex-wrap mb-4">
    <div class=""> <p class="text-muted m-0">Small size toggle switch <code>toggle-sm</code></p></div>
    <div class="toggle toggle-sm on mb-0">
        <span></span>
    </div>
</div>
<div class="flex items-center flex-wrap mb-4">
    <div class=""> <p class="text-muted m-0">Default toggle switch <code></code></p></div>
    <div class="toggle toggle-secondary on mb-0">
        <span></span>
    </div>
</div>
<div class="flex items-center flex-wrap">
    <div class=""> <p class="text-muted m-0">Large size toggle switch <code>toggle-lg</code></p></div>
    <div class="toggle toggle-lg toggle-success on mb-0">
        <span></span>
    </div>
</div>

Toggle Switch-2 Sizes

Small size toggle switch toggle-sm

Default toggle switch

Large size toggle switch toggle-lg

<div class="flex items-center flex-wrap mb-4">
    <div class=""><p class="text-muted m-0">Small size toggle switch <code>toggle-sm</code></p></div>
    <div class="custom-toggle-switch toggle-sm ms-2">
        <input id="size-sm" name="toggleswitchsize" type="checkbox" checked>
        <label for="size-sm" class="label-primary"></label>
    </div>
</div>
<div class="flex items-center flex-wrap mb-4">
    <div class=""><p class="text-muted m-0">Default toggle switch</p></div>
    <div class="custom-toggle-switch ms-2">
        <input id="size-default" name="toggleswitchsize" type="checkbox" checked>
        <label for="size-default" class="label-secondary mb-1"></label>
    </div>
</div>
<div class="flex items-center flex-wrap">
    <div class=""><p class="text-muted m-0">Large size toggle switch <code>toggle-lg</code></p></div>
    <div class="custom-toggle-switch toggle-lg ms-2">
        <input id="size-lg" name="toggleswitchsize" type="checkbox" checked>
        <label for="size-lg" class="label-success mb-2"></label>
    </div>
</div>

Switcher

Checks & Radios