Switch
Switches toggle the state of a single setting on or off.
Basic
PreviewCode
<button type="button" role="switch" aria-checked="false" class="relative inline-flex shrink-0 cursor-pointer appearance-none rounded-full border-2 border-transparent transition focus:outline-none focus:ring focus:ring-blue-200 bg-slate-200 text-slate-600 h-5 w-8">
<span aria-hidden="true" class="pointer-events-none flex items-center justify-center rounded-full bg-white transition will-change-transform translate-x-0 h-4 w-4">
</span>
</button>
<button type="button" role="switch" aria-checked="false" class="relative inline-flex shrink-0 cursor-pointer appearance-none rounded-full border-2 border-transparent transition focus:outline-none focus:ring focus:ring-blue-200 bg-blue-600 text-blue-600 h-5 w-8">
<span aria-hidden="true" class="pointer-events-none flex items-center justify-center rounded-full bg-white transition will-change-transform translate-x-3 h-4 w-4">
</span>
</button>
With Icon
PreviewCode
<button type="button" role="switch" aria-checked="false" class="relative inline-flex shrink-0 cursor-pointer appearance-none rounded-full border-2 border-transparent transition focus:outline-none focus:ring focus:ring-blue-200 bg-slate-200 text-slate-600 h-5 w-8">
<span aria-hidden="true" class="pointer-events-none flex items-center justify-center rounded-full bg-white transition will-change-transform translate-x-0 h-4 w-4">
<svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" class="h-2.5 w-2.5 shrink-0 text-current">
<path d="M19 5 5 19M5 5l14 14">
</path>
</svg>
</span>
</button>
<button type="button" role="switch" aria-checked="false" class="relative inline-flex shrink-0 cursor-pointer appearance-none rounded-full border-2 border-transparent transition focus:outline-none focus:ring focus:ring-blue-200 bg-blue-600 text-blue-600 h-5 w-8">
<span aria-hidden="true" class="pointer-events-none flex items-center justify-center rounded-full bg-white transition will-change-transform translate-x-3 h-4 w-4">
<svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" class="h-2.5 w-2.5 shrink-0 text-current">
<path d="m4.222 12.778 4.617 5.276a1 1 0 0 0 1.563-.073L19.779 5">
</path>
</svg>
</span>
</button>
With Label
PreviewCode
<div class="flex items-center space-x-2">
<button type="button" role="switch" aria-checked="false" class="relative inline-flex shrink-0 cursor-pointer appearance-none rounded-full border-2 border-transparent transition focus:outline-none focus:ring focus:ring-blue-200 bg-slate-200 text-slate-600 h-5 w-8">
<span aria-hidden="true" class="pointer-events-none flex items-center justify-center rounded-full bg-white transition will-change-transform translate-x-0 h-4 w-4">
</span>
</button>
<span class="text-sm font-medium text-slate-700">Delete my account</span>
</div>
<div class="flex items-center space-x-2">
<button type="button" role="switch" aria-checked="false" class="relative inline-flex shrink-0 cursor-pointer appearance-none rounded-full border-2 border-transparent transition focus:outline-none focus:ring focus:ring-blue-200 bg-blue-600 text-blue-600 h-5 w-8">
<span aria-hidden="true" class="pointer-events-none flex items-center justify-center rounded-full bg-white transition will-change-transform translate-x-3 h-4 w-4">
</span>
</button>
<span class="text-sm font-medium text-slate-700">Delete my account</span>
</div>
Delete my account
Delete my account
Sizes
PreviewCode
<button type="button" role="switch" aria-checked="false" class="relative inline-flex shrink-0 cursor-pointer appearance-none rounded-full border-2 border-transparent transition focus:outline-none focus:ring focus:ring-blue-200 bg-slate-200 text-slate-600 h-3 w-5">
<span aria-hidden="true" class="pointer-events-none flex items-center justify-center rounded-full bg-white transition will-change-transform translate-x-0 h-2 w-2">
</span>
</button>
<button type="button" role="switch" aria-checked="false" class="relative inline-flex shrink-0 cursor-pointer appearance-none rounded-full border-2 border-transparent transition focus:outline-none focus:ring focus:ring-blue-200 bg-slate-200 text-slate-600 h-5 w-8">
<span aria-hidden="true" class="pointer-events-none flex items-center justify-center rounded-full bg-white transition will-change-transform translate-x-0 h-4 w-4">
</span>
</button>
<button type="button" role="switch" aria-checked="false" class="relative inline-flex shrink-0 cursor-pointer appearance-none rounded-full border-2 border-transparent transition focus:outline-none focus:ring focus:ring-blue-200 bg-slate-200 text-slate-600 h-7 w-12">
<span aria-hidden="true" class="pointer-events-none flex items-center justify-center rounded-full bg-white transition will-change-transform translate-x-0 h-6 w-6">
</span>
</button>
<button type="button" role="switch" aria-checked="false" class="relative inline-flex shrink-0 cursor-pointer appearance-none rounded-full border-2 border-transparent transition focus:outline-none focus:ring focus:ring-blue-200 bg-blue-600 text-blue-600 h-3 w-5">
<span aria-hidden="true" class="pointer-events-none flex items-center justify-center rounded-full bg-white transition will-change-transform translate-x-2 h-2 w-2">
</span>
</button>
<button type="button" role="switch" aria-checked="false" class="relative inline-flex shrink-0 cursor-pointer appearance-none rounded-full border-2 border-transparent transition focus:outline-none focus:ring focus:ring-blue-200 bg-blue-600 text-blue-600 h-5 w-8">
<span aria-hidden="true" class="pointer-events-none flex items-center justify-center rounded-full bg-white transition will-change-transform translate-x-3 h-4 w-4">
</span>
</button>
<button type="button" role="switch" aria-checked="false" class="relative inline-flex shrink-0 cursor-pointer appearance-none rounded-full border-2 border-transparent transition focus:outline-none focus:ring focus:ring-blue-200 bg-blue-600 text-blue-600 h-7 w-12">
<span aria-hidden="true" class="pointer-events-none flex items-center justify-center rounded-full bg-white transition will-change-transform translate-x-5 h-6 w-6">
</span>
</button>
Colors
PreviewCode
<button type="button" role="switch" aria-checked="false" class="relative inline-flex shrink-0 cursor-pointer appearance-none rounded-full border-2 border-transparent transition focus:outline-none focus:ring focus:ring-blue-200 bg-blue-600 text-blue-600 h-5 w-8">
<span aria-hidden="true" class="pointer-events-none flex items-center justify-center rounded-full bg-white transition will-change-transform translate-x-3 h-4 w-4">
</span>
</button>
<button type="button" role="switch" aria-checked="false" class="relative inline-flex shrink-0 cursor-pointer appearance-none rounded-full border-2 border-transparent transition focus:outline-none focus:ring focus:ring-blue-200 bg-red-600 text-red-600 h-5 w-8">
<span aria-hidden="true" class="pointer-events-none flex items-center justify-center rounded-full bg-white transition will-change-transform translate-x-3 h-4 w-4">
</span>
</button>
<button type="button" role="switch" aria-checked="false" class="relative inline-flex shrink-0 cursor-pointer appearance-none rounded-full border-2 border-transparent transition focus:outline-none focus:ring focus:ring-blue-200 bg-emerald-600 text-emerald-600 h-5 w-8">
<span aria-hidden="true" class="pointer-events-none flex items-center justify-center rounded-full bg-white transition will-change-transform translate-x-3 h-4 w-4">
</span>
</button>
<button type="button" role="switch" aria-checked="false" class="relative inline-flex shrink-0 cursor-pointer appearance-none rounded-full border-2 border-transparent transition focus:outline-none focus:ring focus:ring-blue-200 bg-slate-950 text-slate-950 h-5 w-8">
<span aria-hidden="true" class="pointer-events-none flex items-center justify-center rounded-full bg-white transition will-change-transform translate-x-3 h-4 w-4">
</span>
</button>