# Switch

A control that allows the user to toggle between checked and not checked.

Page: https://sui.draco.dev/docs/components/switch

### Example: switch-demo

```tsx
import { Label } from "@workspace/ui/components/label";
import { Switch } from "@workspace/ui/components/switch";
import { useId as usePreviewId } from "react";

export function SwitchDemo() {
  const previewId = usePreviewId();

  return (
    <div className="flex items-center space-x-2">
      <Switch id={`${previewId}-airplane-mode`} />
      <Label htmlFor={`${previewId}-airplane-mode`}>Airplane Mode</Label>
    </div>
  );
}

export default SwitchDemo;
```

## Installation

```bash
bunx --bun shadcn@latest add @sui/switch
```

Install with the shadcn CLI or use the shared `@workspace/ui` package. Follow the [installation guide](/docs/installation) to configure the registry, load styles, and choose import aliases.

## Usage

```tsx
import { Switch } from "@workspace/ui/components/switch"
```

```tsx
<Switch />
```

## Description

### Example: switch-description

```tsx
import {
  Field,
  FieldContent,
  FieldDescription,
  FieldLabel,
} from "@workspace/ui/components/field";
import { Switch } from "@workspace/ui/components/switch";
import { useId as usePreviewId } from "react";

export function SwitchDescription() {
  const previewId = usePreviewId();

  return (
    <Field orientation="horizontal" className="max-w-sm">
      <FieldContent>
        <FieldLabel htmlFor={`${previewId}-switch-focus-mode`}>
          Share across devices
        </FieldLabel>
        <FieldDescription>
          Focus is shared across devices, and turns off when you leave the app.
        </FieldDescription>
      </FieldContent>
      <Switch id={`${previewId}-switch-focus-mode`} />
    </Field>
  );
}

export default SwitchDescription;
```

## Choice Card

Card-style selection where `FieldLabel` wraps the entire `Field` for a clickable card pattern.

### Example: switch-choice-card

```tsx
import {
  Field,
  FieldContent,
  FieldDescription,
  FieldGroup,
  FieldLabel,
  FieldTitle,
} from "@workspace/ui/components/field";
import { Switch } from "@workspace/ui/components/switch";
import { useId as usePreviewId } from "react";

export function SwitchChoiceCard() {
  const previewId = usePreviewId();

  return (
    <FieldGroup className="w-full max-w-sm">
      <FieldLabel htmlFor={`${previewId}-switch-share`}>
        <Field orientation="horizontal">
          <FieldContent>
            <FieldTitle>Share across devices</FieldTitle>
            <FieldDescription>
              Focus is shared across devices, and turns off when you leave the
              app.
            </FieldDescription>
          </FieldContent>
          <Switch id={`${previewId}-switch-share`} />
        </Field>
      </FieldLabel>
      <FieldLabel htmlFor={`${previewId}-switch-notifications`}>
        <Field orientation="horizontal">
          <FieldContent>
            <FieldTitle>Enable notifications</FieldTitle>
            <FieldDescription>
              Receive notifications when focus mode is enabled or disabled.
            </FieldDescription>
          </FieldContent>
          <Switch id={`${previewId}-switch-notifications`} defaultChecked />
        </Field>
      </FieldLabel>
    </FieldGroup>
  );
}

export default SwitchChoiceCard;
```

## Disabled

Add the `disabled` prop to the `Switch` component to disable the switch. Add the `data-disabled` prop to the `Field` component for styling.

### Example: switch-disabled

```tsx
import { Field, FieldLabel } from "@workspace/ui/components/field";
import { Switch } from "@workspace/ui/components/switch";
import { useId as usePreviewId } from "react";

export function SwitchDisabled() {
  const previewId = usePreviewId();

  return (
    <Field orientation="horizontal" data-disabled className="w-fit">
      <Switch id={`${previewId}-switch-disabled-unchecked`} disabled />
      <FieldLabel htmlFor={`${previewId}-switch-disabled-unchecked`}>
        Disabled
      </FieldLabel>
    </Field>
  );
}

export default SwitchDisabled;
```

