Switch

Basic Switch

Here, the basic switch that you can use.

Default Switch 
<div class="flex flex-col gap-3">
  <div class="flex items-center justify-between"> 
      <span class="text-xs font-medium text-content">Default Switch</span>
      <label class="relative inline-flex items-center cursor-pointer">
          <input type="checkbox" class="sr-only peer checked=""/>
          <span class="w-11 h-6 bg-content rounded-full peer peer-focus:outline-none 
              peer-checked:after:translate-x-full peer-checked:after:content-white after:content-[''] after:absolute after:top-[2px] 
              after:left-[2px] after:bg-white after:border-gray-light after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary"></span>
      </label>
  </div> 
</div>

Switch Outline

Here, the basic switch outline that you can use.

Outlined Switch 
<div class="flex flex-col gap-3">
  <div class="flex items-center justify-between"> 
      <span class="text-xs font-medium text-content">Default Switch</span>
      <label class="relative inline-flex items-center cursor-pointer">
          <input type="checkbox" class="sr-only peer checked=""/>
          <span class="w-11 h-6 border-2 rounded-full peer peer-focus:outline-none  
              peer-checked:after:translate-x-full peer-checked:after:content-white after:content-[''] after:absolute after:top-[2px] 
              after:left-[2px] after:bg-content after:border-gray-light after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary"></span>
      </label>
  </div> 
</div>

Disable Switch

You can set disable switch using disable class.

Disable Switch 
<div class="flex flex-col gap-3">
  <div class="flex items-center justify-between"> 
      <span class="text-xs font-medium text-content">Default Switch</span>
      <label class="relative inline-flex items-center cursor-pointer">
          <input type="checkbox" class="sr-only peer disabled="disabled/>
          <span class="w-11 h-6 border-2 rounded-full peer peer-focus:outline-none  
              peer-checked:after:translate-x-full peer-checked:after:content-white after:content-[''] after:absolute after:top-[2px] 
              after:left-[2px] after:bg-content after:border-gray-light after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary"></span>
      </label>
  </div> 
</div>

Variation of Switches

Here, the Square switch that you can use.

Square Switch
Icon Switch
Flat Switch
Skewed
Flip 
<div class="flex items-center justify-between gap-5">
  <div class="flex items-center justify-between"> 
      <span class="gap-3 text-xs font-medium text-content">Square Switch</span>
      <label class="relative inline-flex items-center cursor-pointer">
          <input type="checkbox" class="sr-only peer checked=""/>
          <span class="w-11 h-6 bg-content rounded-5 peer peer-focus:outline-none 
              peer-checked:after:translate-x-full peer-checked:after:content-white after:content-[''] after:absolute after:top-[2px] 
              after:left-[2px] after:bg-white after:border-gray-light after:border after:rounded-5 after:h-5 after:w-5 after:transition-all peer-checked:bg-warning"></span>
      </label>
  </div> 
  <div class="flex items-center justify-between"> 
      <span class="gap-3 text-xs font-medium text-content">Flat Switch</span>
      <label class="relative inline-flex items-center cursor-pointer">
          <input type="checkbox" class="sr-only peer checked=""/>
          <span class="w-11 h-6 bg-content rounded-none peer peer-focus:outline-none 
              peer-checked:after:translate-x-full peer-checked:after:content-white after:content-[''] after:absolute after:top-[2px] 
              after:left-[2px] after:bg-white after:border-gray-light after:border after:rounded-none after:h-5 after:w-5 after:transition-all peer-checked:bg-info"></span>
      </label>
  </div> 
  <div class="flex items-center justify-between"> 
      <span class="text-xs font-medium text-content">Skewed</span>
      <div class="tg-list-item">
          <input type="checkbox" class="tgl tgl-skewed" id="cb3" checked=""/>
          <label class="tgl-btn" data-tg-off = "OFF" data-tg-on = "ON"  for = "cb3">
          </label>
      </div>
  </div>  
  <div>
    <div class="switch_boxbox_4"></div>
      <div class=".input_wrapper"></div>
        <input type='checkbox' class="switch_4></input>
        <div class="is_checked>
            <i class="w-4 h-4 stroke-contact" data-feather="check"> </i>
        </div>
        <div class="is_unchecked">
            <i class="w-4 h-4 stroke-contact" data-feather="x" > </i>
        </div>
  </div> 
  <div class="flex items-center justify-between"> 
      <span class="text-xs font-medium text-content">Flip</span>
      <div class="tg-list-item">
          <input type="checkbox" class="tgl tgl-flip" id="cb5" checked=""/>
          <label class="tgl-btn" data-tg-off = "Nope" data-tg-on = "Yeah!"  for = "cb5">
          </label>
      </div>
  </div> 
