Toggle switches have become the default for settings panels, dark mode switchers, and feature controls across modern web applications.
Building them from scratch takes time. Styling them consistently across browsers takes even more.
Tailwind toggle examples solve both problems by using utility classes to create accessible, animated switch components without writing custom CSS toggle switch code.
This guide covers everything from basic on/off switches to advanced implementations with Alpine.js and React.
You’ll find copy-ready code for colored variants, size options, icon toggles, and disabled states. Each example includes the specific Tailwind classes needed and accessibility considerations for responsive design across devices.
What is a Tailwind Toggle
A Tailwind toggle is a switch component built with Tailwind CSS utility classes that lets users flip between two states: on and off.
It functions as a styled checkbox input with a sliding thumb element that moves across a track.
Toggle switches appear in settings panels, dark mode switchers, notification preferences, and feature flags throughout modern web applications.
Unlike standard CSS checkboxes, toggles provide immediate visual feedback that matches what users expect on mobile devices.
Tailwind toggle examples
Tailwind CSS Toggle – Flowbite
Tailwind CSS Pricing Table with JS Toggle By JohnJohnCodes
Tailwind CSS Toggle – Sailboat UI
Tailwind CSS Basic Toggle Component
Lo-fi Tailwind CSS Toggles By Rob Stinson
Tailwind CSS Toggle and Switch Components
Tailwind CSS Toggle Switch
Tailwind CSS Switch Toggle By Arifudinmyf
TailwindCSS Toggle Button by Lukas Hermann
Toggle switch without JS By dirkolbrich
Tailwind CSS Switch – Preline
Tailwind CSS Switch – React
Toggle Components – Mamba UI
Toggle Checkbox Radio
Toggle Switch in React JS with Tailwind CSS Example
Tailwind CSS: Toggle Switches without Javascript
Tailwind Toggle
How Does a Tailwind Toggle Work
The toggle relies on the checkbox hack, a technique where a hidden checkbox input controls the visual state of the switch.
When a user clicks the toggle, the checkbox receives the checked attribute.
CSS then transforms the appearance using the peer-checked utility class.
The thumb element slides from left to right using translate-x, while the track changes its background color.
No JavaScript required for basic functionality. The browser handles state management through native form behavior.
What Are the Core CSS Classes for Tailwind Toggles
Building a toggle switch requires specific Tailwind utility classes working together.
Input element classes:
peer– enables sibling selection for state changesappearance-none– removes default checkbox stylingcursor-pointer– indicates clickable elementrounded-full– creates pill-shaped track
Thumb element classes:
peer-checked:translate-x-6– moves thumb when activetransition-transform– animates the sliding motionduration-300– sets animation timing
State classes:
checked:bg-blue-600– active track colorfocus:ring-2– keyboard focus indicatordisabled:opacity-50– inactive appearance
Tailwind Toggle Examples
Basic Toggle Switch
The simplest toggle uses a hidden checkbox paired with a styled label element.
“ <div class="relative inline-block w-11 h-6"> <input type="checkbox" id="toggle-basic" class="peer appearance-none w-11 h-6 bg-gray-300 rounded-full checked:bg-blue-600 cursor-pointer transition-colors duration-300" /> <label for="toggle-basic" class="absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full shadow transition-transform duration-300 peer-checked:translate-x-5 cursor-pointer"> </label> </div> `
The peer class on the input lets the label respond to checked state changes.
Toggle with Label
Adding text labels improves usability and clarifies what the toggle controls.
` <label class="inline-flex items-center cursor-pointer gap-3"> <span class="text-sm text-gray-700">Notifications</span> <div class="relative"> <input type="checkbox" class="sr-only peer" /> <div class="w-11 h-6 bg-gray-200 rounded-full peer-checked:bg-blue-600 transition-colors"></div> <div class="absolute left-0.5 top-0.5 w-5 h-5 bg-white rounded-full transition-transform peer-checked:translate-x-5"> </div> </div> </label> `
The sr-only class hides the input visually while keeping it accessible to screen readers.
Colored Toggle Variants
Swap checked:bg-blue-600 with other color classes to match your design system.
- Green: checked:bg-green-500
- success states, active features
- Red: checked:bg-red-500
- danger settings, destructive options
- Purple: checked:bg-purple-600
- premium features
- Amber: checked:bg-amber-500
- warning indicators
Focus ring colors should match: focus:ring-green-300 pairs with green toggles.
Toggle Size Variations
Small Toggle
Track: w-9 h-5. Thumb: w-4 h-4. Translation: peer-checked:translate-x-4.
Works well in dense user interface layouts and compact settings panels.
Default Toggle
Track: w-11 h-6. Thumb: w-5 h-5. Translation: peer-checked:translate-x-5.
Standard size for most applications and Tailwind forms.
Large Toggle
Track: w-14 h-7. Thumb: w-6 h-6. Translation: peer-checked:translate-x-7.
Better touch targets for mobile and web accessibility compliance.
Toggle with Icons
Add SVG icons inside the thumb for visual state indicators.
` <div class="relative w-11 h-6"> <input type="checkbox" id="icon-toggle" class="sr-only peer" /> <div class="w-full h-full bg-gray-200 rounded-full peer-checked:bg-green-500 transition-colors"></div> <div class="absolute left-0.5 top-0.5 w-5 h-5 bg-white rounded-full flex items-center justify-center transition-transform peer-checked:translate-x-5"> <svg class="w-3 h-3 text-gray-400 peer-checked:hidden"> <!-- X icon --> </svg> <svg class="w-3 h-3 text-green-500 hidden peer-checked:block"> <!-- Check icon --> </svg> </div> </div> `
Common pairings: checkmark/X, sun/moon for theme switchers, lock/unlock for security settings.
Disabled Toggle State
Apply the disabled attribute plus visual styling to prevent interaction.
` <input type="checkbox" disabled class="peer appearance-none w-11 h-6 bg-gray-200 rounded-full cursor-not-allowed opacity-50" /> `
Key classes: opacity-50, cursor-not-allowed, pointer-events-none on the wrapper.
Toggle with Status Text
Display dynamic ON/OFF text that updates with the toggle state.
` <label class="inline-flex items-center cursor-pointer"> <input type="checkbox" class="sr-only peer" /> <span class="mr-3 text-sm peer-checked:hidden">OFF</span> <span class="mr-3 text-sm hidden peer-checked:inline">ON</span> <div class="relative w-11 h-6 bg-gray-200 rounded-full peer-checked:bg-blue-600"> <div class="absolute left-0.5 top-0.5 w-5 h-5 bg-white rounded-full transition-transform peer-checked:translate-x-5"> </div> </div> </label> `
The peer-checked:hidden and peer-checked:inline classes handle text visibility.
How to Create an Accessible Tailwind Toggle
Accessible toggles require proper HTML structure and ARIA attributes.
Required elements:
- Associate labels with inputs using for
andidattributes
- Add role=”switch”
for screen reader context
- Include aria-checked
that matches the actual state
- Maintain visible focus states with focus:ring-2
Keyboard navigation:
Native checkbox inputs already support Space key toggling. Tab moves focus between interactive elements.
Color contrast:
Ensure sufficient color contrast between track, thumb, and background. The active state should be clearly distinguishable from inactive.
` <label for="accessible-toggle" class="cursor-pointer"> <span class="sr-only">Enable dark mode</span> <input type="checkbox" id="accessible-toggle" role="switch" aria-checked="false" class="sr-only peer" /> <div class="w-11 h-6 bg-gray-200 rounded-full peer-focus:ring-2 peer-focus:ring-blue-300 peer-checked:bg-blue-600 transition-colors"> <div class="w-5 h-5 bg-white rounded-full transform transition-transform peer-checked:translate-x-5"> </div> </div> </label> `
Test with keyboard-only navigation and screen readers like NVDA or VoiceOver.
What Is the Difference Between a Toggle and a Checkbox in Tailwind
Both components handle boolean input, but they serve different contexts and user expectations.
Visual presentation:
- Toggles use a sliding thumb on a track, checkboxes use a square with a checkmark
- Toggles indicate immediate action, checkboxes suggest form submission required
- Toggles take more horizontal space, checkboxes remain compact
Use case differences:
- Toggles: settings that apply instantly (dark mode, notifications, WiFi)
- Checkboxes: selections within accessible forms that submit later
Mobile users expect toggles for on/off settings. Desktop forms work better with checkboxes for multi-select options.
The underlying frontend code remains identical: both use input type=”checkbox” with different styling applied through Tailwind classes.
How to Add Animation to a Tailwind Toggle
Smooth micro-interactions make toggles feel responsive and polished.
Transition classes:
- transition-transform
- animates thumb movement
- transition-colors
- animates track color change
- transition-all
- animates everything (use sparingly)
Duration options:
- duration-150
- snappy, 150ms
- duration-200
- balanced feel
- duration-300
- smooth, noticeable
Timing functions:
- ease-in-out
- natural movement, default choice
- ease-out
- quick start, gentle stop
` <div class="w-5 h-5 bg-white rounded-full transition-transform duration-200 ease-in-out peer-checked:translate-x-5"> </div> `
Combine with CSS animation utilities for bounce or spring effects using CSS keyframes.
Tailwind Toggle Implementation Methods
Pure CSS Toggle (No JavaScript)
Uses the peer selector and native checkbox behavior for zero-dependency toggles.
` <input type="checkbox" class="sr-only peer" id="css-toggle" /> <label for="css-toggle" class="relative w-11 h-6 bg-gray-200 rounded-full cursor-pointer peer-checked:bg-blue-600 after:content-[''] after:absolute after:top-0.5 after:left-0.5 after:w-5 after:h-5 after:bg-white after:rounded-full after:transition-transform peer-checked:after:translate-x-5"> </label> `
Best for static sites and projects avoiding JavaScript frameworks.
Toggle with Alpine.js
Alpine.js adds reactive state management with minimal overhead, perfect for multi-toggle coordination.
` <div x-data="{ enabled: false }"> <button type="button" @click="enabled = !enabled" :class="enabled ? 'bg-blue-600' : 'bg-gray-200'" class="relative w-11 h-6 rounded-full transition-colors"> <span :class="enabled ? 'translate-x-5' : 'translate-x-0'" class="absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full transition-transform"> </span> </button> </div> `
The x-data directive initializes component state. Click handlers toggle the boolean value.
Toggle with React State
React’s useState hook manages toggle state for component-based applications.
` import { useState } from 'react';
function Toggle() { const [enabled, setEnabled] = useState(false);
return ( <button onClick={() => setEnabled(!enabled)} className={relative w-11 h-6 rounded-full transition-colors ${enabled ? ‘bg-blue-600’ : ‘bg-gray-200’}}> <span className={absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full transition-transform ${enabled ? ‘translate-x-5’ : ‘translate-x-0’}} /> </button> ); } `
Integrates with Tailwind CSS in React projects using conditional className strings or libraries like clsx.
Common Tailwind Toggle Use Cases
Settings and preferences:
- Dark mode/light mode theme switcher
- Email notification preferences
- Privacy settings (location tracking, cookies)
- Auto-save or sync options
Feature controls:
- Feature flags in Tailwind dashboard admin panels
- Beta feature opt-in toggles
- Developer mode switches
Form interactions:
- Remember me on login screens
- Newsletter subscription opt-in
- Terms acceptance (though checkboxes often work better here)
E-commerce:
- Wishlist add/remove
- Compare products selection
- Stock alert notifications
Toggles work best when the action applies immediately without a save button.
Browser Support for Tailwind Toggle Components
The peer selector relies on the CSS general sibling combinator (~), supported in all modern browsers.
Full support:
- Chrome 88+
- Firefox 78+
- Safari 14+
- Edge 88+
Considerations:
- IE11 lacks peer
support entirely, requires JavaScript fallback
- appearance-none
works across all modern browsers
- focus-visible
needs Safari 15.4+ for full support
Test cross-browser compatibility with actual devices, not just browser emulators.
Mobile browsers:
iOS Safari and Chrome for Android handle touch events on toggle components without issues.
Larger touch targets (44x44px minimum) improve mobile-first design compliance and tap accuracy.
Fallback strategy:
For legacy browser support, include a basic styled checkbox that degrades gracefully when peer selectors fail to apply.
The Tailwind vs Bootstrap comparison shows similar browser support matrices, though Bootstrap’s toggle switch implementation uses different class structures.
FAQ on Tailwind Toggle Examples
How do I create a basic toggle switch in Tailwind CSS?
Use a hidden checkbox input with the peer class paired with a styled label element. Apply peer-checked:translate-x to move the thumb and peer-checked:bg-blue-600 to change the track color when active.
Can I build a Tailwind toggle without JavaScript?
Yes. The checkbox hack technique uses native HTML form behavior combined with Tailwind’s peer selector. The browser handles state management automatically, making JavaScript unnecessary for basic toggle functionality.
What Tailwind classes animate the toggle switch movement?
Apply transition-transform and duration-300 to the thumb element. Add transition-colors to the track for smooth background changes. The ease-in-out timing function creates natural movement between states.
How do I make a Tailwind toggle accessible for screen readers?
Add role=”switch” and aria-checked attributes to the input. Use sr-only to hide the checkbox visually while keeping it in the accessibility tree. Include visible focus:ring states for keyboard navigation.
What sizes work best for Tailwind toggle switches?
Standard size uses w-11 h-6 for the track. Small toggles work at w-9 h-5 for compact layouts. Large toggles at w-14 h-7 provide better touch targets on mobile devices.
How do I add icons inside a Tailwind toggle thumb?
Place accessible SVG files inside the thumb div element. Use peer-checked:hidden and peer-checked:block classes to swap between icons based on the toggle state. Common pairs include checkmark/X and sun/moon.
Can I use Tailwind toggles with React components?
Yes. Use React’s useState hook to manage the boolean state. Apply conditional className strings with template literals or the clsx library. Headless UI also provides an unstyled Switch component designed for Tailwind projects.
How do I disable a Tailwind toggle switch?
Add the disabled attribute to the input element. Apply opacity-50 and cursor-not-allowed classes for visual feedback. Include pointer-events-none on the wrapper to prevent any click interactions entirely.
What colors work best for toggle switch states?
Use bg-gray-200 or bg-slate-300 for inactive states. Active states typically use bg-blue-600, bg-green-500 for success, or bg-red-500 for danger settings. Match focus ring colors to your chosen active color.
How do Tailwind toggles compare to Bootstrap toggle switches?
Tailwind toggles use utility classes for complete customization without predefined styles. Bootstrap provides ready-made components with less flexibility. Tailwind requires more initial code but offers precise control over every user experience detail.
Conclusion
These Tailwind toggle examples give you production-ready code for every common use case, from basic slide switches to complex state management with React and Alpine.js.
The checkbox hack approach works without dependencies. Framework integrations scale for larger applications.
Pick the implementation that fits your project. Pure CSS toggles suit static sites and landing pages. Component-based toggles work better in Vue.js, Next.js, or any reactive component library.
Focus on accessibility from the start. Add proper ARIA roles, maintain keyboard support, and test with screen readers.
The utility class approach means you control every pixel of the visual hierarchy: track colors, thumb sizes, animation timing, and focus states. No fighting framework defaults.
Copy the code, adjust the colors, ship it.
