Build an accessible animated toggle switch in React and Tailwind without a library

A switch is a button that says on or off. Done right it has role="switch" and aria-checked, a visible focus ring, a thumb that slides with a small overshoot, and no animation for people who asked for less motion. This page has a client version that works controlled or uncontrolled and a no-JS version built on a real checkbox that posts with a form.

One payment$3

By buying you agree to the Terms.

One payment, no subscription
Download right after paying
Use it in client projects
Won't run on the listed stack? We fix it or refund you

Ready forCursorv0Lovableshadcn CLI

Full product pageReact · Tailwind · TypeScript

Step 1: a button with role="switch"

components/switch.tsx

"use client";

import { useId, useState } from "react";

type Props = {
  label: string;
  description?: string;
  checked?: boolean; // controlled
  defaultChecked?: boolean; // uncontrolled
  onCheckedChange?: (checked: boolean) => void;
  name?: string; // posts "on" with the form when checked, like a checkbox
  disabled?: boolean;
};

export function Switch({ label, description, checked, defaultChecked = false, onCheckedChange, name, disabled }: Props) {
  const id = useId();
  const [inner, setInner] = useState(defaultChecked);
  const on = checked ?? inner;

  function toggle() {
    if (checked === undefined) setInner(!on);
    onCheckedChange?.(!on);
  }

  return (
    <div className="flex items-center justify-between gap-4">
      <div>
        <span id={`${id}-label`} className="text-sm font-medium">
          {label}
        </span>
        {description ? (
          <p id={`${id}-desc`} className="text-sm text-zinc-500">
            {description}
          </p>
        ) : null}
      </div>
      <button
        type="button"
        role="switch"
        aria-checked={on}
        aria-labelledby={`${id}-label`}
        aria-describedby={description ? `${id}-desc` : undefined}
        disabled={disabled}
        onClick={toggle}
        className="group relative inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full bg-zinc-300 transition-colors duration-200 aria-checked:bg-emerald-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-emerald-600 disabled:cursor-not-allowed disabled:opacity-50 motion-reduce:transition-none dark:bg-zinc-700"
      >
        <span
          aria-hidden="true"
          className="absolute left-0.5 size-5 rounded-full bg-white shadow transition-[translate,width] duration-200 ease-[cubic-bezier(.3,1.4,.5,1)] group-active:w-6 group-aria-checked:translate-x-5 group-aria-checked:group-active:translate-x-4 motion-reduce:transition-none"
        />
      </button>
      {name && on ? <input type="hidden" name={name} value="on" /> : null}
    </div>
  );
}

Good to know

role="switch" with aria-checked tells screen readers it's an on/off control, and they read "on" or "off" instead of "checked". The visible text is its name through aria-labelledby.
The thumb moves with Tailwind's group-aria-checked variant, so the look comes straight from the ARIA state. There's no second piece of state that can drift from it.
group-active widens the thumb while it's pressed, the small squish you see on iOS switches. The cubic-bezier with a value over 1 gives the slide a little overshoot.
motion-reduce:transition-none turns both animations off for people who set reduced motion. The switch still changes colour, so the state stays clear.
It works controlled (checked + onCheckedChange) or uncontrolled (defaultChecked). With a name, it adds a hidden input that sends "on" with the form, like a checkbox.
What we ran on October 27, 2026: every file on this page type-checks with TypeScript 5.9.3 against react 19.1.1 and next 15.5.28 in strict mode, and a Switch with no label fails that check. We didn't render the switches in a browser for this page.

Step 2: a switch that works before JavaScript loads

For a settings form you often don't need client state at all. A checkbox with appearance-none and role="switch" can be styled as the track, and its ::before as the thumb, so the whole switch is CSS and renders from a Server Component.
It posts with the form like any checkbox: checked sends "on", unchecked sends nothing. The server action below reads it that way.

components/css-switch.tsx (no "use client")

// No "use client": a real checkbox styled as a switch. Works before
// hydration, posts with the form, and screen readers announce it as a switch.
export function CssSwitch({ name, label, defaultChecked }: { name: string; label: string; defaultChecked?: boolean }) {
  return (
    <label className="flex cursor-pointer items-center justify-between gap-4 text-sm font-medium">
      {label}
      <input
        type="checkbox"
        role="switch"
        name={name}
        defaultChecked={defaultChecked}
        className="relative h-6 w-11 shrink-0 cursor-pointer appearance-none rounded-full bg-zinc-300 transition-colors duration-200 checked:bg-emerald-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-emerald-600 motion-reduce:transition-none before:absolute before:top-0.5 before:left-0.5 before:size-5 before:rounded-full before:bg-white before:shadow before:transition-transform before:duration-200 checked:before:translate-x-5 motion-reduce:before:transition-none dark:bg-zinc-700"
      />
    </label>
  );
}

app/settings/page.tsx (Server Component + server action)