</div>

Colored Switch

Here, the colored switch that you can use with bg-* class.

Success color of the switch
Warning color of the switch
Info color of the switch
Danger color of the switch
Primary color of the switch 
<div class="flex flex-col gap-3">
  <div class="flex items-center justify-between"> 
      <span class="text-xs font-medium text-content">Success color of the switch</span>
      <label class="relative inline-flex items-center cursor-pointer">
          <input type="checkbox" class="sr-only peer checked=""/>
          <span class="w-11 h-6 bg-content rounded-full peer peer-focus:outline-none 
              peer-checked:after:translate-x-full peer-checked:after:content-white after:content-[''] after:absolute after:top-[2px] 
              after:left-[2px] after:bg-white after:border-gray-light after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-success"></span>
      </label>
  </div> 
  <div class="flex items-center justify-between"> 
      <span class="text-xs font-medium text-content">Warning color of the switch</span>
      <label class="relative inline-flex items-center cursor-pointer">
          <input type="checkbox" class="sr-only peer/>
          <span class="w-11 h-6 bg-content rounded-full peer peer-focus:outline-none 
              peer-checked:after:translate-x-full peer-checked:after:content-white after:content-[''] after:absolute after:top-[2px] 
              after:left-[2px] after:bg-white after:border-gray-light after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-warning"></span>
      </label>
  </div>
  <div class="flex items-center justify-between"> 
      <span class="text-xs font-medium text-content">Info color of the switch</span>
      <label class="relative inline-flex items-center cursor-pointer">
          <input type="checkbox" class="sr-only peer checked=""/>
          <span class="w-11 h-6 bg-content rounded-full peer peer-focus:outline-none 
              peer-checked:after:translate-x-full peer-checked:after:content-white after:content-[''] after:absolute after:top-[2px] 
              after:left-[2px] after:bg-white after:border-gray-light after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-info"></span>
      </label>
  </div>
  <div class="flex items-center justify-between"> 
      <span class="text-xs font-medium text-content">Danger color of the switch</span>
      <label class="relative inline-flex items-center cursor-pointer">
          <input type="checkbox" class="sr-only peer/>
          <span class="w-11 h-6 bg-content rounded-full peer peer-focus:outline-none 
              peer-checked:after:translate-x-full peer-checked:after:content-white after:content-[''] after:absolute after:top-[2px] 
              after:left-[2px] after:bg-white after:border-gray-light after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-danger"></span>
      </label>
  </div>
  <div class="flex items-center justify-between"> 
      <span class="text-xs font-medium text-content">Primary color of the switch</span>
      <label class="relative inline-flex items-center cursor-pointer">
          <input type="checkbox" class="sr-only peer checked=""/>
          <span class="w-11 h-6 bg-content rounded-full peer peer-focus:outline-none 
              peer-checked:after:translate-x-full peer-checked:after:content-white after:content-[''] after:absolute after:top-[2px] 
              after:left-[2px] after:bg-white after:border-gray-light after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary"></span>
      </label>
  </div>
</div>

Colored Outline

Here, the colored switch that you can use with bg-* class.

Success color of the outline switch
Warning color of the outline switch
Danger color of the outline switch
Info color of the outline switch
secondary color of the outline switch 
<div class="flex flex-col gap-3">
  <div class="flex items-center justify-between"> 
      <span class="text-xs font-medium text-content">Success color of the switch</span>
      <label class="relative inline-flex items-center cursor-pointer">
          <input type="checkbox" class="sr-only peer />
          <span class="w-11 h-6 bg-content rounded-full peer peer-focus:outline-none 
              peer-checked:after:translate-x-full peer-checked:after:content-white after:content-[''] after:absolute after:top-[2px] 
              after:left-[2px] after:bg-white after:border-gray-light after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:after:bg-info peer-checked:border-info"></span>
      </label>
  </div> 
  <div class="flex items-center justify-between"> 
      <span class="text-xs font-medium text-content">Warning color of the switch</span>
      <label class="relative inline-flex items-center cursor-pointer">
          <input type="checkbox" class="sr-only peer checked=""/>
          <span class="w-11 h-6 bg-content rounded-full peer peer-focus:outline-none 
              peer-checked:after:translate-x-full peer-checked:after:content-white after:content-[''] after:absolute after:top-[2px] 
              after:left-[2px] after:bg-white after:border-gray-light after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:after:bg-success peer-checked:border-success"></span>
      </label>
  </div>
  <div class="flex items-center justify-between"> 
      <span class="text-xs font-medium text-content">Info color of the switch</span>
      <label class="relative inline-flex items-center cursor-pointer">
          <input type="checkbox" class="sr-only peer checked=""/>
          <span class="w-11 h-6 bg-content rounded-full peer peer-focus:outline-none 
              peer-checked:after:translate-x-full peer-checked:after:content-white after:content-[''] after:absolute after:top-[2px] 
              after:left-[2px] after:bg-white after:border-gray-light after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:after:bg-secondary peer-checked:border-secondary"></span>
      </label>
  </div>
  <div class="flex items-center justify-between"> 
      <span class="text-xs font-medium text-content">Danger color of the switch</span>
      <label class="relative inline-flex items-center cursor-pointer">
          <input type="checkbox" class="sr-only peer />
          <span class="w-11 h-6 bg-content rounded-full peer peer-focus:outline-none 
              peer-checked:after:translate-x-full peer-checked:after:content-white after:content-[''] after:absolute after:top-[2px] 
              after:left-[2px] after:bg-white after:border-gray-light after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:after:bg-warning peer-checked:border-warning"></span>
      </label>
  </div>
