> ## Documentation Index
> Fetch the complete documentation index at: https://api.fanvue.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# SwitchToggle

> A binary segmented toggle rendered as a `radiogroup`.

```tsx theme={null}
import { SwitchToggle } from "@fanvue/ui";
import type { SwitchToggleOption, SwitchToggleProps, SwitchToggleSize } from "@fanvue/ui";
```

## Examples

## Default

<Frame>
  <iframe src={"https://main--697a1b6dd4dad73ee9c0e5f5.chromatic.com/iframe.html?id=components-switchtoggle--default&viewMode=story&shortcuts=false&singleStory=true&globals=theme:light"} width="100%" height="240" style={{border: "none", borderRadius: "8px"}} loading="lazy" title="SwitchToggle — Default" />
</Frame>

```tsx theme={null}
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" />
```

## Second Option Selected

<Frame>
  <iframe src={"https://main--697a1b6dd4dad73ee9c0e5f5.chromatic.com/iframe.html?id=components-switchtoggle--second-option-selected&viewMode=story&shortcuts=false&singleStory=true&globals=theme:light"} width="100%" height="240" style={{border: "none", borderRadius: "8px"}} loading="lazy" title="SwitchToggle — Second Option Selected" />
</Frame>

```tsx theme={null}
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"
/>
```

## Controlled

<Frame>
  <iframe src={"https://main--697a1b6dd4dad73ee9c0e5f5.chromatic.com/iframe.html?id=components-switchtoggle--controlled-example&viewMode=story&shortcuts=false&singleStory=true&globals=theme:light"} width="100%" height="240" style={{border: "none", borderRadius: "8px"}} loading="lazy" title="SwitchToggle — Controlled" />
</Frame>

```tsx theme={null}
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>
  );
}
```

## All Sizes

<Frame>
  <iframe src={"https://main--697a1b6dd4dad73ee9c0e5f5.chromatic.com/iframe.html?id=components-switchtoggle--all-sizes&viewMode=story&shortcuts=false&singleStory=true&globals=theme:light"} width="100%" height="240" style={{border: "none", borderRadius: "8px"}} loading="lazy" title="SwitchToggle — All Sizes" />
</Frame>

```tsx theme={null}
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>
```

## Disabled

<Frame>
  <iframe src={"https://main--697a1b6dd4dad73ee9c0e5f5.chromatic.com/iframe.html?id=components-switchtoggle--disabled&viewMode=story&shortcuts=false&singleStory=true&globals=theme:light"} width="100%" height="240" style={{border: "none", borderRadius: "8px"}} loading="lazy" title="SwitchToggle — Disabled" />
</Frame>

```tsx theme={null}
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" />
```

## Props

## SwitchToggle

A binary segmented toggle rendered as a `radiogroup`. The active option is highlighted with a sliding pill indicator. Supports both controlled and uncontrolled usage.

<ParamField path="options" type="[SwitchToggleOption, SwitchToggleOption]" required>
  The two options to toggle between (exactly two required).
</ParamField>

<ParamField path="defaultValue" type="string">
  Initially selected value (uncontrolled).
</ParamField>

<ParamField path="disabled" type="boolean" default="false">
  Whether the toggle is disabled.
</ParamField>

<ParamField path="onChange" type="((value: string) => void)">
  Callback fired when the selected value changes.
</ParamField>

<ParamField path="size" type="&#x22;24&#x22; | &#x22;32&#x22; | &#x22;40&#x22;" default="24">
  Height of the toggle in pixels.
</ParamField>

<ParamField path="value" type="string">
  Currently selected value (controlled).
</ParamField>

## Exported types

Also exported from `@fanvue/ui`: `SwitchToggleOption`, `SwitchToggleProps`, `SwitchToggleSize`.

***

**Setup:** [Installation](/docs/ui/installation) · [Theming](/docs/ui/theming)