Shadcn Switch

React switch for toggle settings and preferences with smooth animations. Built with TypeScript and Tailwind CSS for Next.js using Radix UI.

Switch component broken?

Join our Discord community for help from other developers.

You know those toggle switches that just feel right when you flip them? Like the ones on your phone for airplane mode or dark theme? Ever notice how much better they feel than checkboxes for instant settings? That's what this shadcn/ui switch gives you—a satisfying binary control that users actually want to interact with in your React applications.

Switch showcase

Clean toggle for instant settings:

Loading component...

Just a clean toggle with clear labeling. This free open source React component handles all the accessibility requirements so screen readers know what's being toggled and users can navigate with keyboards. Built with TypeScript for full type safety while styled with Tailwind CSS to match your design system.

npx shadcn@latest add switch

Why switches beat checkboxes for instant settings

Here's the thing—checkboxes work great in forms, but switches communicate something different. When users flip a switch, they expect immediate results. Dark mode turns on. Notifications stop. Features activate. No submit button needed.

Think about your phone's settings screen. Airplane mode? Switch. Wi-Fi? Switch. Do Not Disturb? Switch. There's a reason Apple and Google use switches for system preferences—they signal instant application of the setting. Your JavaScript applications deserve the same clarity.

This free shadcn switch handles the UX psychology—that satisfying slide animation, the clear on/off state, the larger touch target. Whether you're building preference panels, feature flags, or permission toggles in your Next.js applications, switches make binary choices feel intentional and immediate.

Common switch patterns you'll actually use

Dark mode toggle

The most common switch pattern in modern apps:

Loading component...

Form validation with switches

Email preferences with proper validation:

Loading component...

"use client"import { zodResolver } from "@hookform/resolvers/zod"import { useForm } from "react-hook-form"import { toast } from "sonner"import { z } from "zod"import { Button } from "@/components/ui/button"import {  Form,  FormControl,  FormDescription,  FormField,  FormItem,  FormLabel,} from "@/components/ui/form"import { Switch } from "@/components/ui/switch"const FormSchema = z.object({  marketing_emails: z.boolean().default(false).optional(),  security_emails: z.boolean(),})export default function SwitchForm() {  const form = useForm<z.infer<typeof FormSchema>>({    resolver: zodResolver(FormSchema),    defaultValues: {      security_emails: true,    },  })  function onSubmit(data: z.infer<typeof FormSchema>) {    toast("You submitted the following values", {      description: (        <pre className="mt-2 w-[320px] rounded-md bg-neutral-950 p-4">          <code className="text-white">{JSON.stringify(data, null, 2)}</code>        </pre>      ),    })  }  return (    <Form {...form}>      <form onSubmit={form.handleSubmit(onSubmit)} className="w-full space-y-6">        <div>          <h3 className="mb-4 text-lg font-medium">Email Notifications</h3>          <div className="space-y-4">            <FormField              control={form.control}              name="marketing_emails"              render={({ field }) => (                <FormItem className="flex flex-row items-center justify-between rounded-lg border p-6 shadow-sm">                  <div className="space-y-0.5 pr-4">                    <FormLabel className="text-base">Marketing emails</FormLabel>                    <FormDescription className="text-sm">                      Receive emails about new products, features, and more.                    </FormDescription>                  </div>                  <FormControl>                    <Switch                      checked={field.value}                      onCheckedChange={field.onChange}                    />                  </FormControl>                </FormItem>              )}            />            <FormField              control={form.control}              name="security_emails"              render={({ field }) => (                <FormItem className="flex flex-row items-center justify-between rounded-lg border p-6 shadow-sm">                  <div className="space-y-0.5 pr-4">                    <FormLabel className="text-base">Security emails</FormLabel>                    <FormDescription className="text-sm">                      Receive emails about your account security.                    </FormDescription>                  </div>                  <FormControl>                    <Switch                      checked={field.value}                      onCheckedChange={field.onChange}                      disabled                      aria-readonly                    />                  </FormControl>                </FormItem>              )}            />          </div>        </div>        <Button type="submit">Submit</Button>      </form>    </Form>  )}

