SwitchToggle

import { SwitchToggle } from "@fanvue/ui";
import type { SwitchToggleOption, SwitchToggleProps, SwitchToggleSize } from "@fanvue/ui";

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

const defaultOptions: [{ label: string; value: string }, { label: string; value: string }] = [
  { label: "Net", value: "net" },
  { label: "Gross", value: "gross" },
];

<SwitchToggle options={defaultOptions} aria-label="Toggle view" />

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

const defaultOptions: [{ label: string; value: string }, { label: string; value: string }] = [
  { label: "Net", value: "net" },
  { label: "Gross", value: "gross" },
];

<SwitchToggle
  options={defaultOptions}
  defaultValue="gross"
  aria-label="Toggle view"
/>

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

const defaultOptions: [{ label: string; value: string }, { label: string; value: string }] = [
  { label: "Net", value: "net" },
  { label: "Gross", value: "gross" },
];

function Example() {
  const [value, setValue] = useState("net");
  return (
    <div className="flex flex-col items-center gap-3">
      <SwitchToggle
        options={defaultOptions}
        value={value}
        onChange={setValue}
        aria-label="Toggle view"
      />
      <span className="text-content-secondary text-sm">Selected: {value}</span>
    </div>
  );
}

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

const defaultOptions: [{ label: string; value: string }, { label: string; value: string }] = [
  { label: "Net", value: "net" },
  { label: "Gross", value: "gross" },
];

<div className="flex flex-col items-start gap-4">
  <div className="flex flex-col gap-2">
    <span className="typography-body-small-14px-semibold text-content-secondary">
      Small (24)
    </span>
    <SwitchToggle size="24" options={defaultOptions} aria-label="Small toggle" />
  </div>
  <div className="flex flex-col gap-2">
    <span className="typography-body-small-14px-semibold text-content-secondary">
      Medium (32)
    </span>
    <SwitchToggle size="32" options={defaultOptions} aria-label="Medium toggle" />
  </div>
  <div className="flex flex-col gap-2">
    <span className="typography-body-small-14px-semibold text-content-secondary">
      Large (40)
    </span>
    <SwitchToggle size="40" options={defaultOptions} aria-label="Large toggle" />
  </div>
</div>

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

const defaultOptions: [{ label: string; value: string }, { label: string; value: string }] = [
  { label: "Net", value: "net" },
  { label: "Gross", value: "gross" },
];

<SwitchToggle options={defaultOptions} disabled aria-label="Toggle view" />