> ## 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.

# Switch

> A toggle switch for boolean on/off states.

```tsx theme={null}
import { Switch } from "@fanvue/ui";
import type { SwitchProps, SwitchSize } from "@fanvue/ui";
```

## Examples

## Default

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

```tsx theme={null}
import { Switch } from "@fanvue/ui";

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

## Controlled

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

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

## All Variants

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

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

## Uncontrolled

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

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

## Props

## Switch

A toggle switch for boolean on/off states. Built on Radix UI `Switch`.

For a labelled switch with helper text, see `SwitchField`.

<ParamField path="size" type="&#x22;small&#x22; | &#x22;default&#x22;" default="default">
  Size variant of the switch.
</ParamField>

## Exported types

Also exported from `@fanvue/ui`: `SwitchProps`, `SwitchSize`.

***

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