ComponentsCSS

Switch

iOS-style toggle whose thumb stretches while pressed.

Deploy notificationsEmail me when a production deploy finishes.

Comment mentionsOnly when someone mentions me.

Installation

npx shadcn@latest add https://ui-collections.vercel.app/r/glass/switch.json

Also installs the theme, cn(). Packages: clsx, tailwind-merge, radix-ui.

Usage

switch-demo.tsx

import { Switch } from "@/registry/kit/ui/switch";

const options = [
  { id: "notify-deploys", label: "Deploy notifications", hint: "Email me when a production deploy finishes.", on: true },
  { id: "notify-comments", label: "Comment mentions", hint: "Only when someone mentions me.", on: false },
];

export default function SwitchDemo() {
  return (
    <div className="surface grid w-full max-w-md gap-1 rounded-card p-3">
      {options.map((o) => (
        <div key={o.id} className="flex items-center justify-between gap-6 rounded-field p-3">
          <label htmlFor={o.id} className="grid gap-0.5">
            <span className="text-sm">{o.label}</span>
            <span className="text-xs text-muted">{o.hint}</span>
          </label>
          <Switch id={o.id} defaultChecked={o.on} />
        </div>
      ))}
    </div>
  );
}

API

checked / defaultChecked / onCheckedChange

boolean

Radix Switch state.

Source

components/ui/switch.tsx

"use client";

import { Switch as SwitchPrimitive } from "radix-ui";
import type { ComponentProps } from "react";

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

/** iOS-style toggle. The thumb stretches while pressed. */
export function Switch({ className, ...props }: ComponentProps<typeof SwitchPrimitive.Root>) {
  return (
    <SwitchPrimitive.Root
      className={cn(
        "group/switch inline-flex h-7 w-12 shrink-0 cursor-pointer items-center rounded-full p-0.5",
        "bg-fg/12 shadow-[inset_0_1px_2px_rgb(0_0_0/0.22)] transition-colors duration-300 ease-theme",
        "data-[state=unchecked]:hover:bg-fg/[0.18] data-[state=checked]:bg-accent/85 data-[state=checked]:hover:bg-accent",
        "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent",
        "disabled:cursor-not-allowed disabled:opacity-50",
        className,
      )}
      {...props}
    >
      <SwitchPrimitive.Thumb
        className={cn(
          "block h-6 w-6 rounded-full bg-white shadow-[0_2px_6px_rgb(0_0_0/0.3)]",
          "transition-[translate,width] duration-300 ease-theme",
          "group-active/switch:w-7 data-[state=checked]:translate-x-5 data-[state=checked]:group-active/switch:translate-x-4",
        )}
      />
    </SwitchPrimitive.Root>
  );
}

Usage

switch-demo.tsx

import { Switch } from "@/registry/kit/ui/switch";

const options = [
  { id: "notify-deploys", label: "Deploy notifications", hint: "Email me when a production deploy finishes.", on: true },
  { id: "notify-comments", label: "Comment mentions", hint: "Only when someone mentions me.", on: false },
];

export default function SwitchDemo() {
  return (
    <div className="surface grid w-full max-w-md gap-1 rounded-card p-3">
      {options.map((o) => (
        <div key={o.id} className="flex items-center justify-between gap-6 rounded-field p-3">
          <label htmlFor={o.id} className="grid gap-0.5">
            <span className="text-sm">{o.label}</span>
            <span className="text-xs text-muted">{o.hint}</span>
          </label>
          <Switch id={o.id} defaultChecked={o.on} />
        </div>
      ))}
    </div>
  );
}

Source

components/ui/switch.tsx

"use client";

import { Switch as SwitchPrimitive } from "radix-ui";
import type { ComponentProps } from "react";

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

/** iOS-style toggle. The thumb stretches while pressed. */
export function Switch({ className, ...props }: ComponentProps<typeof SwitchPrimitive.Root>) {
  return (
    <SwitchPrimitive.Root
      className={cn(
        "group/switch inline-flex h-7 w-12 shrink-0 cursor-pointer items-center rounded-full p-0.5",
        "bg-fg/12 shadow-[inset_0_1px_2px_rgb(0_0_0/0.22)] transition-colors duration-300 ease-theme",
        "data-[state=unchecked]:hover:bg-fg/[0.18] data-[state=checked]:bg-accent/85 data-[state=checked]:hover:bg-accent",
        "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent",
        "disabled:cursor-not-allowed disabled:opacity-50",
        className,
      )}
      {...props}
    >
      <SwitchPrimitive.Thumb
        className={cn(
          "block h-6 w-6 rounded-full bg-white shadow-[0_2px_6px_rgb(0_0_0/0.3)]",
          "transition-[translate,width] duration-300 ease-theme",
          "group-active/switch:w-7 data-[state=checked]:translate-x-5 data-[state=checked]:group-active/switch:translate-x-4",
        )}
      />
    </SwitchPrimitive.Root>
  );
}