Components

Tailwind CSS Toggle Switch Components - Madhuranjan UI

Discover a curated collection of toggle switch components built with Tailwind CSS. Each toggle offers intuitive on/off functionality with modern design aesthetics, responsive behavior, and accessibility in mind.

This collection of toggle components provides a variety of options from simple default toggles to variants enhanced with icons, tooltips, and color accents. Whether you need a compact toggle for settings or an advanced switch with titles and descriptions, these examples are designed to deliver a seamless user experience.

Default Toggle

A basic toggle switch offering simple on/off functionality with clean styling.

1 <div class="flex items-center justify-center p-5">
2      <label class="relative inline-flex cursor-pointer items-center">
3        <input type="checkbox" class="peer sr-only" />
4        <div class="h-6 w-11 rounded-full bg-gray-200 transition-colors duration-300 peer-checked:bg-violet-500 dark:bg-gray-700 dark:peer-checked:bg-blue-500"></div>
5        <div class="absolute top-0.5 left-0.5 h-5 w-5 rounded-full bg-white shadow transition-transform duration-300 peer-checked:translate-x-full"></div>
6      </label>
7</div>

Checked Switch Toggle

A toggle switch that is pre-checked by default and integrated with React for dynamic state handling.

1<div class="flex items-center justify-center p-5">
2  <label class="relative inline-flex cursor-pointer items-center">
3    <input type="checkbox" class="peer sr-only" checked />
4    <div class="h-6 w-11 rounded-full bg-gray-200 transition-colors duration-300 peer-checked:bg-violet-500 dark:bg-gray-700 dark:peer-checked:bg-blue-500"></div>
5    <div class="absolute top-0.5 left-0.5 h-5 w-5 rounded-full bg-white shadow transition-transform duration-300 peer-checked:translate-x-full"></div>
6    <span class="ml-3 text-sm font-medium text-gray-700 select-none dark:text-gray-300"> Toggle Switch </span>
7  </label>
8</div>
9

Size Toggle

A versatile toggle switch available in multiple sizes to fit different design requirements.

1<div class="flex flex-wrap items-center justify-center gap-5 p-5">
2  <!-- {/* XS Toggle */} -->
3
4  <label class="relative inline-flex cursor-pointer items-center">
5    <input type="checkbox" class="peer sr-only" />
6    <div class="h-3 w-6 rounded-full bg-gray-200 transition-colors duration-300 peer-checked:bg-violet-500 dark:bg-gray-700 dark:peer-checked:bg-blue-500"></div>
7    <div class="absolute top-1/2 left-[2px] h-2 w-2 -translate-y-1/2 rounded-full bg-white shadow transition-transform duration-300 peer-checked:translate-x-3"></div>
8    <span class="ml-2 text-xs font-medium text-gray-700 select-none dark:text-gray-300"> XS Toggle </span>
9  </label>
10

Toggle with Icon

A toggle switch that incorporates an icon to enhance its visual appeal and user interactivity.

1<div class="flex items-center justify-center p-5">
2  <label class="relative inline-flex cursor-pointer items-center">
3    <input type="checkbox" class="sr-only peer" />
4    
5    <div class="h-6 w-11 rounded-full bg-gray-200 peer-checked:bg-violet-500 dark:bg-gray-700 dark:peer-checked:bg-blue-500 transition-colors duration-300"></div>
6
7    <div class="absolute left-[2px] top-1/2 -translate-y-1/2 flex items-center justify-center h-5 w-5 rounded-full bg-white shadow transition-transform duration-300 peer-checked:translate-x-full">
8      <svg class="block peer-checked:hidden w-3 h-3 text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
9        <path fillRule="evenodd" d="M10 2a8 8 0 1 0 0 16 8 8 0 0 0 0-16ZM8.707 7.293a1 1 0 0 0-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 0 0 1.414 1.414L10 11.414l1.293 1.293a1 1 0 0 0 1.414-1.414L11.414 10l1.293-1.293a1 1 0 0 0-1.414-1.414L10 8.586 8.707 7.293Z" clipRule="evenodd"/>
10      </svg>

Colored Toggle

A vibrant toggle switch variant that uses accent colors to indicate its active state.

1<div class="flex flex-wrap items-center justify-center gap-5 p-5">
2  <!-- Red -->
3  <label class="inline-flex cursor-pointer items-center">
4    <input type="checkbox" class="peer sr-only" />
5    <div class="relative h-6 w-11 rounded-full bg-gray-200 transition-colors peer-checked:bg-red-500 after:absolute after:top-[2px] after:left-[2px] after:h-5 after:w-5 after:rounded-full after:bg-white after:transition-transform peer-checked:after:translate-x-full dark:bg-gray-700 dark:peer-checked:bg-red-500"></div>
6    <span class="ml-3 text-sm text-gray-700 dark:text-gray-300">Red</span>
7  </label>
8
9  <!-- Green -->
10  <label class="inline-flex cursor-pointer items-center">

Toggle with Tooltip

A toggle switch enhanced with a tooltip to provide additional context or instructions.

1 <div class="flex items-center justify-center p-5">
2      <label class="relative inline-flex items-center cursor-pointer group">
3        <input type="checkbox" class="sr-only peer" />
4        <div class="relative h-6 w-11 rounded-full bg-gray-200 peer-checked:bg-violet-500 dark:bg-gray-700 dark:peer-checked:bg-blue-500 transition-colors after:absolute after:top-[2px] after:left-[2px] after:h-5 after:w-5 after:rounded-full after:bg-white after:transition-transform peer-checked:after:translate-x-full"></div>
5        <span class="ml-3 text-sm text-gray-700 dark:text-gray-300">
6          Allow push notification
7        </span>
8
9        <div class="absolute -top-8 left-1/2 -translate-x-1/2 whitespace-nowrap rounded-md bg-gray-800 px-2 py-1 text-xs text-white opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none">
10          Toggle notifications

Toggle with Title and Description

An advanced toggle switch that includes a title and detailed description for a more informative experience.

1<div class="flex items-center justify-center p-5">
2      <label class="inline-flex cursor-pointer items-start">
3        <input type="checkbox" class="sr-only peer" />
4        <div class="relative h-6 w-11 rounded-full bg-gray-200 dark:bg-gray-700 peer-checked:bg-violet-500 dark:peer-checked:bg-blue-500 transition-colors after:absolute after:left-[2px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:bg-white after:transition-transform after:duration-300 peer-checked:after:translate-x-full"></div>
5
6        <div class="ml-3 select-none">
7          <span class="block text-sm font-medium text-gray-900 dark:text-gray-200">
8            Remember Me
9          </span>
10          <span class="block text-xs text-gray-500 dark:text-gray-400">

Disabled Toggle

A toggle switch rendered in a disabled state to indicate non-interactivity.

1<div class="flex justify-center items-center gap-8 p-8">
2  
3  <!-- Disabled (Off) -->
4  <div>
5    <label class="inline-flex cursor-not-allowed items-center opacity-50">
6      <input type="checkbox" class="peer sr-only" disabled />
7      <div class="relative h-7 w-14 rounded-full bg-gray-200 transition-colors duration-200 after:absolute after:top-0.5 after:left-[4px] after:h-6 after:w-6 after:rounded-full after:bg-white after:shadow dark:bg-gray-700"></div>
8      <span class="ml-3 text-sm font-medium text-gray-400">Disabled (Off)</span>
9    </label>
10  </div>
Range SliderColor Picker