YNEX - Blazor Server Tailwind Css Admin Dashboard Template

Default Toggle Switch


<input type="checkbox" id="hs-basic-usage" class="ti-switch">
<label> for="hs-basic-usage" class="sr-only">Toggle switch</label>

Toggle Switch With Tooltip


<div class="hs-tooltip flex items-center">
<input type="checkbox" id="hs-tooltip-example" class="hs-tooltip-toggle ti-switch shrink-0">
<label for="hs-tooltip-example" class="text-sm text-gray-500 ms-3 dark:text-white/70">Allow push notifications</label>
<div class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-10 py-1 px-2 bg-gray-900 text-xs font-medium text-white rounded-sm shadow-sm dark:bg-slate-700" role="tooltip">
    Enable push notifications
</div>
</div>

Toggle Switch With Description

Unchecked

Checked

On Off


<div class="space-y-4">
<div class="flex items-center">
    <input type="checkbox" id="hs-basic-with-description-unchecked" class="ti-switch">
    <label> for="hs-basic-with-description-unchecked"
        class="text-sm text-gray-500 ms-3 dark:text-white/70">Unchecked</label>
</div>

<div class="flex items-center">
    <input type="checkbox" id="hs-basic-with-description-checked" class="ti-switch" checked>
    <label> for="hs-basic-with-description-checked"
        class="text-sm text-gray-500 ms-3 dark:text-white/70">Checked</label>
</div>

<div class="flex items-center">
    <label> class="text-sm text-gray-500 me-3 dark:text-white/70">On</label>
    <input type="checkbox" id="hs-basic-with-description" class="ti-switch">
    <label> class="text-sm text-gray-500 ms-3 dark:text-white/70">Off</label>
</div>
</div>

Disabled Toggle Switch

Unchecked

Checked

On Off


<div class="space-y-4">
<div class="flex items-center opacity-70">
    <input type="checkbox" id="hs-basic-disabled-with-description-unchecked" class="ti-switch shrink-0 pointer-events-none" disabled>
    <label for="hs-basic-disabled-with-description-unchecked" class="text-sm text-gray-500 ms-3 dark:text-white/70">Unchecked</label>
</div>

<div class="flex items-center opacity-70">
    <input type="checkbox" id="hs-basic-disabled-with-description-checked" class="ti-switch shrink-0 pointer-events-none" checked disabled>
    <label for="hs-basic-disabled-with-description-checked" class="text-sm text-gray-500 ms-3 dark:text-white/70">Checked</label>
</div>

<div class="flex items-center opacity-70">
    <label class="text-sm text-gray-500 me-3 dark:text-white/70">On</label>
    <input type="checkbox" id="hs-basic-disabled-with-description" class="ti-switch shrink-0 pointer-events-none" disabled>
    <label class="text-sm text-gray-500 ms-3 dark:text-white/70">Off</label>
</div>
</div>

Toggle Switch With Sizes

Extra small

Small

Medium

Large


<div class="space-y-4">
<div class="flex items-center">
    <input type="checkbox" id="hs-xs-switch" class="ti-switch shrink-0 !w-[35px] !h-[21px] before:size-4">
    <label> for="hs-xs-switch" class="text-sm text-gray-500 ms-3 dark:text-white/70">Extra small</label>
</div>

<div class="flex items-center">
    <input type="checkbox" id="hs-small-switch" class="ti-switch shrink-0 !w-11 !h-6 before:size-5">
    <label> for="hs-small-switch" class="text-sm text-gray-500 ms-3 dark:text-white/70">Small</label>
</div>


<div class="flex items-center">
    <input type="checkbox" id="hs-medium-switch" class="ti-switch shrink-0">
    <label> for="hs-medium-switch" class="text-sm text-gray-500 ms-3 dark:text-white/70">Medium</label>
</div>

<div class="flex items-center">
    <input type="checkbox" id="hs-large-switch" class="ti-switch shrink-0 !w-[4.25rem] !h-9 before:w-8 before:h-8">
    <label> for="hs-large-switch" class="text-sm text-gray-500 ms-3 dark:text-white/70">Large</label>
</div>
</div>

Toggle Switch Validation States

Valid toggle switch

Invalid toggle switch


<div class="space-y-4">
<div class="flex items-center">
<input type="checkbox" id="hs-valid-toggle-switch" class="ti-switch shrink-0 checked:bg-none checked:bg-green-600 checked:hover:bg-green-600 checked:focus:bg-green-600 focus:border-green-600 focus:ring-green-600 dark:checked:bg-green-600

