inputtoggle-switchintermediate

Toggle Switch

A custom toggle switch using a hidden checkbox and Tailwind's peer modifier.

Preview
<label class="relative inline-flex items-center cursor-pointer">
  <input type="checkbox" class="sr-only peer" />
  <div class="w-11 h-6 bg-gray-300 rounded-full peer-checked:bg-blue-600 transition-colors after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:shadow-sm after:transition-all peer-checked:after:translate-x-full"></div>
  <span class="ml-3 text-sm font-medium text-gray-700">Enable notifications</span>
</label>

Color Breakdown

Track Off

bg-gray-300

#d1d5db

Track On

peer-checked:bg-blue-600

#2563eb

Thumb

after:bg-white

#ffffff

Label

text-gray-700

#374151

Dark Mode Variant

Add these Tailwind classes for a dark mode adaptation of this recipe.

dark:bg-gray-600 dark:peer-checked:bg-blue-500 dark:text-gray-300

Use Cases

Settings togglesFeature flagsDark mode switches

Browser Support

All modern browsers.

Related Recipes

Toggle Button

button - intermediate

Newsletter Section

section - beginner

Floating Label Input

input - intermediate

Gradient Form

form - intermediate

Dark Form

form - beginner

Pill Search Bar

input - beginner

Build Your Own Color Recipe

Use our Tailwind CSS tools to experiment with colors, gradients, and component styles.

Explore Tools

Frequently Asked Questions

Can I make the toggle bigger?▼
Increase the track dimensions (w-14 h-7) and thumb dimensions (after:h-6 after:w-6) proportionally.