import { CssSwitch } from "@/components/css-switch";

async function save(formData: FormData) {
  "use server";
  // An unchecked checkbox sends nothing, so "missing" means off.
  const emails = formData.get("emails") === "on";
  const digest = formData.get("digest") === "on";
  await savePrefs({ emails, digest });
}

export default function Settings() {
  return (
    <form action={save} className="mx-auto max-w-sm space-y-4 p-6">
      <CssSwitch name="emails" label="Product emails" defaultChecked />
      <CssSwitch name="digest" label="Weekly digest" />
      <button className="rounded-lg bg-zinc-900 px-4 py-2 text-sm text-white">Save</button>
    </form>
  );
}

async function savePrefs(prefs: { emails: boolean; digest: boolean }) {
  // your database write
  void prefs;
}

Where Pull-Cord Login fits

Pull-Cord Login turns the toggle into the whole login screen: you drag a cord, the lamp turns on with a little swing, and the form lights up. It's a client component with onSubmit, defaultOn, onToggle and accent props.
If you only need a theme switch, Day / Night Toggle is free.

Day / Night Toggle, the free animated theme switch

Install

Copy from the zipPut react/src/components into src/, then none for this page. The paid piece uses framer-motion.
Or ask your AIPaste PROMPT.md into Cursor, Lovable or v0.

Props

onSubmit: valid credentials, return a promise
defaultOn: start with the light on
onToggle: every pull
accent: bead and button colour

How qodesign compares

qodesign vs UiverseUiverse is best for: single small elements: buttons, loaders, toggles, checkboxes, inputs.
qodesign vs AnimataAnimata is best for: free animated building blocks you copy and adapt.
qodesign vs Motion PrimitivesMotion Primitives is best for: small motion building blocks you compose yourself: text effects, number tickers, dialogs, toolbars.

All comparisons, with prices read on each library's own site.

From the blog: Animated Toggle Switch in React and Tailwind (Accessible, No Library)

From the blog: Draggable Pull Cord Toggle in React and Tailwind

Questions

Should a toggle switch be a checkbox or a button?

Either works. A button with role="switch" suits instant settings that save on click. A checkbox with role="switch" suits forms, because it posts with the form and works without JavaScript.

How do I animate a toggle switch with Tailwind only?

Put the colour on the track and translate-x on the thumb, both switched by aria-checked or checked variants, with a transition on each.

How do I respect reduced motion on a switch?

Add motion-reduce:transition-none to the track and thumb. The state change still shows, it just doesn't slide.

Do I need Headless UI or Radix for a switch?

No. A switch is one button or one checkbox with the right role and state. A library helps when you need many controls to behave the same way.

Does the form work in Next.js?

Yes, as a client component. Keep "use client" at the top of the file that renders it, as in the snippet above. App Router and Pages Router both work.

Can Cursor or v0 add it for me?

Yes. Each download has a PROMPT.md. Paste it into Cursor, Lovable, v0 or Claude Code and it fits the piece into your app.

Can I use it in client work?

Yes, in personal and client projects. You can't resell the code itself as a kit.

Step 1: a button with role="switch"

components/switch.tsx

