Switch

An accessible on/off toggle built on a native checkbox with role="switch", with an iOS-style thumb that stretches toward its destination while pressed; ported to React from the Svelte original in ebnsina's Sina UI component library.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Switch to your project and fits it to your theme.

"use client";

import Switch from "@/components/ui/switch";
import { useState } from "react";

export default function SwitchDemo() {
  const [notify, setNotify] = useState(true);

  return (
    <form method="post">
      <Switch name="notify" checked={notify} onCheckedChange={setNotify}>
        Notify me of new translations
      </Switch>
    </form>
  );
}