Switch

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

npx shadcn@latest add @fulldev/switch

Usage

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

<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

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

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

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

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

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

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

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 for events such as switch:change.

Sidebar

Search