Animated Checkbox

check x spring

Checkbox with spring-animated check mark. From Animate UI.

checkboxanimatedspringanimateui

Accept terms

Code

checkbox-animated.tsx

"use client";
import { useState } from "react";
import { Check } from "lucide-react";

export function AnimatedCheckbox({ label }: { label?: string }) {
  const [checked, setChecked] = useState(false);
  return (
    <label className="flex cursor-pointer items-center gap-3">
      <input type="checkbox" checked={checked} onChange={e => setChecked(e.target.checked)} className="sr-only" />
      <div className={`grid size-6 place-items-center rounded border-2 transition-colors ${checked ? "border-brand bg-brand" : "border-border"}`}>
        <Check className={`size-4 text-white transition-transform ${checked ? "scale-100" : "scale-0"}`} />
      </div>
      {label && <span className="text-sm">{label}</span>}
    </label>
  );
}

Use it in another build

Paste the code into a component file, keep your project tokens (background, brand, radius) and it themes itself. Or tell Claude Code: “add the Animated Checkbox component and wire it to my accent.”