Toggle Switch
An accessible, animated toggle switch for React and Tailwind CSS, perfect for settings panels and forms. Fully keyboard-navigable with smooth on/off transitions.
Copy the code
export function ToggleSwitch() {
const [on, setOn] = React.useState(true)
return (
<button onClick={() => setOn(!on)}
className={`relative h-8 w-13 rounded-full transition ${on ? 'bg-violet-600' : 'bg-white/15'}`}>
<span className={`absolute top-1 h-6 w-6 rounded-full bg-white transition-all
${on ? 'left-6' : 'left-1'}`} />
</button>
)
}Tailwind CSS · no dependencies · MIT licensed. Paste it straight into any React, Next.js or Vite project.
About the toggle switch
This toggle switch is part of Empire UI — a free, open-source library of 26+ component types rendered across 40 visual styles, from glassmorphism to neo-brutalism. Every block is copy-paste ready in React and Tailwind CSS with no runtime dependencies.
Want it in a different look? Browse all 40 styles or grab the matching glassmorphism components.