Liquid Toggle

npm install motion

"use client";

import { useId, useState } from "react";
import { motion, useReducedMotion } from "motion/react";

type LiquidToggleProps = {
  /** Visible label, also used as the accessible name. */
  label: string;
  /** Controlled state. Leave unset to let the toggle manage itself. */
  checked?: boolean;
  defaultChecked?: boolean;
  onChange?: (checked: boolean) => void;
  /** Track height in pixels; the width follows. */
  size?: number;
  /** Track colour when on. */
  color?: string;
  className?: string;
};

export function LiquidToggle({
  label,
  checked,
  defaultChecked = false,
  onChange,
  size = 28,
  color = "#0E7C86",
  className = "",
}: LiquidToggleProps) {
  const [internal, setInternal] = useState(defaultChecked);
  const on = checked ?? internal;
  const reduceMotion = useReducedMotion();
  const id = useId();
  const pad = 3;
  const knob = size - pad * 2;
  const travel = size * 0.85;

  function toggle() {
    setInternal(!on);
    onChange?.(!on);
  }

  return (
    <label htmlFor={id} className={`inline-flex cursor-pointer select-none items-center gap-3 text-sm text-[#DCE3E2] ${className}`}>
      <button
        id={id}
        type="button"
        role="switch"
        aria-checked={on}
        onClick={toggle}
        className="relative shrink-0 rounded-full border border-white/10 transition-colors duration-300 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#5FAEB4]"
        style={{ width: size + travel, height: size, backgroundColor: on ? color : "#1D2727" }}
      >
        {/* the knob stretches toward where it is going, then settles: the "liquid" part */}
        <motion.span
          aria-hidden
          className="absolute rounded-full bg-[#F6F1E8] shadow-md shadow-black/30"
          style={{ top: pad - 1, left: pad - 1, height: knob, width: knob, originX: on ? 1 : 0 }}
          initial={false}
          animate={{ x: on ? travel : 0, scaleX: reduceMotion ? 1 : [1, 1.45, 1] }}
          transition={
            reduceMotion
              ? { duration: 0 }
              : { x: { type: "spring", bounce: 0.3, duration: 0.45 }, scaleX: { duration: 0.4, times: [0, 0.4, 1] } }
          }
        />
      </button>
      {label}
    </label>
  );
}