Animated Checkbox

1"use client";
2 
3import { motion } from "framer-motion";
4import { Check } from "lucide-react";
5import { useState } from "react";
6 
7export function AnimatedCheckbox() {
8  const [isChecked, setIsChecked] = useState(false);
9 
10  return (
11    <div className="flex flex-col gap-4">
12      {[
13        "Subscribe to newsletter",
14        "Agree to terms and conditions",
15        "Enable notifications",
16      ].map((label, index) => (
17        <label key={label} className="flex cursor-pointer items-center gap-3">
18          <motion.div
19            className="relative flex h-6 w-6 items-center justify-center rounded border-2"
20            style={{
21              borderColor:
22                index === 0 && isChecked
23                  ? "rgb(var(--accent))"
24                  : "rgb(var(--border))",
25              backgroundColor:
26                index === 0 && isChecked ? "rgb(var(--accent))" : "transparent",
27            }}
28            whileHover={{ scale: 1.1 }}
29            whileTap={{ scale: 0.95 }}
30            onClick={() => index === 0 && setIsChecked(!isChecked)}
31          >
32            <motion.div
33              initial={false}
34              animate={{
35                scale: index === 0 && isChecked ? 1 : 0,
36                opacity: index === 0 && isChecked ? 1 : 0,
37              }}
38              transition={{ type: "spring", stiffness: 500, damping: 30 }}
39            >
40              <Check
41                className="h-4 w-4 text-[var(--muted-foreground)]"
42                strokeWidth={3}
43              />
44            </motion.div>
45          </motion.div>
46          <span className="text-sm">{label}</span>
47        </label>
48      ))}
49    </div>
50  );
51}