Switch

Airplane mode

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

npx shadcn@latest add @fulldev/switch

Usage

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

<Switch />

Examples

Marketing emails

Receive occasional updates about new features and product news.

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

Automatic updates

Keep your workspace up to date without manual installs.

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

Security alerts

This setting is managed by your organization.

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

Small Default

---
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 for more information on props. See the data-slot docs for more information on interactivity.

Sidebar

Search