checked:before:bg-green-200 dark:checked:before:bg-green-200" checked>
<label for="hs-valid-toggle-switch" class="text-sm text-gray-500 ms-3 dark:text-white/70">Valid toggle switch</label>
</div>

<div class="flex items-center">
<input type="checkbox" id="hs-invalid-toggle-switch" class="ti-switch shrink-0 checked:bg-none checked:bg-red-600 checked:hover:bg-red-600 checked:focus:bg-red-600 focus:border-red-600 focus:ring-red-600 dark:checked:bg-red-600

checked:before:bg-red-200 dark:checked:before:bg-red-200" checked>
<label for="hs-invalid-toggle-switch" class="text-sm text-gray-500 ms-3 dark:text-white/70">Invalid toggle switch</label>
</div>
</div>

Solid Color Variants


<div class="space-x-4">
<div class="relative inline-block">
    <input type="checkbox" id="hs-xs-solid-switch" class="ti-switch shrink-0 !w-[35px] !h-[21px] before:size-4">
    <label for="hs-xs-solid-switch"  class="sr-only">Extra small</label>
</div>

<div class="relative inline-block">
    <input type="checkbox" id="hs-small-solid-switch" class="ti-switch shrink-0 !w-11 !h-6 before:size-5">
    <label for="hs-small-solid-switch"  class="sr-only">Small</label>
</div>


<div class="relative inline-block">
    <input type="checkbox" id="hs-medium-solid-switch" class="ti-switch shrink-0">
    <label for="hs-medium-solid-switch"  class="sr-only">Medium</label>
</div>

<div class="relative inline-block">
    <input type="checkbox" id="hs-large-solid-switch" class="ti-switch shrink-0 !w-[4.25rem] !h-9 before:w-8 before:h-8">
    <label for="hs-large-solid-switch"  class="sr-only">Large</label>
</div>
</div>

Solid Color With Icons


<div class="space-x-4 rtl:space-x-reverse">
<!-- Switch/Toggle -->
<div class="relative inline-block">
  <input type="checkbox" id="hs-small-solid-switch-with-icons" class="peer relative shrink-0 w-11 h-6 p-px bg-gray-100 border-transparent text-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:ring-primary disabled:opacity-50 disabled:pointer-events-none checked:bg-none checked:text-primary checked:border-primary focus:checked:border-primary dark:bg-bodybg dark:border-white/10 dark:checked:bg-primary dark:checked:border-primary dark:focus:ring-offset-gray-600

  before:inline-block before:size-5 before:bg-white checked:before:bg-white before:translate-x-0 checked:before:translate-x-full rtl:checked:before:-translate-x-full before:rounded-full before:shadow before:transform before:ring-0 before:transition before:ease-in-out before:duration-200 dark:before:bg-black/20 dark:checked:before:bg-white">
  <label> for="hs-small-solid-switch-with-icons" class="sr-only">switch</label>
  <span class="peer-checked:text-white text-gray-500 dark:text-white/70 size-5 absolute top-[3px] start-0.5 flex justify-center items-center pointer-events-none transition-colors ease-in-out duration-200">
    <svg class="flex-shrink-0 size-3" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
  </span>
  <span class="peer-checked:text-primary text-gray-500 dark:text-white/70 size-5 absolute top-[3px] end-0.5 flex justify-center items-center pointer-events-none transition-colors ease-in-out duration-200">
    <svg class="flex-shrink-0 size-3" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
  </span>
</div>
<!-- End Switch/Toggle -->

<!-- Switch/Toggle -->
<div class="relative inline-block">
  <input type="checkbox" id="hs-default-solid-switch-with-icons" class="peer relative w-[3.25rem] h-7 p-px bg-gray-100 border-transparent text-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:ring-primary disabled:opacity-50 disabled:pointer-events-none checked:bg-none checked:text-primary checked:border-primary focus:checked:border-primary dark:bg-bodybg dark:border-white/10 dark:checked:bg-primary dark:checked:border-primary dark:focus:ring-offset-gray-600

  before:inline-block before:size-6 before:bg-white checked:before:bg-white before:translate-x-0 checked:before:translate-x-full rtl:checked:before:-translate-x-full before:rounded-full before:shadow before:transform before:ring-0 before:transition before:ease-in-out before:duration-200 dark:before:bg-black/20 dark:checked:before:bg-white">
  <label> for="hs-default-solid-switch-with-icons" class="sr-only">switch</label>
  <span class="peer-checked:text-white text-gray-500 dark:text-white/70 size-6 absolute top-0.5 start-0.5 flex justify-center items-center pointer-events-none transition-colors ease-in-out duration-200">
    <svg class="flex-shrink-0 size-3" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
  </span>
  <span class="peer-checked:text-primary text-gray-500 dark:text-white/70 size-6 absolute top-0.5 end-0.5 flex justify-center items-center pointer-events-none transition-colors ease-in-out duration-200">
    <svg class="flex-shrink-0 size-3" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
  </span>