</div>

Sizes

You can set switch sizes.

Large size switch
Medium size switch
Small size switch
Extra-Small size switch 
<div class="flex flex-col gap-3">
  <div class="flex items-center justify-between"> 
      <span class="text-xs font-medium text-content">Large size switch</span>
      <label class="relative inline-flex items-center cursor-pointer">
          <input type="checkbox" class="sr-only peer />
          <span class="w-[3.30rem] h-7 bg-content rounded-full peer peer-focus:outline-none 
              peer-checked:after:translate-x-full peer-checked:after:content-white after:content-[''] after:absolute after:top-[2px] 
              after:left-[2px] after:bg-white after:border-gray-light after:border after:rounded-full after:h-6 after:w-6 after:transition-all peer-checked:bg-primary"></span>
      </label>
  </div> 
  <div class="flex items-center justify-between"> 
      <span class="text-xs font-medium text-content">Medium size switch</span>
      <label class="relative inline-flex items-center cursor-pointer">
          <input type="checkbox" class="sr-only peer checked=""/>
          <span class="w-11 h-6 bg-content rounded-full peer peer-focus:outline-none 
              peer-checked:after:translate-x-full peer-checked:after:content-white after:content-[''] after:absolute after:top-[2px] 
              after:left-[2px] after:bg-white after:border-gray-light after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary"></span>
      </label>
  </div> 
  <div class="flex items-center justify-between"> 
      <span class="text-xs font-medium text-content">Small size switch</span>
      <label class="relative inline-flex items-center cursor-pointer">
          <input type="checkbox" class="sr-only peer checked=""/>
          <span class="w-9 h-5 bg-content rounded-full peer peer-focus:outline-none 
              peer-checked:after:translate-x-full peer-checked:after:content-white after:content-[''] after:absolute after:top-[2px] 
              after:left-[2px] after:bg-white after:border-gray-light after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-primary"></span>
      </label>
  </div> 
  <div class="flex items-center justify-between"> 
      <span class="text-xs font-medium text-content">Extra-Small size switch</span>
      <label class="relative inline-flex items-center cursor-pointer">
          <input type="checkbox" class="sr-only peer checked=""/>
          <span class="w-7 h-4 bg-content rounded-full peer peer-focus:outline-none 
              peer-checked:after:translate-x-full peer-checked:after:content-white after:content-[''] after:absolute after:top-[2px] 
              after:left-[2px] after:bg-white after:border-gray-light after:border after:rounded-full after:h-3 after:w-3 after:transition-all peer-checked:bg-primary"></span>
      </label>
  </div> 
</div>

Outlined Sizes

You can set outline switch sizes.

