Navigation: [/sitemap.md](/sitemap.md)

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

```astro live props={{ name: 'switch' }}
---
import { Label } from "@/components/ui/label"
import { Switch } from "@/components/ui/switch"
---

<Label class="inline-flex items-center gap-3">
  <Switch name="airplane-mode" />
  Airplane mode
</Label>
```

## Installation

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

## Usage

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

```astro
<Switch />
```

## Examples

```astro live
---
import {
  Field,
  FieldContent,
  FieldDescription,
  FieldLabel,
} from "@/components/ui/field"
import { Switch } from "@/components/ui/switch"
---

<div class="w-full max-w-sm">
  <Field orientation="horizontal">
    <Switch id="marketing-emails" name="marketing-emails" defaultChecked />
    <FieldContent>
      <FieldLabel for="marketing-emails">Marketing emails</FieldLabel>
      <FieldDescription>
        Receive occasional updates about new features and product news.
      </FieldDescription>
    </FieldContent>
  </Field>
</div>
```

### With Label

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

```astro live
---
import {
  Field,
  FieldContent,
  FieldDescription,
  FieldLabel,
  FieldTitle,
} from "@/components/ui/field"
import { Switch } from "@/components/ui/switch"
---

<div class="w-full max-w-md">
  <FieldLabel class="w-full">
    <Field orientation="horizontal">
      <Switch name="automatic-updates" defaultChecked />
      <FieldContent>
        <FieldTitle>Automatic updates</FieldTitle>
        <FieldDescription>
          Keep your workspace up to date without manual installs.
        </FieldDescription>
      </FieldContent>
    </Field>
  </FieldLabel>
</div>
```

### Disabled

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

```astro live
---
import {
  Field,
  FieldContent,
  FieldDescription,
  FieldLabel,
} from "@/components/ui/field"
import { Switch } from "@/components/ui/switch"
---

<div class="w-full max-w-sm">
  <Field orientation="horizontal" data-disabled="true">
    <Switch id="security-alerts" name="security-alerts" disabled />
    <FieldContent>
      <FieldLabel for="security-alerts">Security alerts</FieldLabel>
      <FieldDescription>
        This setting is managed by your organization.
      </FieldDescription>
    </FieldContent>
  </Field>
</div>
```

### Sizes

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

```astro live
---
import { Label } from "@/components/ui/label"
import { Switch } from "@/components/ui/switch"
---

<div class="flex flex-col gap-4">
  <Label class="inline-flex items-center gap-3">
    <Switch size="sm" name="switch-size-sm" />
    Small
  </Label>
  <Label class="inline-flex items-center gap-3">
    <Switch size="default" name="switch-size-default" defaultChecked />
    Default
  </Label>
</div>
```

## API Reference

See the [GitHub source code](https://github.com/fulldotdev/ui/tree/main/src/components/ui/switch) for more information on props.
See the [data-slot docs](https://github.com/bejamas/data-slot/blob/main/packages/switch/README.md) for more information on interactivity.