</div>
<!-- End Switch/Toggle -->

<!-- Switch/Toggle -->
<div class="relative inline-block">
  <input type="checkbox" id="hs-large-solid-switch-with-icons" class="peer relative shrink-0 w-[4.25rem] h-9 p-px bg-gray-100 border-transparent text-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:ring-primary disabled:opacity-50 disabled:pointer-events-none checked:bg-none checked:text-primary checked:border-primary focus:checked:border-primary dark:bg-bodybg dark:border-white/10 dark:checked:bg-primary dark:checked:border-primary dark:focus:ring-offset-gray-600

  before:inline-block before:w-8 before:h-8 before:bg-white checked:before:bg-white before:translate-x-0 checked:before:translate-x-full rtl:checked:before:-translate-x-full before:rounded-full before:shadow before:transform before:ring-0 before:transition before:ease-in-out before:duration-200 dark:before:bg-black/20 dark:checked:before:bg-white">
  <label> for="hs-large-solid-switch-with-icons" class="sr-only">switch</label>
  <span class="peer-checked:text-white text-gray-500 dark:text-white/70 size-8 absolute top-0.5 start-0.5 flex justify-center items-center pointer-events-none transition-colors ease-in-out duration-200">
    <svg class="flex-shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
  </span>
  <span class="peer-checked:text-primary text-gray-500 dark:text-white/70 size-8 absolute top-0.5 end-0.5 flex justify-center items-center pointer-events-none transition-colors ease-in-out duration-200">
    <svg class="flex-shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
  </span>
</div>
<!-- End Switch/Toggle -->
</div>

Soft Color Variants


<div class="space-x-4">
<div class="relative inline-block">
    <input type="checkbox" id="hs-xs-soft-switch" class="ti-switch checked:!bg-primary/10 checked:!text-primary/10 checked:!border-primary/20 focus:checked:!border-primary/10 checked:before:!bg-primary dark:checked:before:bg-primary shrink-0 !w-[35px] !h-[21px] before:size-4">
    <label for="hs-xs-soft-switch"  class="sr-only">Extra small</label>
</div>

<div class="relative inline-block">
    <input type="checkbox" id="hs-small-soft-switch" class="ti-switch checked:!bg-primary/10 checked:!text-primary/10 checked:!border-primary/20 focus:checked:!border-primary/10 checked:before:!bg-primary dark:checked:before:bg-primary shrink-0 !w-11 !h-6 before:size-5">
    <label for="hs-small-soft-switch"  class="sr-only">Small</label>
</div>


<div class="relative inline-block">
    <input type="checkbox" id="hs-medium-soft-switch" class="ti-switch checked:!bg-primary/10 checked:!text-primary/10 checked:!border-primary/20 focus:checked:!border-primary/10 checked:before:!bg-primary dark:checked:before:bg-primary shrink-0">
    <label for="hs-medium-soft-switch"  class="sr-only">Medium</label>
</div>

<div class="relative inline-block">
    <input type="checkbox" id="hs-large-soft-switch" class="ti-switch checked:!bg-primary/10 checked:!text-primary/10 checked:!border-primary/20 focus:checked:!border-primary/10 checked:before:!bg-primary dark:checked:before:bg-primary shrink-0 !w-[4.25rem] !h-9 before:w-8 before:h-8">
    <label for="hs-large-soft-switch"  class="sr-only">Large</label>
</div>
</div>

Soft Color With Icons