import * as React from "react"import { Slot } from "@radix-ui/react-slot"import { cva, type VariantProps } from "class-variance-authority"import { cn } from "@/lib/utils"const buttonVariants = cva(  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",  {    variants: {      variant: {        default:          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",        destructive:          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",        outline:          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",        secondary:          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",        ghost:          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",        link: "text-primary underline-offset-4 hover:underline",      },      size: {        default: "h-9 px-4 py-2 has-[>svg]:px-3",        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",        icon: "size-9",      },    },    defaultVariants: {      variant: "default",      size: "default",    },  })function Button({  className,  variant,  size,  asChild = false,  ...props}: React.ComponentProps<"button"> &  VariantProps<typeof buttonVariants> & {    asChild?: boolean  }) {  const Comp = asChild ? Slot : "button"  return (    <Comp      data-slot="button"      className={cn(buttonVariants({ variant, size, className }))}      {...props}    />  )}export { Button, buttonVariants }

Settings panel organization

App preferences grouped logically:

Loading component...

"use client"import { useState } from "react"import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"import { Label } from "@/components/ui/label"import { Switch } from "@/components/ui/switch"import { Separator } from "@/components/ui/separator"export default function SwitchSettings() {  const [settings, setSettings] = useState({    notifications: true,    darkMode: false,    analytics: true,    location: false,    autoSave: true,  })  const updateSetting = (key: keyof typeof settings) => {    setSettings(prev => ({ ...prev, [key]: !prev[key] }))  }  return (    <Card className="w-full max-w-md">      <CardHeader>        <CardTitle>App Settings</CardTitle>        <CardDescription>          Customize your experience and privacy preferences        </CardDescription>      </CardHeader>      <CardContent className="space-y-6">        <div className="space-y-4">          <div className="flex items-center justify-between">            <div className="space-y-0.5">              <Label htmlFor="notifications" className="font-medium">                Push Notifications              </Label>              <p className="text-sm text-muted-foreground">                Get notified about important updates              </p>            </div>            <Switch              id="notifications"              checked={settings.notifications}              onCheckedChange={() => updateSetting('notifications')}            />          </div>          <Separator />          <div className="flex items-center justify-between">            <div className="space-y-0.5">              <Label htmlFor="dark-mode" className="font-medium">                Dark Mode              </Label>              <p className="text-sm text-muted-foreground">                Switch to dark theme appearance              </p>            </div>            <Switch              id="dark-mode"              checked={settings.darkMode}              onCheckedChange={() => updateSetting('darkMode')}            />          </div>          <Separator />          <div className="flex items-center justify-between">            <div className="space-y-0.5">              <Label htmlFor="analytics" className="font-medium">                Analytics              </Label>              <p className="text-sm text-muted-foreground">                Help us improve by sharing usage data              </p>            </div>            <Switch              id="analytics"              checked={settings.analytics}              onCheckedChange={() => updateSetting('analytics')}            />          </div>          <Separator />          <div className="flex items-center justify-between">            <div className="space-y-0.5">              <Label htmlFor="location" className="font-medium">                Location Services              </Label>              <p className="text-sm text-muted-foreground">                Allow location access for better recommendations              </p>            </div>            <Switch              id="location"              checked={settings.location}              onCheckedChange={() => updateSetting('location')}            />          </div>          <Separator />          <div className="flex items-center justify-between">            <div className="space-y-0.5">              <Label htmlFor="auto-save" className="font-medium">                Auto Save              </Label>              <p className="text-sm text-muted-foreground">                Automatically save your work as you type              </p>            </div>            <Switch              id="auto-save"              checked={settings.autoSave}              onCheckedChange={() => updateSetting('autoSave')}            />          </div>        </div>      </CardContent>    </Card>  )}

Feature flags and permissions

Control feature access and user capabilities:

Loading component...

Master switch with dependencies

Parent toggles controlling child switches:

Loading component...

These patterns show switches handling everything from theme preferences to complex permission systems. Each example demonstrates how this open source component adapts to different contexts while maintaining consistent interaction patterns.

Features

This free open source switch component includes everything you need:

TypeScript-first - Full type safety with controlled and uncontrolled modes in React
Radix UI powered - Built on battle-tested primitives with ARIA compliance
Keyboard ready - Space and Enter keys toggle, Tab navigates naturally
Tailwind CSS styled - Customize with utilities, not fighting CSS specificity
Form compatible - Hidden input for proper form submission in JavaScript
State attributes - data-state and data-disabled for advanced styling
Mobile optimized - Large touch targets that feel natural on any device
Animation smooth - That satisfying slide that makes switches feel premium

API Reference

Component Props

Prop	Type	Default
`checked?`	`boolean`	`undefined`
`onCheckedChange?`	`(checked: boolean) => void`	`undefined`
`disabled?`	`boolean`	`false`
`name?`	`string`	`undefined`

Keyboard Shortcuts

Key	Action
`Space`	Toggle the switch state
`Enter`	Toggle the switch state
`Tab`	Navigate between switches

Switch vs Checkbox Quick Guide

Use Switch	Use Checkbox
Instant settings (dark mode, notifications)	Form data that needs submission
System preferences that apply immediately	Multiple selections from a list
Feature flags and permissions	Terms acceptance and agreements
Binary on/off states	Data collection fields

Production tips

Label switches clearly so users know exactly what they control. This free shadcn/ui switch component provides the interaction—you provide clear labels that explain what happens when toggled. "Enable notifications" beats "Notifications" because it tells users the action.

Group related switches visually to reduce cognitive load. When building settings panels in your Next.js applications, organize switches into logical sections. Privacy settings together, notification preferences together, appearance options together. This TypeScript component handles the individual toggles—you create the information architecture.

Show immediate feedback when switches change application state. If dark mode doesn't apply instantly, users think it's broken. This open source shadcn switch triggers onChange immediately—make sure your JavaScript code responds just as quickly with visible changes.

Consider adding confirmation dialogs for high-impact switches. Deleting all data? Disabling security features? Some switches deserve a second thought. The Tailwind CSS styled component handles the toggle—you decide when additional confirmation protects users from mistakes.

Persist switch states across sessions for better user experience. Nobody wants to re-enable dark mode every visit. This React component manages the UI state—use localStorage or your backend to remember user preferences between sessions.

Integration with other components

Switches naturally pair with Form components for preference panels and settings screens in your React applications. Use Label components for clear switch descriptions and Card components to group related switches visually.

For complex settings, combine switches with Accordion components to organize preferences into collapsible sections. This open source pattern keeps interfaces clean while providing granular control.

When building permission systems, use switches alongside Dialog components for confirmation or Alert components for warnings about security implications. Separator components help divide switch groups visually.

For comparison interfaces, pair switches with Tabs components to show different configuration sets or RadioGroup components when users need to choose one option from many. Your JavaScript application can compose these shadcn components while maintaining consistent interaction patterns.

Shadcn Switch

Switch showcase

Why switches beat checkboxes for instant settings

Common switch patterns you'll actually use

Dark mode toggle

Form validation with switches

Settings panel organization

Feature flags and permissions

Master switch with dependencies

Features

API Reference

Component Props

Keyboard Shortcuts

Switch vs Checkbox Quick Guide

Production tips

Integration with other components

Questions you might have

On this page

Shadcn Switch

Reactlabel

Reactswitch

Reactlabel

Reactswitch

Reactbutton

Reactform

Reactswitch

Reactcard

Reactlabel

Reactswitch

Reactseparator

Reactlabel

Reactswitch

Reactlabel

Reactswitch

When should I use a switch instead of a checkbox?

How do I make switch states persist between sessions?

Can I customize switch colors for different states?

How do I handle loading states while settings save?

Should switch labels go on the left or right?

Do switches work well on mobile devices?

How do I create a master switch that controls other switches?

Should I track switch interactions for analytics?

On this page