Switch

import { useState } from "react";
import { Switch } from "seed-design/ui/switch";

export default function SwitchPreview() {
  const [isChecked, setIsChecked] = useState(false);

  return <Switch checked={isChecked} onCheckedChange={setIsChecked} />;
}

npx @seed-design/cli@latest add switch

pnpm dlx @seed-design/cli@latest add switch

yarn dlx @seed-design/cli@latest add switch

bun x @seed-design/cli@latest add switch

import { useState } from "react";
import { Switch } from "seed-design/ui/switch";

export default function SwitchMedium() {
  const [isChecked, setIsChecked] = useState(false);

  return <Switch size="medium" checked={isChecked} onCheckedChange={setIsChecked} />;
}

import { useState } from "react";
import { Switch } from "seed-design/ui/switch";

export default function SwitchSmall() {
  const [isChecked, setIsChecked] = useState(false);

  return <Switch size="small" label="라벨" checked={isChecked} onCheckedChange={setIsChecked} />;
}

import { Switch } from "seed-design/ui/switch";

export default function SwitchDisabled() {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
      <Switch disabled />
      <Switch checked disabled />
    </div>
  );
}