Switch

Example

Airplane mode

Installation

Create a `switch.tsx` file and paste the following code into it.

/components/ui/switch.tsx usage

"use client";

import * as React from "react";
import { Switch as SwitchPrimitive } from "radix-ui";

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

const Switch = React.forwardRef<
  React.ElementRef<typeof SwitchPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof SwitchPrimitive.Root> & {
    size?: "sm" | "default";
    variant?: "default" | "live";
  }
>(({ className, size = "default", variant = "default", ...props }, ref) => {
  return (
    <SwitchPrimitive.Root
      data-slot="switch"
      data-size={size}
      data-variant={variant}
      className={cn(
        "peer data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 group/switch inline-flex shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-[1.15rem] data-[size=default]:w-8 data-[size=sm]:h-3.5 data-[size=sm]:w-6",
        variant === "default" && "data-[state=checked]:bg-brand",
        variant === "live" && "data-[state=checked]:bg-[#E58A00]",
        className,
      )}
      {...props}
      ref={ref}
    >
      <SwitchPrimitive.Thumb
        data-slot="switch-thumb"
        className={cn(
          "bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground group-disabled/switch:bg-[#a3a5a8] pointer-events-none block rounded-full ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0",
        )}
      />
    </SwitchPrimitive.Root>
  );
});
Switch.displayName = "Switch";

export { Switch };

"use client";import * as React from "react";import { Switch as SwitchPrimitive } from "radix-ui";import { cn } from "@/lib/utils";const Switch = React.forwardRef<  React.ElementRef<typeof SwitchPrimitive.Root>,  React.ComponentPropsWithoutRef<typeof SwitchPrimitive.Root> & {    size?: "sm" | "default";    variant?: "default" | "live";  }>(({ className, size = "default", variant = "default", ...props }, ref) => {  return (    <SwitchPrimitive.Root      data-slot="switch"      data-size={size}      data-variant={variant}      className={cn(        "peer data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 group/switch inline-flex shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-[1.15rem] data-[size=default]:w-8 data-[size=sm]:h-3.5 data-[size=sm]:w-6",        variant === "default" && "data-[state=checked]:bg-brand",        variant === "live" && "data-[state=checked]:bg-[#E58A00]",        className,      )}      {...props}      ref={ref}    >      <SwitchPrimitive.Thumb        data-slot="switch-thumb"        className={cn(          "bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground group-disabled/switch:bg-[#a3a5a8] pointer-events-none block rounded-full ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0",        )}      />    </SwitchPrimitive.Root>  );});Switch.displayName = "Switch";export { Switch };

Check the import paths to ensure they match your project setup.

Usage

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

<Switch checked={checked} onCheckedChange={setChecked} />

The Switch forwards all props to Radix UI's Switch.Root, including checked, defaultChecked, onCheckedChange, and disabled. It also supports a size prop for "default" or "sm".

Examples

Default

Default switch

With label

Associate the label with the switch using htmlFor and a matching id. The peer class on the switch (included by default) lets the label style respond to the switch state.

Enable notifications

Sizes

Use the size prop to switch between default and small.

Default size

Small size

Disabled

Disabled switch

Controlled

Control the checked state with checked and onCheckedChange.

const [checked, setChecked] = React.useState(false);
<Switch checked={checked} onCheckedChange={setChecked} />

Checked by default (defaultChecked)

Live Mode

Use the variant="live" prop to display the switch with an orange background when checked, useful for indicating live or active states.

Live mode (on)

<Switch variant="live" defaultChecked />

API Reference

Switch

The Switch component wraps Radix UI's Switch and displays a control for toggling between two states.

asChildboolean

Default: -

disabledboolean

Default: -

type"button" | "submit" | "reset"

Default: -

size"default" | "sm"

Default: default

variant"default" | "live"

Default: default

Prop	Type	Default	Description
asChild	boolean	-	-
disabled	boolean	-	-
type	"button" \| "submit" \| "reset"	-	-
size	"default" \| "sm"	default	-
variant	"default" \| "live"	default	-

Switch

Create a switch.tsx file and paste the following code into it.

Check the import paths to ensure they match your project setup.

On this page

Create a `switch.tsx` file and paste the following code into it.