Skip to content
All Taste components

Forms

Switch

An on/off setting that takes effect straight away.

on · off · with label

Booking reminders
A WhatsApp message the day before.
Marketing email
News and offers, once a month.
export function Switch({ checked, onCheckedChange, label }:
  { checked: boolean; onCheckedChange: (v: boolean) => void; label: string }) {
  return (
    <button
      type="button"
      role="switch"
      aria-checked={checked}
      aria-label={label}
      onClick={() => onCheckedChange(!checked)}
      className="relative h-[22px] w-[38px] shrink-0 rounded-full bg-border-strong transition-colors aria-checked:bg-primary"
    >
      <span className="absolute left-[3px] top-[3px] size-4 rounded-full bg-bg shadow-sm transition-[left] duration-200 [[aria-checked=true]>&]:left-[19px]" />
    </button>
  );
}

The code uses the Taste Tailwind preset. Make yours on the Taste page with Export my system.