Tailwind CSS Toggle and Switch Components
Tailwind CSS Toggle & Switch Buttons are designed for TailGrids, a set of Toggle Buttons with Toggle, Switch, Reset, and Text Modes. Toggle Switch Tailwind CSS components are highly flexible plugins that allow the conversion of checkboxes into different toggles. The switch buttons and toggles designed by TailGrids are one of our most widely used Tailwind sections. You can choose from a wide range of Tailwind CSS components of toggles such as a set of toggle buttons, reset, text and switch. We offer a wide range of toggle button styles on our website that can be used and downloaded for free without any worries. In fact, there are a total of 9 styles you can choose from as per the aesthetics of your website and your own personal preference.
Toggle Button Style 4
FREE
FREE
Toggle Button Style 4<label for="toggleFour" class="flex cursor-pointer select-none items-center">
<div class="relative">
<input type="checkbox" id="toggleFour" class="sr-only" />
<div class="box bg-dark block h-8 w-14 rounded-full"></div>
<div
class="dot absolute left-1 top-1 flex h-6 w-6 items-center justify-center rounded-full bg-white transition"
></div>
</div>
</label>
Toggle Button Style 7
FREE
FREE
Toggle Button Style 7<label for="toggleSeven" class="flex cursor-pointer select-none items-center">
<div class="relative">
<input type="checkbox" id="toggleSeven" class="sr-only" />
<div
class="block h-8 w-14 rounded-full border border-[#BFCEFF] bg-[#EAEEFB]"
></div>
<div
class="dot bg-primary absolute left-1 top-1 h-6 w-6 rounded-full transition"
></div>
</div>
</label>
Toggle Button Style 11
FREE
FREE
Toggle Button Style 11<label for="themeSwitcherOne" class="themeSwitcherTwo shadow-card relative inline-flex cursor-pointer select-none items-center justify-center rounded-md bg-white p-1">
<input type="checkbox" name="themeSwitcherOne" id="themeSwitcherOne" class="sr-only">
<span class="light text-primary bg-gray flex items-center space-x-[6px] rounded py-2 px-[18px] text-sm font-medium">
<svg width="16" height="16" viewBox="0 0 16 16" class="mr-[6px] fill-current">
<g clip-path="url(#clip0_3122_652)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8 0C8.36819 0 8.66667 0.298477 8.66667 0.666667V2C8.66667 2.36819 8.36819 2.66667 8 2.66667C7.63181 2.66667 7.33333 2.36819 7.33333 2V0.666667C7.33333 0.298477 7.63181 0 8 0ZM8 5.33333C6.52724 5.33333 5.33333 6.52724 5.33333 8C5.33333 9.47276 6.52724 10.6667 8 10.6667C9.47276 10.6667 10.6667 9.47276 10.6667 8C10.6667 6.52724 9.47276 5.33333 8 5.33333ZM4 8C4 5.79086 5.79086 4 8 4C10.2091 4 12 5.79086 12 8C12 10.2091 10.2091 12 8 12C5.79086 12 4 10.2091 4 8ZM8.66667 14C8.66667 13.6318 8.36819 13.3333 8 13.3333C7.63181 13.3333 7.33333 13.6318 7.33333 14V15.3333C7.33333 15.7015 7.63181 16 8 16C8.36819 16 8.66667 15.7015 8.66667 15.3333V14ZM2.3411 2.3424C2.60145 2.08205 3.02356 2.08205 3.28391 2.3424L4.23057 3.28906C4.49092 3.54941 4.49092 3.97152 4.23057 4.23187C3.97022 4.49222 3.54811 4.49222 3.28776 4.23187L2.3411 3.28521C2.08075 3.02486 2.08075 2.60275 2.3411 2.3424ZM12.711 11.7682C12.4506 11.5078 12.0285 11.5078 11.7682 11.7682C11.5078 12.0285 11.5078 12.4506 11.7682 12.711L12.7148 13.6577C12.9752 13.918 13.3973 13.918 13.6577 13.6577C13.918 13.3973 13.918 12.9752 13.6577 12.7148L12.711 11.7682ZM0 8C0 7.63181 0.298477 7.33333 0.666667 7.33333H2C2.36819 7.33333 2.66667 7.63181 2.66667 8C2.66667 8.36819 2.36819 8.66667 2 8.66667H0.666667C0.298477 8.66667 0 8.36819 0 8ZM14 7.33333C13.6318 7.33333 13.3333 7.63181 13.3333 8C13.3333 8.36819 13.6318 8.66667 14 8.66667H15.3333C15.7015 8.66667 16 8.36819 16 8C16 7.63181 15.7015 7.33333 15.3333 7.33333H14ZM4.23057 11.7682C4.49092 12.0285 4.49092 12.4506 4.23057 12.711L3.28391 13.6577C3.02356 13.918 2.60145 13.918 2.3411 13.6577C2.08075 13.3973 2.08075 12.9752 2.3411 12.7148L3.28776 11.7682C3.54811 11.5078 3.97022 11.5078 4.23057 11.7682ZM13.6577 3.28521C13.918 3.02486 13.918 2.60275 13.6577 2.3424C13.3973 2.08205 12.9752 2.08205 12.7148 2.3424L11.7682 3.28906C11.5078 3.54941 11.5078 3.97152 11.7682 4.23187C12.0285 4.49222 12.4506 4.49222 12.711 4.23187L13.6577 3.28521Z"></path>
</g>
<defs>
<clipPath id="clip0_3122_652">
<rect width="16" height="16" fill="white"></rect>
</clipPath>
</defs>
</svg>
Light Mode
</span>
<span class="dark text-body-color flex items-center space-x-[6px] rounded py-2 px-[18px] text-sm font-medium">
<svg width="16" height="16" viewBox="0 0 16 16" class="mr-[6px] fill-current">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.0547 1.67334C8.18372 1.90227 8.16622 2.18562 8.01003 2.39693C7.44055 3.16737 7.16651 4.11662 7.23776 5.07203C7.30901 6.02744 7.72081 6.92554 8.39826 7.60299C9.07571 8.28044 9.97381 8.69224 10.9292 8.76349C11.8846 8.83473 12.8339 8.5607 13.6043 7.99122C13.8156 7.83502 14.099 7.81753 14.3279 7.94655C14.5568 8.07556 14.6886 8.32702 14.6644 8.58868C14.5479 9.84957 14.0747 11.0512 13.3002 12.053C12.5256 13.0547 11.4818 13.8152 10.2909 14.2454C9.09992 14.6756 7.81108 14.7577 6.57516 14.4821C5.33925 14.2065 4.20738 13.5846 3.312 12.6892C2.41661 11.7939 1.79475 10.662 1.51917 9.42608C1.24359 8.19017 1.32569 6.90133 1.75588 5.71038C2.18606 4.51942 2.94652 3.47561 3.94828 2.70109C4.95005 1.92656 6.15168 1.45335 7.41257 1.33682C7.67423 1.31264 7.92568 1.44442 8.0547 1.67334ZM6.21151 2.96004C5.6931 3.1476 5.20432 3.41535 4.76384 3.75591C3.96242 4.37553 3.35405 5.21058 3.00991 6.16334C2.66576 7.11611 2.60008 8.14718 2.82054 9.13591C3.04101 10.1246 3.5385 11.0301 4.25481 11.7464C4.97111 12.4627 5.87661 12.9602 6.86534 13.1807C7.85407 13.4012 8.88514 13.3355 9.8379 12.9913C10.7907 12.6472 11.6257 12.0388 12.2453 11.2374C12.5859 10.7969 12.8536 10.3081 13.0412 9.78974C12.3391 10.0437 11.586 10.1495 10.8301 10.0931C9.55619 9.99813 8.35872 9.44907 7.45545 8.5458C6.55218 7.64253 6.00312 6.44506 5.90812 5.17118C5.85174 4.4152 5.9575 3.66212 6.21151 2.96004Z"></path>
</svg>
Dark Mode
</span>
</label>
Toggle Button Style 12
FREE
FREE
Toggle Button Style 12<label for="themeSwitcherTwo" class="themeSwitcherTwo relative inline-flex cursor-pointer select-none items-center">
<input type="checkbox" name="themeSwitcherTwo" id="themeSwitcherTwo" class="sr-only">
<span class="label flex items-center text-sm font-medium text-black">
Light
</span>
<span class="slider mx-4 flex h-8 w-[60px] items-center rounded-full bg-[#CCCCCE] p-1 duration-200">
<span class="dot h-6 w-6 rounded-full bg-white duration-200"></span>
</span>
<span class="label flex items-center text-sm font-medium text-black">
Dark
</span>
</label>
Toggle Button Style 5
FREE
FREE
Toggle Button Style 5<label for="toggleFive" class="flex cursor-pointer select-none items-center">
<div class="relative">
<input id="toggleFive" type="checkbox" class="sr-only" />
<div class="h-5 w-14 rounded-full bg-[#E5E7EB] shadow-inner"></div>
<div
class="dot shadow-switch-1 absolute left-0 -top-1 flex h-7 w-7 items-center justify-center rounded-full bg-white transition"
>
<span class="active h-4 w-4 rounded-full bg-[#E5E7EB]"></span>
</div>
</div>
</label>
Toggle Button Style 9
FREE
FREE
Toggle Button Style 9<label for="toggleNine" class="flex cursor-pointer select-none items-center">
<div class="relative">
<input type="checkbox" id="toggleNine" class="sr-only" />
<div class="block h-8 w-14 rounded-full bg-[#EAEEFB]"></div>
<div
class="dot absolute left-1 top-1 flex h-6 w-6 items-center justify-center rounded-full bg-white transition"
>
<span class="bg-primary h-3 w-3 rounded-full"></span>
</div>
</div>
</label>
Toggle Button Style 1
FREE
FREE
Toggle Button Style 1<label for="toggleTwo" class="flex cursor-pointer select-none items-center">
<div class="relative">
<input type="checkbox" id="toggleTwo" class="sr-only" />
<div class="block h-8 w-14 rounded-full bg-[#E5E7EB]"></div>
<div
class="dot absolute left-1 top-1 h-6 w-6 rounded-full bg-white transition"
></div>
</div>
</label>
Toggle Button Style 2
FREE
FREE
Toggle Button Style 2<label for="toogleTwo" class="flex cursor-pointer select-none items-center">
<div class="relative">
<input id="toogleTwo" type="checkbox" class="sr-only" />
<div class="h-5 w-14 rounded-full bg-[#E5E7EB] shadow-inner"></div>
<div
class="dot shadow-switch-1 absolute left-0 -top-1 h-7 w-7 rounded-full bg-white transition"
></div>
</div>
</label>
Toggle Button Style 3
FREE
FREE
Toggle Button Style 3<label for="toggleThree" class="flex cursor-pointer select-none items-center">
<div class="relative">
<input type="checkbox" id="toggleThree" class="sr-only" />
<div class="block h-8 w-14 rounded-full bg-[#E5E7EB]"></div>
<div
class="dot absolute left-1 top-1 flex h-6 w-6 items-center justify-center rounded-full bg-white transition"
>
<span class="active hidden">
<svg
width="11"
height="8"
viewBox="0 0 11 8"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M10.0915 0.951972L10.0867 0.946075L10.0813 0.940568C9.90076 0.753564 9.61034 0.753146 9.42927 0.939309L4.16201 6.22962L1.58507 3.63469C1.40401 3.44841 1.11351 3.44879 0.932892 3.63584C0.755703 3.81933 0.755703 4.10875 0.932892 4.29224L0.932878 4.29225L0.934851 4.29424L3.58046 6.95832C3.73676 7.11955 3.94983 7.2 4.1473 7.2C4.36196 7.2 4.55963 7.11773 4.71406 6.9584L10.0468 1.60234C10.2436 1.4199 10.2421 1.1339 10.0915 0.951972ZM4.2327 6.30081L4.2317 6.2998C4.23206 6.30015 4.23237 6.30049 4.23269 6.30082L4.2327 6.30081Z"
fill="white"
stroke="white"
stroke-width="0.4"
></path>
</svg>
</span>
<span class="inactive text-body-color">
<svg
class="h-4 w-4 stroke-current"
fill="none"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M6 18L18 6M6 6l12 12"
></path>
</svg>
</span>
</div>
</div>
</label>
Toggle Button Style 6
FREE
FREE
Toggle Button Style 6<label for="toggleSix" class="flex cursor-pointer select-none items-center">
<div class="relative">
<input type="checkbox" id="toggleSix" class="sr-only" />
<div class="box bg-primary block h-8 w-14 rounded-full"></div>
<div
class="dot absolute left-1 top-1 flex h-6 w-6 items-center justify-center rounded-full bg-white transition"
></div>
</div>
</label>
Toggle Button Style 8
FREE
FREE
Toggle Button Style 8<label for="toggleEight" class="flex cursor-pointer select-none items-center">
<div class="relative">
<input id="toggleEight" type="checkbox" class="sr-only" />
<div
class="box bg-dark h-5 w-14 rounded-full shadow-inner transition"
></div>
<div
class="dot shadow-switch-1 absolute left-0 -top-1 flex h-7 w-7 items-center justify-center rounded-full bg-white transition"
>
<span
class="active border-dark h-4 w-4 rounded-full border bg-white"
></span>
</div>
</div>
</label>
Toggle Button Style 10
FREE
FREE
Toggle Button Style 10<label for="autoSaver" class="autoSaverSwitch relative inline-flex cursor-pointer select-none items-center">
<input type="checkbox" name="autoSaver" id="autoSaver" class="sr-only">
<span class="slider mr-3 flex h-[26px] w-[50px] items-center rounded-full bg-[#CCCCCE] p-1 duration-200">
<span class="dot h-[18px] w-[18px] rounded-full bg-white duration-200"></span>
</span>
<span class="label flex items-center text-sm font-medium text-black">
Auto Saver <span class="on hidden pl-1"> On </span>
<span class="off pl-1"> Off </span>
</span>
</label>
Toggle Button Style 13
FREE
FREE
Toggle Button Style 13<label for="themeSwitcherThree" class="themeSwitcherThree relative inline-flex cursor-pointer select-none items-center">
<input type="checkbox" name="themeSwitcherThree" id="themeSwitcherThree" class="sr-only">
<span class="mr-[18px] text-sm font-medium text-black">
Switch Version
</span>
<div class="shadow-card flex h-[46px] w-[82px] items-center justify-center rounded-md bg-white">
<span class="light bg-primary flex h-9 w-9 items-center justify-center rounded text-white">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_3128_692)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8 0C8.36819 0 8.66667 0.298477 8.66667 0.666667V2C8.66667 2.36819 8.36819 2.66667 8 2.66667C7.63181 2.66667 7.33333 2.36819 7.33333 2V0.666667C7.33333 0.298477 7.63181 0 8 0ZM8 5.33333C6.52724 5.33333 5.33333 6.52724 5.33333 8C5.33333 9.47276 6.52724 10.6667 8 10.6667C9.47276 10.6667 10.6667 9.47276 10.6667 8C10.6667 6.52724 9.47276 5.33333 8 5.33333ZM4 8C4 5.79086 5.79086 4 8 4C10.2091 4 12 5.79086 12 8C12 10.2091 10.2091 12 8 12C5.79086 12 4 10.2091 4 8ZM8.66667 14C8.66667 13.6318 8.36819 13.3333 8 13.3333C7.63181 13.3333 7.33333 13.6318 7.33333 14V15.3333C7.33333 15.7015 7.63181 16 8 16C8.36819 16 8.66667 15.7015 8.66667 15.3333V14ZM2.3411 2.3424C2.60145 2.08205 3.02356 2.08205 3.28391 2.3424L4.23057 3.28906C4.49092 3.54941 4.49092 3.97152 4.23057 4.23187C3.97022 4.49222 3.54811 4.49222 3.28776 4.23187L2.3411 3.28521C2.08075 3.02486 2.08075 2.60275 2.3411 2.3424ZM12.711 11.7682C12.4506 11.5078 12.0285 11.5078 11.7682 11.7682C11.5078 12.0285 11.5078 12.4506 11.7682 12.711L12.7148 13.6577C12.9752 13.918 13.3973 13.918 13.6577 13.6577C13.918 13.3973 13.918 12.9752 13.6577 12.7148L12.711 11.7682ZM0 8C0 7.63181 0.298477 7.33333 0.666667 7.33333H2C2.36819 7.33333 2.66667 7.63181 2.66667 8C2.66667 8.36819 2.36819 8.66667 2 8.66667H0.666667C0.298477 8.66667 0 8.36819 0 8ZM14 7.33333C13.6318 7.33333 13.3333 7.63181 13.3333 8C13.3333 8.36819 13.6318 8.66667 14 8.66667H15.3333C15.7015 8.66667 16 8.36819 16 8C16 7.63181 15.7015 7.33333 15.3333 7.33333H14ZM4.23057 11.7682C4.49092 12.0285 4.49092 12.4506 4.23057 12.711L3.28391 13.6577C3.02356 13.918 2.60145 13.918 2.3411 13.6577C2.08075 13.3973 2.08075 12.9752 2.3411 12.7148L3.28776 11.7682C3.54811 11.5078 3.97022 11.5078 4.23057 11.7682ZM13.6577 3.28521C13.918 3.02486 13.918 2.60275 13.6577 2.3424C13.3973 2.08205 12.9752 2.08205 12.7148 2.3424L11.7682 3.28906C11.5078 3.54941 11.5078 3.97152 11.7682 4.23187C12.0285 4.49222 12.4506 4.49222 12.711 4.23187L13.6577 3.28521Z" fill="currentColor"></path>
</g>
<defs>
<clipPath id="clip0_3128_692">
<rect width="16" height="16" fill="white"></rect>
</clipPath>
</defs>
</svg>
</span>
<span class="dark text-body-color flex h-9 w-9 items-center justify-center rounded">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.0547 1.67334C8.18372 1.90227 8.16622 2.18562 8.01003 2.39693C7.44055 3.16737 7.16651 4.11662 7.23776 5.07203C7.30901 6.02744 7.72081 6.92554 8.39826 7.60299C9.07571 8.28044 9.97381 8.69224 10.9292 8.76349C11.8846 8.83473 12.8339 8.5607 13.6043 7.99122C13.8156 7.83502 14.099 7.81753 14.3279 7.94655C14.5568 8.07556 14.6886 8.32702 14.6644 8.58868C14.5479 9.84957 14.0747 11.0512 13.3002 12.053C12.5256 13.0547 11.4818 13.8152 10.2909 14.2454C9.09992 14.6756 7.81108 14.7577 6.57516 14.4821C5.33925 14.2065 4.20738 13.5846 3.312 12.6892C2.41661 11.7939 1.79475 10.662 1.51917 9.42608C1.24359 8.19017 1.32569 6.90133 1.75588 5.71038C2.18606 4.51942 2.94652 3.47561 3.94828 2.70109C4.95005 1.92656 6.15168 1.45335 7.41257 1.33682C7.67423 1.31264 7.92568 1.44442 8.0547 1.67334ZM6.21151 2.96004C5.6931 3.1476 5.20432 3.41535 4.76384 3.75591C3.96242 4.37553 3.35405 5.21058 3.00991 6.16334C2.66576 7.11611 2.60008 8.14718 2.82054 9.13591C3.04101 10.1246 3.5385 11.0301 4.25481 11.7464C4.97111 12.4627 5.87661 12.9602 6.86534 13.1807C7.85407 13.4012 8.88514 13.3355 9.8379 12.9913C10.7907 12.6472 11.6257 12.0388 12.2453 11.2374C12.5859 10.7969 12.8536 10.3081 13.0412 9.78974C12.3391 10.0437 11.586 10.1495 10.8301 10.0931C9.55619 9.99813 8.35872 9.44907 7.45545 8.5458C6.55218 7.64253 6.00312 6.44506 5.90812 5.17118C5.85174 4.4152 5.9575 3.66212 6.21151 2.96004Z" fill="currentColor"></path>
</svg>
</span>
</div>
</label>