Switch

import { Switch } from "@fanvue/ui";
import type { SwitchProps, SwitchSize } from "@fanvue/ui";

import { Switch } from "@fanvue/ui";

<Switch aria-label="Toggle feature" />

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

function Example() {
  const [checked, setChecked] = useState(false);
  return (
    <div className="flex items-center gap-3">
      <Switch checked={checked} onCheckedChange={setChecked} aria-label="Toggle feature" />
      <span className="text-content-secondary text-sm">{checked ? "On" : "Off"}</span>
    </div>
  );
}

import { Switch } from "@fanvue/ui";

<div className="flex flex-col gap-6">
  <div className="flex flex-col gap-3">
    <span className="typography-body-small-14px-semibold text-content-secondary">
      Default Size
    </span>
    <div className="flex items-center gap-4">
      <Switch checked={true} aria-label="On" />
      <Switch checked={false} aria-label="Off" />
      <Switch disabled checked={true} aria-label="Disabled on" />
      <Switch disabled checked={false} aria-label="Disabled off" />
    </div>
  </div>
  <div className="flex flex-col gap-3">
    <span className="typography-body-small-14px-semibold text-content-secondary">
      Small Size
    </span>
    <div className="flex items-center gap-4">
      <Switch size="small" checked={true} aria-label="On" />
      <Switch size="small" checked={false} aria-label="Off" />
      <Switch size="small" disabled checked={true} aria-label="Disabled on" />
      <Switch size="small" disabled checked={false} aria-label="Disabled off" />
    </div>
  </div>
</div>

import { Switch } from "@fanvue/ui";

<div className="flex flex-col gap-4">
  <div className="flex items-center gap-3">
    <Switch aria-label="Default unchecked" />
    <span className="text-content-secondary text-sm">Default (unchecked)</span>
  </div>
  <div className="flex items-center gap-3">
    <Switch defaultChecked aria-label="Default checked" />
    <span className="text-content-secondary text-sm">Default checked</span>
  </div>
</div>