Large outline switch
Medium outline switch
Small outline switch
Extra-Small outline switch 
<div class="flex flex-col gap-3">
  <div class="flex items-center justify-between"> 
      <span class="text-xs font-medium text-content">Large outline switch</span>
      <label class="relative inline-flex items-center cursor-pointer">
          <input type="checkbox" class="sr-only peer checked=""/>
          <span class="w-[3.30rem] h-7 border-2 rounded-full peer peer-focus:outline-none 
              peer-checked:after:translate-x-full peer-checked:after:content-white after:content-[''] after:absolute after:top-[2px] 
              after:left-[2px] after:bg-content after:border-gray-light after:border after:rounded-full after:h-6 after:w-6 after:transition-all peer-checked:after:bg-secondary peer-checked:border-secondary"></span>
      </label>
  </div> 
  <div class="flex items-center justify-between"> 
      <span class="text-xs font-medium text-content">Medium outline switch</span>
      <label class="relative inline-flex items-center cursor-pointer">
          <input type="checkbox" class="sr-only peer />
          <span class="w-11 h-6 border-2 rounded-full peer peer-focus:outline-none 
              peer-checked:after:translate-x-full peer-checked:after:content-white after:content-[''] after:absolute after:top-[2px] 
              after:left-[2px] after:bg-content after:border-gray-light after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:after:bg-secondary peer-checked:border-secondary"></span>
      </label>
  </div> 
  <div class="flex items-center justify-between"> 
      <span class="text-xs font-medium text-content">Small outline switch</span>
      <label class="relative inline-flex items-center cursor-pointer">
          <input type="checkbox" class="sr-only peer />
          <span class="w-9 h-5 border-2 rounded-full peer peer-focus:outline-none 
              peer-checked:after:translate-x-full peer-checked:after:content-white after:content-[''] after:absolute after:top-[2px] 
              after:left-[2px] after:bg-content after:border-gray-light after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:after:bg-secondary peer-checked:border-secondary"></span>
      </label>
  </div> 
  <div class="flex items-center justify-between"> 
      <span class="text-xs font-medium text-content">Extra-Small outline switch</span>
      <label class="relative inline-flex items-center cursor-pointer">
          <input type="checkbox" class="sr-only peer checked=""/>
          <span class="w-7 h-4 border-2 rounded-full peer peer-focus:outline-none 
              peer-checked:after:translate-x-full peer-checked:after:content-white after:content-[''] after:absolute after:top-[2px] 
              after:left-[2px] after:bg-content after:border-gray-light after:border after:rounded-full after:h-3 after:w-3 after:transition-all peer-checked:after:bg-secondary peer-checked:border-secondary"></span>
      </label>
  </div> 
</div>

Outlined style

You can set outline switch sizes.

Large outline style
Medium outline style
Small outline style
Extra-Small outline style 
<div class="flex flex-col gap-3">
  <div class="flex items-center justify-between"> 
      <span class="text-xs font-medium text-content">Large outline style</span>
      <label class="relative inline-flex items-center cursor-pointer">
          <input type="checkbox" class="sr-only peer checked=""/>
          <span class="w-[3.30rem] h-7 rounded-full peer ring-2 ring-success peer-focus:ring-2 peer-focus:ring-success 
                peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] 
                after:left-[2px] after:bg-success after:rounded-full after:h-6 after:w-6 after:transition-all"></span>
      </label>
  </div> 
  <div class="flex items-center justify-between"> 
      <span class="text-xs font-medium text-content">Medium outline style</span>
      <label class="relative inline-flex items-center cursor-pointer">
          <input type="checkbox" class="sr-only peer />
          <span class="w-11 h-6 bg-content rounded-full peer ring-2 ring-success peer-focus:ring-2 peer-focus:ring-success 
              peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] 
              after:left-[2px] after:bg-success after:rounded-full after:h-5 after:w-5 after:transition-all"></span>
      </label>
  </div> 
  <div class="flex items-center justify-between"> 
      <span class="text-xs font-medium text-content">Small outline style</span>
      <label class="relative inline-flex items-center cursor-pointer">
          <input type="checkbox" class="sr-only peer checked=""/>
          <span class="w-9 h-5 bg-content rounded-full peer ring-2 ring-secondary peer-focus:ring-2 peer-focus:ring-success 
              peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] 
              after:left-[2px] after:bg-success after:rounded-full after:h-4 after:w-4 after:transition-all"></span>
      </label>
  </div> 
  <div class="flex items-center justify-between"> 
      <span class="text-xs font-medium text-content">Extra-Small outline style</span>
      <label class="relative inline-flex items-center cursor-pointer">
          <input type="checkbox" class="sr-only peer />
          <span class="w-7 h-4 bg-content rounded-full peer ring-2 ring-danger peer-focus:ring-2 peer-focus:ring-success 
              peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] 
              after:left-[2px] after:bg-success after:rounded-full after:h-3 after:w-3 after:transition-all"></span>
      </label>
  </div> 
</div>

Copyright 2023 © Govo theme by pixelstrap

Hand crafted & made with

Customizer
  • Template Mode
    Choose template mode dark & light
  • Layout Type
    Choose layout Ltr & Rtl
  • Monochrome Mode