<div class="space-x-4 rtl:space-x-reverse">
<!-- Switch/Toggle -->
<div class="relative inline-block">
  <input type="checkbox" id="hs-small-switch-soft-with-icons" class="peer relative shrink-0 w-11 h-6 p-px bg-gray-100 border border-gray-200 text-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:ring-primary disabled:opacity-50 disabled:pointer-events-none checked:bg-none checked:text-primary/30 checked:border-primary/50 focus:checked:border-primary/50 dark:bg-bodybg dark:border-white/10 dark:checked:bg-primary/30 dark:checked:border-primary dark:focus:ring-offset-gray-600
  before:inline-block before:size-5 before:bg-white checked:before:bg-primary before:translate-x-0 checked:before:translate-x-full rtl:checked:before:-translate-x-full before:rounded-full before:transform before:ring-0 before:transition before:ease-in-out before:duration-200 dark:before:bg-black/20 dark:checked:before:bg-primary">
  <label for="hs-small-switch-soft-with-icons" class="sr-only">switch</label>
  <span class="peer-checked:text-primary text-gray-500 dark:text-white/70 size-5 absolute top-[3px] start-0.5 flex justify-center items-center pointer-events-none transition-colors ease-in-out duration-200">
    <svg class="flex-shrink-0 size-3" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
  </span>
  <span class="peer-checked:text-white  size-5 absolute top-[3px] end-0.5 flex justify-center items-center pointer-events-none transition-colors ease-in-out duration-200">
    <svg class="flex-shrink-0 size-3" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
  </span>
</div>
<!-- End Switch/Toggle -->

<!-- Switch/Toggle -->
<div class="relative inline-block">
  <input type="checkbox" id="hs-default-switch-soft-with-icons" class="peer relative w-[3.25rem] h-7 p-px bg-gray-100 border border-gray-200 text-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:ring-primary disabled:opacity-50 disabled:pointer-events-none checked:bg-none checked:text-primary/30 checked:border-primary/50 focus:checked:border-primary/50 dark:bg-bodybg dark:border-white/10 dark:checked:bg-primary/30 dark:checked:border-primary dark:focus:ring-offset-gray-600
  before:inline-block before:size-6 before:bg-white checked:before:bg-primary before:translate-x-0 checked:before:translate-x-full rtl:checked:before:-translate-x-full before:rounded-full before:transform before:ring-0 before:transition before:ease-in-out before:duration-200 dark:before:bg-black/20 dark:checked:before:bg-primary">
  <label for="hs-default-switch-soft-with-icons" class="sr-only">switch</label>
  <span class="peer-checked:text-primary text-gray-500 dark:text-white/70 size-6 absolute top-0.5 start-0.5 flex justify-center items-center pointer-events-none transition-colors ease-in-out duration-200">
    <svg class="flex-shrink-0 size-3" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
  </span>
  <span class="peer-checked:text-white size-6 absolute top-0.5 end-0.5 flex justify-center items-center pointer-events-none transition-colors ease-in-out duration-200">
    <svg class="flex-shrink-0 size-3" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
  </span>
</div>
<!-- End Switch/Toggle -->

<!-- Switch/Toggle -->
<div class="relative inline-block">
  <input type="checkbox" id="hs-large-switch-soft-with-icons" class="peer relative shrink-0 w-[4.25rem] h-9 p-px bg-gray-100 border border-gray-200 text-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:ring-primary disabled:opacity-50 disabled:pointer-events-none checked:bg-none checked:text-primary/30 checked:border-primary/50 focus:checked:border-primary/50 dark:bg-bodybg dark:border-white/10 dark:checked:bg-primary/30 dark:checked:border-primary dark:focus:ring-offset-gray-600

  before:inline-block before:w-8 before:h-8 before:bg-white checked:before:bg-primary before:translate-x-0 checked:before:translate-x-full rtl:checked:before:-translate-x-full before:rounded-full before:transform before:ring-0 before:transition before:ease-in-out before:duration-200 dark:before:bg-black/20 dark:checked:before:bg-primary">
  <label for="hs-large-switch-soft-with-icons" class="sr-only">switch</label>
  <span class="peer-checked:text-primary text-gray-500 dark:text-white/70 size-8 absolute top-0.5 start-0.5 flex justify-center items-center pointer-events-none transition-colors ease-in-out duration-200">
    <svg class="flex-shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
  </span>
  <span class="peer-checked:text-white size-8 absolute top-0.5 end-0.5 flex justify-center items-center pointer-events-none transition-colors ease-in-out duration-200">
    <svg class="flex-shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
  </span>
</div>
<!-- End Switch/Toggle -->
</div>

Switcher

Form switch