Switch

Component 5

About

A toggle control that turns a setting on or off immediately, without needing a save or submit action.

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.

Code

How Switch is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import * as React from "react";
import { Switch } from "@/components/ui/switch";

export default function SwitchDemo() {
  const [on, setOn] = React.useState(true);

  return (
    <div
      style={{
        padding: 24,
        fontFamily: "var(--font-sans)",
        color: "var(--ink-primary)",
      }}
    >
      <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
        <Switch
          label="Auto-screening"
          checked={on}
          onChange={(e) => setOn(e.target.checked)}
        />
        <Switch size="sm" label="Small" defaultChecked />
        <Switch label="Disabled" disabled />
      </div>
    </div>
  );
}