Switch

A standalone toggle switch with checked, disabled, and dark mode states — built with Tailwind CSS.

Preview

Basic switch

import { Switch } from '@/registry/ui-kit/tailwind-switch/react'

function Example() {
  const [on, setOn] = useState(false)
  return <Switch checked={on} onChange={setOn} />
}

Disabled

import { Switch } from '@/registry/ui-kit/tailwind-switch/react'

function Example() {
  return <Switch disabled />
}

Component API

Prop	Default	Description
`checked`	`false`	Whether the switch is on.
`onChange`	`—`	Callback when the switch is toggled.
`disabled`	`false`	Disable the switch.
`className`	`""`	Additional CSS classes to apply.

Source Code

"use client";

interface SwitchProps {
  checked?: boolean;
  onChange?: (checked: boolean) => void;
  disabled?: boolean;
  className?: string;
}

function Switch({ checked = false, onChange, disabled = false, className = "" }: SwitchProps) {
  return (
    <button
      type="button"
      role="switch"
      aria-checked={checked}
      disabled={disabled}
      onClick={() => onChange?.(!checked)}
      className={[
        "relative inline-flex h-5 w-9 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500 disabled:cursor-not-allowed disabled:opacity-50",
        checked ? "bg-indigo-600" : "bg-zinc-200 dark:bg-zinc-700",
        className,
      ].join(" ")}
    >
      <span
        aria-hidden="true"
        className={[
          "pointer-events-none inline-block h-4 w-4 rounded-full bg-white shadow-sm ring-0 transition-transform",
          checked ? "translate-x-4" : "translate-x-0",
        ].join(" ")}
      />
    </button>
  );
}

export { Switch };
export default Switch;