Skip to content
Caseroom

Caseroom

Components and blocks in black and white.

Components · Forms

Switch

An on/off setting: a native checkbox with role=switch. No JavaScript.

0.39% of the 2,062 sites in The UI Index have a toggle (8 sites).

Both previews render the same markup; the HTML tab below is that markup without a framework.

Install

React
npx shadcn@latest add https://www.themes.dev/caseroom/r/switch.json
Astro
npx shadcn@latest add https://www.themes.dev/caseroom/r/astro/switch.json

Or copy the files below into your project. They need clsx, tailwind-merge, and the Caseroom theme. The HTML needs only the compiled CSS.

switch.tsx
import type { InputHTMLAttributes } from 'react';
import { cn } from '@/lib/utils';
import { switchClasses } from './switch.variants';

export type SwitchProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'role'>;

/** An on/off setting that applies at once. A native checkbox with role="switch": no JavaScript needed. */
export function Switch({ className, ...props }: SwitchProps) {
  return <input type="checkbox" role="switch" className={cn(switchClasses, className)} {...props} />;
}
switch.variants.ts
export const switchClasses =
  "relative inline-flex h-5 w-9 shrink-0 cursor-pointer appearance-none items-center rounded-full border border-input bg-muted transition-colors before:absolute before:left-0.5 before:size-3.5 before:rounded-full before:bg-foreground/70 before:transition-[transform,width] before:content-[''] checked:border-primary checked:bg-primary checked:before:translate-x-4 checked:before:bg-primary-foreground enabled:not-checked:hover:border-foreground enabled:not-checked:hover:before:bg-foreground checked:enabled:hover:border-[color-mix(in_oklab,var(--primary)_var(--hover-amount),var(--background))] checked:enabled:hover:bg-[color-mix(in_oklab,var(--primary)_var(--hover-amount),var(--background))] checked:enabled:active:border-[color-mix(in_oklab,var(--primary)_var(--press-amount),var(--press-mix))] checked:enabled:active:bg-[color-mix(in_oklab,var(--primary)_var(--press-amount),var(--press-mix))] checked:enabled:hover:before:bg-primary-foreground enabled:active:before:w-4.5 checked:enabled:active:before:translate-x-3 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50";