Switch

A control that allows users to toggle between checked and not checked states. Perfect for settings, preferences, and feature toggles in React applications with Next.js, TypeScript, and Tailwind CSS.

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? That's what Switch gives you - a satisfying binary control that users actually want to interact with.

Basic toggle

Simple on/off control with proper labeling:

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.

npx shadcn@latest add switch

Why switches beat checkboxes for settings

Sometimes you need something that feels more immediate than a checkbox:

Visual feedback - Users see the state change instantly
Mobile friendly - Large touch targets that feel natural to tap
Settings context - Clearly indicates system preferences vs form data
Immediate effect - Perfect when changes apply right away
Status indication - Shows current state at a glance
Satisfying interaction - That little slide animation feels good

Real-world switch patterns

Form integration

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

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

These examples show switches in their natural habitat - settings screens, preference panels, and feature toggles. Each switch clearly communicates what it controls and responds immediately.

Perfect for user preferences

Switches work best when the change takes effect immediately. Dark mode, notifications, privacy settings, feature flags, accessibility options. Much better than checkboxes when you're dealing with system-level toggles rather than form data.

Built on Radix UI Switch primitive with full keyboard navigation support. Full TypeScript support. Styled with Tailwind CSS to match the shadcn design system.

Radix UI Foundation

The Switch component is built on top of Radix UI's Switch primitive, providing:

Full keyboard navigation - Space and Enter keys toggle the switch
Accessibility compliance - Adheres to the switch ARIA role requirements
Form integration - Renders a hidden input for proper form submission
Controlled/uncontrolled - Works in both controlled and uncontrolled modes
Data attributes - Provides data-state and data-disabled attributes for styling

Component Structure

The Radix UI Switch consists of two main parts:

import * as Switch from "@radix-ui/react-switch"

<Switch.Root>
  <Switch.Thumb />
</Switch.Root>

API Reference

Switch (Root)

Contains all parts of the switch and renders a hidden input for forms.

Prop	Type	Default	Description
`checked`	`boolean`	-	The controlled checked state of the switch
`defaultChecked`	`boolean`	-	The default checked state (uncontrolled)
`onCheckedChange`	`(checked: boolean) => void`	-	Event handler called when the checked state changes
`disabled`	`boolean`	`false`	Whether the switch is disabled
`required`	`boolean`	`false`	Whether the switch is required in forms
`name`	`string`	-	The name of the switch for form submission
`value`	`string`	`"on"`	The value given as data when submitted with a name
`id`	`string`	-	The id attribute for the switch
`className`	`string`	-	Additional CSS classes

Data Attributes

The switch automatically applies data attributes for styling:

Attribute	Values	Description
`[data-state]`	`"checked"` \| `"unchecked"`	Indicates the current state
`[data-disabled]`	Present when disabled	Applied when switch is disabled

State management

The Switch can be controlled or uncontrolled:

// Controlled
const [enabled, setEnabled] = useState(false)
<Switch checked={enabled} onCheckedChange={setEnabled} />

// Uncontrolled  
<Switch defaultChecked={true} />

Form integration

Works seamlessly with React Hook Form and other form libraries:

<FormField
  control={form.control}
  name="notifications"
  render={({ field }) => (
    <FormItem className="flex items-center justify-between">
      <FormLabel>Push Notifications</FormLabel>
      <FormControl>
        <Switch
          checked={field.value}
          onCheckedChange={field.onChange}
        />
      </FormControl>
    </FormItem>
  )}
/>

Accessibility features

Built-in accessibility support includes:

ARIA labels - Proper role and state attributes
Keyboard support - Space and Enter keys toggle the switch
Focus management - Clear visual focus indicators
Screen reader support - State changes are announced
Label association - Connects with Label components via id/htmlFor
Form integration - Works with form validation and submission

Key	Action
`Space`	Toggle the switch
`Enter`	Toggle the switch

Switch vs Checkbox guidelines

Use Switch when:

Settings and preferences - System-level configuration
Immediate effect - Change applies right away without form submission
Binary states - Clear on/off, enabled/disabled states
Feature toggles - Turning functionality on or off

Use Checkbox when:

Form data - Part of form that gets submitted
Multiple selection - Selecting items from a list
Agreement - Terms acceptance, consent flows
Data collection - Gathering user information

Design patterns for switches

Settings organization

Group related switches with clear section headers:

<div className="space-y-6">
  <div>
    <h3 className="mb-4 text-lg font-medium">Notifications</h3>
    <div className="space-y-4">
      <SwitchItem label="Email updates" />
      <SwitchItem label="Push notifications" />
    </div>
  </div>
  
  <div>
    <h3 className="mb-4 text-lg font-medium">Privacy</h3>
    <div className="space-y-4">
      <SwitchItem label="Analytics" />
      <SwitchItem label="Location sharing" />
    </div>
  </div>
</div>

Descriptive labels

Always include helpful descriptions for complex settings:

<div className="flex items-center justify-between">
  <div className="space-y-0.5">
    <Label className="font-medium">Auto Save</Label>
    <p className="text-sm text-muted-foreground">
      Automatically save your work as you type
    </p>
  </div>
  <Switch />
</div>

Immediate feedback

Show the effect of toggle changes right away:

const [darkMode, setDarkMode] = useState(false)

useEffect(() => {
  document.documentElement.classList.toggle('dark', darkMode)
}, [darkMode])

<Switch 
  checked={darkMode} 
  onCheckedChange={setDarkMode}
/>

Common switch scenarios

Keep these patterns in mind when adding switches to your interface:

Label clearly - Describe exactly what the switch controls
Group logically - Related settings should be visually connected
Show current state - Make the on/off position obvious
Provide descriptions - Explain what happens when toggled
Test on mobile - Ensure touch targets are large enough
Consider consequences - Some settings might need confirmation dialogs
Persist state - Remember user preferences across sessions
Handle errors gracefully - What if the setting change fails?

Basic toggle

Why switches beat checkboxes for settings

Real-world switch patterns

Form integration

Settings panel

Perfect for user preferences

Radix UI Foundation

Component Structure

API Reference

Switch (Root)

Data Attributes

State management

Form integration

Accessibility features

Keyboard navigation

Switch vs Checkbox guidelines

Design patterns for switches

Settings organization

Descriptive labels

Immediate feedback

Common switch scenarios

On this page

Switch

Reactlabel

Reactswitch

Reactbutton

Reactform

Reactswitch

Reactcard

Reactlabel

Reactswitch

Reactseparator

On this page