## Invalid

Add the `aria-invalid` prop to the `Switch` component to indicate an invalid state. Add the `data-invalid` prop to the `Field` component for styling.

### Example: switch-invalid

```tsx
import {
  Field,
  FieldContent,
  FieldDescription,
  FieldLabel,
} from "@workspace/ui/components/field";
import { Switch } from "@workspace/ui/components/switch";
import { useId as usePreviewId } from "react";

export function SwitchInvalid() {
  const previewId = usePreviewId();

  return (
    <Field orientation="horizontal" className="max-w-sm" data-invalid>
      <FieldContent>
        <FieldLabel htmlFor={`${previewId}-switch-terms`}>
          Accept terms and conditions
        </FieldLabel>
        <FieldDescription>
          You must accept the terms and conditions to continue.
        </FieldDescription>
      </FieldContent>
      <Switch id={`${previewId}-switch-terms`} aria-invalid />
    </Field>
  );
}

export default SwitchInvalid;
```

## Size

Use the `size` prop to change the size of the switch.

### Example: switch-sizes

```tsx
import { Field, FieldGroup, FieldLabel } from "@workspace/ui/components/field";
import { Switch } from "@workspace/ui/components/switch";
import { useId as usePreviewId } from "react";

export function SwitchSizes() {
  const previewId = usePreviewId();

  return (
    <FieldGroup className="w-full max-w-[10rem]">
      <Field orientation="horizontal">
        <Switch id={`${previewId}-switch-size-sm`} size="sm" />
        <FieldLabel htmlFor={`${previewId}-switch-size-sm`}>Small</FieldLabel>
      </Field>
      <Field orientation="horizontal">
        <Switch id={`${previewId}-switch-size-default`} size="default" />
        <FieldLabel htmlFor={`${previewId}-switch-size-default`}>
          Default
        </FieldLabel>
      </Field>
    </FieldGroup>
  );
}

export default SwitchSizes;
```

## RTL

To enable RTL support in shadcn/ui, see the [RTL configuration guide](https://ui.shadcn.com/docs/rtl).

### Example: switch-rtl

```tsx
"use client";

import {
  Field,
  FieldContent,
  FieldDescription,
  FieldLabel,
} from "@workspace/ui/components/field";
import { Switch } from "@workspace/ui/components/switch";
import { useId as usePreviewId } from "react";
import { type Translations, useTranslation } from "./support";

const translations: Translations = {
  en: {
    dir: "ltr",
    values: {
      label: "Share across devices",
      description:
        "Focus is shared across devices, and turns off when you leave the app.",
    },
  },
  ar: {
    dir: "rtl",
    values: {
      label: "المشاركة عبر الأجهزة",
      description:
        "يتم مشاركة التركيز عبر الأجهزة، ويتم إيقاف تشغيله عند مغادرة التطبيق.",
    },
  },
  he: {
    dir: "rtl",
    values: {
      label: "שיתוף בין מכשירים",
      description: "המיקוד משותף בין מכשירים, וכבה כשאתה עוזב את האפליקציה.",
    },
  },
};

export function SwitchRtl() {
  const previewId = usePreviewId();

  const { dir, t } = useTranslation(translations, "ar");

  return (
    <Field orientation="horizontal" className="max-w-sm" dir={dir}>
      <FieldContent>
        <FieldLabel htmlFor={`${previewId}-switch-focus-mode-rtl`} dir={dir}>
          {t.label}
        </FieldLabel>
        <FieldDescription dir={dir}>{t.description}</FieldDescription>
      </FieldContent>
      <Switch id={`${previewId}-switch-focus-mode-rtl`} dir={dir} />
    </Field>
  );
}

export default SwitchRtl;
```

## API Reference

See the [Base UI Switch](https://base-ui.com/react/components/switch#api-reference) documentation.

- [Documentation](https://base-ui.com/react/components/switch)
- [API reference](https://base-ui.com/react/components/switch#api-reference)