Switch

ADMIN PANEL

Switch

Here, the basic switch that you can use.

Preview Html
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-gray-500 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-500 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.

Preview Html
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  
              border-gray-500 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-500 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-secondary"></span>
      </label>
  </div> 
</div>

Disable Switch

You can set disable switch using disable class.

Preview Html
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] border-gray-500 after:bg-white after:border-gray-500 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary"></span>
      </label>
  </div> 
</div>

Colored Switch

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

Preview Html
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-success 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-success 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 checked=""/>
          <span class="w-11 h-6 bg-warning 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-warning 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-info 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-info 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 checked=""/>
          <span class="w-11 h-6 bg-danger 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-danger 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-primary 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-500 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 withbg-* class.

Preview Html
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 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-500 border-gray-500 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-500 border-gray-500 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-500 border-gray-500 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 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-500 border-gray-500 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>
Customizer
  • Template Mode
    Choose template mode dark & light
  • Layout Type
    Choose layout Ltr & Rtl
  • Sidebar Type
    Choose Sidebar icon & full
Buy Now