SwitchField

import { SwitchField } from "@fanvue/ui";
import type { SwitchFieldOrientation, SwitchFieldProps } from "@fanvue/ui";

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

<SwitchField label="Toggle" helperText="Helper" />

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

<SwitchField label="Toggle" helperText="Helper" disabled />

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

<SwitchField label="Toggle" helperText="Helper" infoText="Info text" />

import { SwitchField } 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 - Right orientation
    </span>
    <SwitchField label="Toggle" helperText="Helper" orientation="right" checked={true} />
  </div>
  <div className="flex flex-col gap-3">
    <span className="typography-body-small-14px-semibold text-content-secondary">
      Default - Left orientation
    </span>
    <SwitchField label="Toggle" helperText="Helper" orientation="left" checked={true} />
  </div>
  <div className="flex flex-col gap-3">
    <span className="typography-body-small-14px-semibold text-content-secondary">
      Small - Right orientation
    </span>
    <SwitchField
      label="Toggle"
      helperText="Helper"
      size="small"
      orientation="right"
      checked={true}
    />
  </div>
  <div className="flex flex-col gap-3">
    <span className="typography-body-small-14px-semibold text-content-secondary">
      Small - Left orientation
    </span>
    <SwitchField
      label="Toggle"
      helperText="Helper"
      size="small"
      orientation="left"
      checked={true}
    />
  </div>
</div>

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

<SwitchField label="Toggle" helperText="Helper" disabled checked />