"use client"; import { useState } from "react"; import { AnimatePresence, motion } from "framer-motion"; import { Check, X } from "lucide-react"; import { cn } from "@/lib/utils"; export interface CheckboxOption { id: string; label: string; } export function AnimatedCheckboxGroup({ options, className, }: { options: CheckboxOption[]; className?: string; }) { const [selected, setSelected] = useState([]); function toggle(id: string) { setSelected((prev) => prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id] ); } return (

{options.map((opt) => { const checked = selected.includes(opt.id); return ( ); })}

{selected.map((id) => { const opt = options.find((o) => o.id === id); if (!opt) return null; return ( {opt.label} ); })}

); } export default function Demo() { const options: CheckboxOption[] = [ { id: "design", label: "Product design" }, { id: "eng", label: "Engineering" }, { id: "growth", label: "Growth & marketing" }, { id: "support", label: "Customer support" }, ]; return (

); }

Animated Checkbox Group