Logo
DocsSwitch

Switch

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

Implementation

1

Install the following dependencies:

pnpm add @radix-ui/react-switch
2

Copy and paste the following code into your project.

"use client"

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

import { cn } from "@/lib/utils"

const Switch = React.forwardRef<
  React.ElementRef<typeof SwitchPrimitives.Root>,
  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
>(({ className, ...props }, ref) => (
  <SwitchPrimitives.Root
    className={cn(
      "peer inline-flex h-[24px] w-[44px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
      className
    )}
    {...props}
    ref={ref}
  >
    <SwitchPrimitives.Thumb
      className={cn(
        "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
      )}
    />
  </SwitchPrimitives.Root>
))
Switch.displayName = SwitchPrimitives.Root.displayName

export { Switch }
3

Update the import paths to match your project setup.

Usage

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

Examples

Default

With Form

API Reference

Switch

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

Properties

PropertyTypeDefaultDescription
checkedbooleanfalseThe controlled checked state of the switch
onCheckedChangefunctionundefinedEvent handler called when the checked state changes
disabledbooleanfalseWhen true, prevents the user from interacting with the switch