Switch

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

Airplane Mode

Installation

On This Page

Deploy your shadcn/ui app on Vercel

Trusted by OpenAI, Sonos, Adobe, and more.

Vercel provides tools and infrastructure to deploy apps and features at scale.

pnpm dlx shadcn@latest add switch

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

<Switch />

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

Share across devices

Focus is shared across devices, and turns off when you leave the app.

Enable notifications

Receive notifications when focus mode is enabled or disabled.

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

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.

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

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

import {
  Field,
  FieldContent,

import {
  Field,
  FieldContent,

import { Field, FieldLabel } from "@/components/ui/field"
import { Switch } from "@/components/ui/switch"

import {
  Field,
  FieldContent,

import { Field, FieldGroup, FieldLabel } from "@/components/ui/field"
import { Switch } from "@/components/ui/switch"