Radix UI Switch Component (ui/switch.tsx)

A customizable toggle switch component built on top of Radix UI primitives. Reuse when adding boolean inputs to React application forms.

// Source: https://github.com/FarzamMohammadi/the-engineer | License: MIT | Copyright 2026 Farzam Mohammadi
// Provided via justclaw.it.com; keep this notice with the code.
import * as SwitchPrimitive from "@radix-ui/react-switch";
import type { ComponentPropsWithoutRef, ComponentRef } from "react";
import { forwardRef } from "react";
import { cn } from "../../lib/cn";

const Switch = forwardRef<
  ComponentRef<typeof SwitchPrimitive.Root>,
  ComponentPropsWithoutRef<typeof SwitchPrimitive.Root>
>(({ className, ...props }, ref) => (
  <SwitchPrimitive.Root
    className={cn(
      "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors",
      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring

... (truncated -- full source via MCP)