---
type: doc
title: Switch
description: A control that allows the user to toggle between checked and not checked.
---

> Fulldev UI for Astro. The `@fulldev` registry in `components.json` points at `https://ui.full.dev/r/styles/{style}/{name}.json`; see [installation](/astro/docs/installation.md).

```astro title="src/components/examples/switch/switch-demo.astro"
---
import { Label } from "@/components/ui/label"
import { Switch } from "@/components/ui/switch"
---

<div class="flex items-center space-x-2">
  <Switch id="airplane-mode" />
  <Label for="airplane-mode">Airplane Mode</Label>
</div>
```

## Installation

```bash
npx shadcn@latest add @fulldev/switch
```

## Usage

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

```astro
<Switch id="notifications" name="notifications" />
```

`Switch` renders a `span` with `role="switch"` and injects a visually hidden
checkbox for form submission. Label it with a `Label` whose `for` matches the
switch `id`, or wrap it in a `label`.

## Description

```astro title="src/components/examples/switch/switch-description.astro"
---
import {
  Field,
  FieldContent,
  FieldDescription,
  FieldLabel,
} from "@/components/ui/field"
import { Switch } from "@/components/ui/switch"
---

<Field orientation="horizontal" class="max-w-sm">
  <FieldContent>
    <FieldLabel for="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="switch-focus-mode" />
</Field>
```

## Choice Card

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

```astro title="src/components/examples/switch/switch-choice-card.astro"
---
import {
  Field,
  FieldContent,
  FieldDescription,
  FieldGroup,
  FieldLabel,
  FieldTitle,
} from "@/components/ui/field"
import { Switch } from "@/components/ui/switch"
---

<FieldGroup class="w-full max-w-sm">
  <FieldLabel>
    <Field as="span" orientation="horizontal">
      <FieldContent as="span">
        <FieldTitle as="span">Share across devices</FieldTitle>
        <FieldDescription as="span">
          Focus is shared across devices, and turns off when you leave the app.
        </FieldDescription>
      </FieldContent>
      <Switch id="switch-share" />
    </Field>
  </FieldLabel>
  <FieldLabel>
    <Field as="span" orientation="horizontal">
      <FieldContent as="span">
        <FieldTitle as="span">Enable notifications</FieldTitle>
        <FieldDescription as="span">
          Receive notifications when focus mode is enabled or disabled.
        </FieldDescription>
      </FieldContent>
      <Switch id="switch-notifications" defaultChecked />
    </Field>
  </FieldLabel>
</FieldGroup>
```

## Disabled

Add `disabled` to the `Switch` and `data-disabled` to the `Field` for styling.

```astro title="src/components/examples/switch/switch-disabled.astro"
---
import { Field, FieldLabel } from "@/components/ui/field"
import { Switch } from "@/components/ui/switch"
---

<Field orientation="horizontal" data-disabled class="w-fit">
  <Switch id="switch-disabled-unchecked" disabled />
  <FieldLabel for="switch-disabled-unchecked">Disabled</FieldLabel>
</Field>
```

## Invalid

Add `aria-invalid="true"` to the `Switch` and `data-invalid` to the `Field`
for styling.

```astro title="src/components/examples/switch/switch-invalid.astro"
---
import {
  Field,
  FieldContent,
  FieldDescription,
  FieldLabel,
} from "@/components/ui/field"
import { Switch } from "@/components/ui/switch"
---

<Field orientation="horizontal" class="max-w-sm" data-invalid>
  <FieldContent>
    <FieldLabel for="switch-terms">Accept terms and conditions</FieldLabel>
    <FieldDescription>
      You must accept the terms and conditions to continue.
    </FieldDescription>
  </FieldContent>
  <Switch id="switch-terms" aria-invalid="true" />
</Field>
```

## Size

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

```astro title="src/components/examples/switch/switch-sizes.astro"
---
import { Field, FieldGroup, FieldLabel } from "@/components/ui/field"
import { Switch } from "@/components/ui/switch"
---

<FieldGroup class="w-full max-w-[10rem]">
  <Field orientation="horizontal">
    <Switch id="switch-size-sm" size="sm" />
    <FieldLabel for="switch-size-sm">Small</FieldLabel>
  </Field>
  <Field orientation="horizontal">
    <Switch id="switch-size-default" size="default" />
    <FieldLabel for="switch-size-default">Default</FieldLabel>
  </Field>
</FieldGroup>
```

## RTL

Set `dir="rtl"` on the field or a parent element.

```astro title="src/components/examples/switch/switch-rtl.astro"
---
import {
  Field,
  FieldContent,
  FieldDescription,
  FieldLabel,
} from "@/components/ui/field"
import { Switch } from "@/components/ui/switch"

const 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: "המיקוד משותף בין מכשירים, וכבה כשאתה עוזב את האפליקציה.",
    },
  },
} as const

const { dir, values: t } = translations.ar
---

<Field orientation="horizontal" class="max-w-sm" dir={dir}>
  <FieldContent>
    <FieldLabel for="switch-focus-mode-rtl" dir={dir}>
      {t.label}
    </FieldLabel>
    <FieldDescription dir={dir}>{t.description}</FieldDescription>
  </FieldContent>
  <Switch id="switch-focus-mode-rtl" dir={dir} />
</Field>
```

## API Reference

Source: [`src/components/ui/switch`](https://github.com/fulldotdev/ui/tree/main/src/components/ui/switch)

| Prop             | Type                | Default     |
| ---------------- | ------------------- | ----------- |
| `defaultChecked` | `boolean`           | `false`     |
| `disabled`       | `boolean`           | `false`     |
| `readOnly`       | `boolean`           | `false`     |
| `required`       | `boolean`           | `false`     |
| `name`           | `string`            |             |
| `value`          | `string`            | `"on"`      |
| `uncheckedValue` | `string`            |             |
| `size`           | `"default" \| "sm"` | `"default"` |

See the [data-slot docs](https://github.com/bejamas/data-slot/blob/main/packages/switch/README.md) for events such as `switch:change`.

## Install what this page shows

```bash
npx shadcn@latest add @fulldev/switch-examples
```