"use client"; import { useId, useState } from "react"; type Props = { label: string; description?: string; checked?: boolean; // controlled defaultChecked?: boolean; // uncontrolled onCheckedChange?: (checked: boolean) => void; name?: string; // posts "on" with the form when checked, like a checkbox disabled?: boolean; }; export function Switch({ label, description, checked, defaultChecked = false, onCheckedChange, name, disabled }: Props) { const id = useId(); const [inner, setInner] = useState(defaultChecked); const on = checked ?? inner; function toggle() { if (checked === undefined) setInner(!on); onCheckedChange?.(!on); } return ( <div className="flex items-center justify-between gap-4"> <div> <span id={`${id}-label`} className="text-sm font-medium"> {label} </span> {description ? ( <p id={`${id}-desc`} className="text-sm text-zinc-500"> {description} </p> ) : null} </div> <button type="button" role="switch" aria-checked={on} aria-labelledby={`${id}-label`} aria-describedby={description ? `${id}-desc` : undefined} disabled={disabled} onClick={toggle} className="group relative inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full bg-zinc-300 transition-colors duration-200 aria-checked:bg-emerald-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-emerald-600 disabled:cursor-not-allowed disabled:opacity-50 motion-reduce:transition-none dark:bg-zinc-700" > <span aria-hidden="true" className="absolute left-0.5 size-5 rounded-full bg-white shadow transition-[translate,width] duration-200 ease-[cubic-bezier(.3,1.4,.5,1)] group-active:w-6 group-aria-checked:translate-x-5 group-aria-checked:group-active:translate-x-4 motion-reduce:transition-none" /> </button> {name && on ? <input type="hidden" name={name} value="on" /> : null} </div> ); }

Good to know

role="switch" with aria-checked tells screen readers it's an on/off control, and they read "on" or "off" instead of "checked". The visible text is its name through aria-labelledby.

The thumb moves with Tailwind's group-aria-checked variant, so the look comes straight from the ARIA state. There's no second piece of state that can drift from it.

group-active widens the thumb while it's pressed, the small squish you see on iOS switches. The cubic-bezier with a value over 1 gives the slide a little overshoot.

motion-reduce:transition-none turns both animations off for people who set reduced motion. The switch still changes colour, so the state stays clear.

It works controlled (checked + onCheckedChange) or uncontrolled (defaultChecked). With a name, it adds a hidden input that sends "on" with the form, like a checkbox.

What we ran on October 27, 2026: every file on this page type-checks with TypeScript 5.9.3 against react 19.1.1 and next 15.5.28 in strict mode, and a Switch with no label fails that check. We didn't render the switches in a browser for this page.

Step 2: a switch that works before JavaScript loads

For a settings form you often don't need client state at all. A checkbox with appearance-none and role="switch" can be styled as the track, and its ::before as the thumb, so the whole switch is CSS and renders from a Server Component.

It posts with the form like any checkbox: checked sends "on", unchecked sends nothing. The server action below reads it that way.

components/css-switch.tsx (no "use client")

// No "use client": a real checkbox styled as a switch. Works before
// hydration, posts with the form, and screen readers announce it as a switch.
export function CssSwitch({ name, label, defaultChecked }: { name: string; label: string; defaultChecked?: boolean }) {
  return (
    <label className="flex cursor-pointer items-center justify-between gap-4 text-sm font-medium">
      {label}
      <input
        type="checkbox"
        role="switch"
        name={name}
        defaultChecked={defaultChecked}
        className="relative h-6 w-11 shrink-0 cursor-pointer appearance-none rounded-full bg-zinc-300 transition-colors duration-200 checked:bg-emerald-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-emerald-600 motion-reduce:transition-none before:absolute before:top-0.5 before:left-0.5 before:size-5 before:rounded-full before:bg-white before:shadow before:transition-transform before:duration-200 checked:before:translate-x-5 motion-reduce:before:transition-none dark:bg-zinc-700"
      />
    </label>
  );
}

app/settings/page.tsx (Server Component + server action)

import { CssSwitch } from "@/components/css-switch";

async function save(formData: FormData) {
  "use server";
  // An unchecked checkbox sends nothing, so "missing" means off.
  const emails = formData.get("emails") === "on";
  const digest = formData.get("digest") === "on";
  await savePrefs({ emails, digest });
}

export default function Settings() {
  return (
    <form action={save} className="mx-auto max-w-sm space-y-4 p-6">
      <CssSwitch name="emails" label="Product emails" defaultChecked />
      <CssSwitch name="digest" label="Weekly digest" />
      <button className="rounded-lg bg-zinc-900 px-4 py-2 text-sm text-white">Save</button>
    </form>
  );
}

async function savePrefs(prefs: { emails: boolean; digest: boolean }) {
  // your database write
  void prefs;
}

Where Pull-Cord Login fits

Pull-Cord Login turns the toggle into the whole login screen: you drag a cord, the lamp turns on with a little swing, and the form lights up. It's a client component with onSubmit, defaultOn, onToggle and accent props.

If you only need a theme switch, Day / Night Toggle is free.

How qodesign compares

qodesign vs UiverseUiverse is best for: single small elements: buttons, loaders, toggles, checkboxes, inputs.

qodesign vs AnimataAnimata is best for: free animated building blocks you copy and adapt.

qodesign vs Motion PrimitivesMotion Primitives is best for: small motion building blocks you compose yourself: text effects, number tickers, dialogs, toolbars.

All comparisons, with prices read on each library's own site.

Questions

Should a toggle switch be a checkbox or a button?

Either works. A button with role="switch" suits instant settings that save on click. A checkbox with role="switch" suits forms, because it posts with the form and works without JavaScript.

How do I animate a toggle switch with Tailwind only?

Put the colour on the track and translate-x on the thumb, both switched by aria-checked or checked variants, with a transition on each.

How do I respect reduced motion on a switch?

Add motion-reduce:transition-none to the track and thumb. The state change still shows, it just doesn't slide.

Do I need Headless UI or Radix for a switch?

No. A switch is one button or one checkbox with the right role and state. A library helps when you need many controls to behave the same way.

Does the form work in Next.js?

Yes, as a client component. Keep "use client" at the top of the file that renders it, as in the snippet above. App Router and Pages Router both work.

Can Cursor or v0 add it for me?

Yes. Each download has a PROMPT.md. Paste it into Cursor, Lovable, v0 or Claude Code and it fits the piece into your app.

Can I use it in client work?

Yes, in personal and client projects. You can't resell the code itself as a kit.