Switch

A simple switch component on top of the native checkbox.

import { Switch } from '@/components/switch';

export default function SwitchPreview() {
  return <Switch />;
}

Source Code

import { cva } from '@/lib/utils/classnames';

type SwitchVariant = 'default' | 'brand';

const switchStyle = cva({
  base: [
    'appearance-none',
    'relative h-6 w-11 cursor-pointer rounded-xl transition',
    // circle (knob)
    'before:absolute before:top-0.5 before:left-0.5 before:size-5 before:rounded-xl before:bg-control-knob before:transition-transform before:duration-(--duration-base) before:ease-(--ease)',
    // disabled
    'disabled:before:opacity-30',
    // focus
    'focus-visible:ring-(length:--ring-width) focus-visible:outline-none focus-visible:ring-ring',
    // stretch animation
    'before:origin-left active:before:scale-x-110 active:before:rounded-[--spacing(2.25)] active:checked:before:origin-right',
    // shared checked behaviour — knob slides; per-variant tracks override bg below
    'checked:before:translate-x-full',
  ],
  variants: {
    variant: {
      // default — foreground accent
      default: 'bg-foreground/20 checked:bg-foreground',
      // brand — ConnectKit blue accent
      brand:
        'bg-(--color-background-secondary) checked:bg-(--color-border-hover)',
    },
  },
  defaultVariants: { variant: 'default' },
});

interface SwitchProps
  extends Omit<React.ComponentPropsWithRef<'input'>, 'type'> {
  variant?: SwitchVariant;
}

const Switch = ({ className, variant, ...props }: SwitchProps) => {
  return (
    <input
      type="checkbox"
      className={switchStyle({ variant, className })}
      {...props}
    />
  );
};

export type { SwitchProps };
export { Switch };

Server component. No 'use client' — native checkbox switch with cva styling; forwards props only.

API Reference

Extends the native input element with type="checkbox".

Examples

Simple

Basic usage of the switch component.

import { Switch } from '@/components/switch';

export default function SwitchPreview() {
  return <Switch />;
}

Disabled

Example of a disabled switch.

import { Switch } from '@/components/switch';

export default function SwitchDisabled() {
  return <Switch disabled />;
}

Disabled Checked

Example of a disabled switch in the checked state.

import { Switch } from '@/components/switch';

export default function SwitchDisabledChecked() {
  return <Switch disabled checked />;
}

Custom style

Example showing custom styling options.

import { Switch } from '@/components/switch';

export default function SwitchCustomStyle() {
  return <Switch className="bg-blue-400/20 checked:bg-blue-500" />;
}

Best Practices

Usage:
- Use for immediate actions
- Provide clear labels
- Consider state persistence
Accessibility:
- Use clear state indicators

Surface

Table