Checkbox

<div className="flex items-center space-x-2"><input type="checkbox" id="check-0" className="peer h-4 w-4 shrink-0 rounded-sm border ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 checked:text-white border-primary checked:bg-primary checked:border-primary" checked /><label htmlFor="check-0" className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">Primary Option</label></div>

"use client";

import React, { useState } from "react";

interface CheckPrimaryProps {
  label?: string;
  defaultChecked?: boolean;
  onChange?: (checked: boolean) => void;
}

export default function CheckPrimary({
  label = "Accept terms and conditions",
  defaultChecked = false,
  onChange,
}: CheckPrimaryProps) {
  const [checked, setChecked] = useState(defaultChecked);

  const handleChange = () => {
    const next = !checked;
    setChecked(next);
    onChange?.(next);
  };

  return (
    <label className="inline-flex items-center gap-3 cursor-pointer select-none">
      <input
        type="checkbox"
        checked={checked}
        onChange={handleChange}
        className="sr-only"
      />
      <div
        className={`h-5 w-5 rounded-md border flex items-center justify-center transition-all duration-200 ${
          checked
            ? "bg-primary border-primary text-primary-foreground shadow-xs"
            : "border-input bg-background hover:border-primary/50"
        }`}
      >
        {checked && (
          <svg className="h-3 w-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
            <polyline points="20 6 9 17 4 12" />
          </svg>
        )}
      </div>
      <span className="text-xs font-medium text-foreground">{label}</span>
    </label>
  );
}

"use client";

import React from "react";
import { motion } from "framer-motion";

export default function AnimatedCheckPrimary() {
  return (
    <motion.div
      initial={{ opacity: 0, scale: 0.96 }}
      animate={{ opacity: 1, scale: 1 }}
      whileHover={{ scale: 1.02 }}
      whileTap={{ scale: 0.98 }}
      transition={{ type: "spring", stiffness: 350, damping: 25 }}
      className="cursor-pointer"
    >
      <div className="flex items-center space-x-2"><input type="checkbox" id="check-0" className="peer h-4 w-4 shrink-0 rounded-sm border ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 checked:text-white border-primary checked:bg-primary checked:border-primary" checked /><label htmlFor="check-0" className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">Primary Option</label></div>
    </motion.div>
  );
}

<div className="flex items-center space-x-2"><input type="checkbox" id="check-1" className="peer h-4 w-4 shrink-0 rounded-sm border ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 checked:text-white border-muted-foreground checked:bg-muted-foreground checked:border-muted-foreground" checked /><label htmlFor="check-1" className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">Secondary Option</label></div>

"use client";

import React, { useState } from "react";

interface CheckSecondaryProps {
  label?: string;
  defaultChecked?: boolean;
  onChange?: (checked: boolean) => void;
}

export default function CheckSecondary({
  label = "Accept terms and conditions",
  defaultChecked = false,
  onChange,
}: CheckSecondaryProps) {
  const [checked, setChecked] = useState(defaultChecked);

  const handleChange = () => {
    const next = !checked;
    setChecked(next);
    onChange?.(next);
  };

  return (
    <label className="inline-flex items-center gap-3 cursor-pointer select-none">
      <input
        type="checkbox"
        checked={checked}
        onChange={handleChange}
        className="sr-only"
      />
      <div
        className={`h-5 w-5 rounded-md border flex items-center justify-center transition-all duration-200 ${
          checked
            ? "bg-primary border-primary text-primary-foreground shadow-xs"
            : "border-input bg-background hover:border-primary/50"
        }`}
      >
        {checked && (
          <svg className="h-3 w-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
            <polyline points="20 6 9 17 4 12" />
          </svg>
        )}
      </div>
      <span className="text-xs font-medium text-foreground">{label}</span>
    </label>
  );
}

"use client";

import React from "react";
import { motion } from "framer-motion";

export default function AnimatedCheckSecondary() {
  return (
    <motion.div
      initial={{ opacity: 0, scale: 0.96 }}
      animate={{ opacity: 1, scale: 1 }}
      whileHover={{ scale: 1.02 }}
      whileTap={{ scale: 0.98 }}
      transition={{ type: "spring", stiffness: 350, damping: 25 }}
      className="cursor-pointer"
    >
      <div className="flex items-center space-x-2"><input type="checkbox" id="check-1" className="peer h-4 w-4 shrink-0 rounded-sm border ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 checked:text-white border-muted-foreground checked:bg-muted-foreground checked:border-muted-foreground" checked /><label htmlFor="check-1" className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">Secondary Option</label></div>
    </motion.div>
  );
}

<div className="flex items-center space-x-2"><input type="checkbox" id="check-2" className="peer h-4 w-4 shrink-0 rounded-sm border ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 checked:text-white border-red-500 checked:bg-red-500 checked:border-red-500" checked /><label htmlFor="check-2" className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">Destructive Option</label></div>

"use client";

import React, { useState } from "react";

interface CheckDestructiveProps {
  label?: string;
  defaultChecked?: boolean;
  onChange?: (checked: boolean) => void;
}

export default function CheckDestructive({
  label = "Accept terms and conditions",
  defaultChecked = false,
  onChange,
}: CheckDestructiveProps) {
  const [checked, setChecked] = useState(defaultChecked);

  const handleChange = () => {
    const next = !checked;
    setChecked(next);
    onChange?.(next);
  };

  return (
    <label className="inline-flex items-center gap-3 cursor-pointer select-none">
      <input
        type="checkbox"
        checked={checked}
        onChange={handleChange}
        className="sr-only"
      />
      <div
        className={`h-5 w-5 rounded-md border flex items-center justify-center transition-all duration-200 ${
          checked
            ? "bg-primary border-primary text-primary-foreground shadow-xs"
            : "border-input bg-background hover:border-primary/50"
        }`}
      >
        {checked && (
          <svg className="h-3 w-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
            <polyline points="20 6 9 17 4 12" />
          </svg>
        )}
      </div>
      <span className="text-xs font-medium text-foreground">{label}</span>
    </label>
  );
}

"use client";

import React from "react";
import { motion } from "framer-motion";

export default function AnimatedCheckDestructive() {
  return (
    <motion.div
      initial={{ opacity: 0, scale: 0.96 }}
      animate={{ opacity: 1, scale: 1 }}
      whileHover={{ scale: 1.02 }}
      whileTap={{ scale: 0.98 }}
      transition={{ type: "spring", stiffness: 350, damping: 25 }}
      className="cursor-pointer"
    >
      <div className="flex items-center space-x-2"><input type="checkbox" id="check-2" className="peer h-4 w-4 shrink-0 rounded-sm border ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 checked:text-white border-red-500 checked:bg-red-500 checked:border-red-500" checked /><label htmlFor="check-2" className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">Destructive Option</label></div>
    </motion.div>
  );
}

<div className="flex items-center space-x-2"><input type="checkbox" id="check-3" className="peer h-4 w-4 shrink-0 rounded-sm border ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 checked:text-white border-green-500 checked:bg-green-500 checked:border-green-500" checked /><label htmlFor="check-3" className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">Success Option</label></div>

"use client";

import React, { useState } from "react";

interface CheckSuccessProps {
  label?: string;
  defaultChecked?: boolean;
  onChange?: (checked: boolean) => void;
}

export default function CheckSuccess({
  label = "Accept terms and conditions",
  defaultChecked = false,
  onChange,
}: CheckSuccessProps) {
  const [checked, setChecked] = useState(defaultChecked);

  const handleChange = () => {
    const next = !checked;
    setChecked(next);
    onChange?.(next);
  };

  return (
    <label className="inline-flex items-center gap-3 cursor-pointer select-none">
      <input
        type="checkbox"
        checked={checked}
        onChange={handleChange}
        className="sr-only"
      />
      <div
        className={`h-5 w-5 rounded-md border flex items-center justify-center transition-all duration-200 ${
          checked
            ? "bg-primary border-primary text-primary-foreground shadow-xs"
            : "border-input bg-background hover:border-primary/50"
        }`}
      >
        {checked && (
          <svg className="h-3 w-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
            <polyline points="20 6 9 17 4 12" />
          </svg>
        )}
      </div>
      <span className="text-xs font-medium text-foreground">{label}</span>
    </label>
  );
}

"use client";

import React from "react";
import { motion } from "framer-motion";

export default function AnimatedCheckSuccess() {
  return (
    <motion.div
      initial={{ opacity: 0, scale: 0.96 }}
      animate={{ opacity: 1, scale: 1 }}
      whileHover={{ scale: 1.02 }}
      whileTap={{ scale: 0.98 }}
      transition={{ type: "spring", stiffness: 350, damping: 25 }}
      className="cursor-pointer"
    >
      <div className="flex items-center space-x-2"><input type="checkbox" id="check-3" className="peer h-4 w-4 shrink-0 rounded-sm border ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 checked:text-white border-green-500 checked:bg-green-500 checked:border-green-500" checked /><label htmlFor="check-3" className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">Success Option</label></div>
    </motion.div>
  );
}

<div className="flex items-center space-x-2"><input type="checkbox" id="check-4" className="peer h-4 w-4 shrink-0 rounded-sm border ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 checked:text-white border-yellow-500 checked:bg-yellow-500 checked:border-yellow-500" checked /><label htmlFor="check-4" className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">Warning Option</label></div>

"use client";

import React, { useState } from "react";

interface CheckWarningProps {
  label?: string;
  defaultChecked?: boolean;
  onChange?: (checked: boolean) => void;
}

export default function CheckWarning({
  label = "Accept terms and conditions",
  defaultChecked = false,
  onChange,
}: CheckWarningProps) {
  const [checked, setChecked] = useState(defaultChecked);

  const handleChange = () => {
    const next = !checked;
    setChecked(next);
    onChange?.(next);
  };

  return (
    <label className="inline-flex items-center gap-3 cursor-pointer select-none">
      <input
        type="checkbox"
        checked={checked}
        onChange={handleChange}
        className="sr-only"
      />
      <div
        className={`h-5 w-5 rounded-md border flex items-center justify-center transition-all duration-200 ${
          checked
            ? "bg-primary border-primary text-primary-foreground shadow-xs"
            : "border-input bg-background hover:border-primary/50"
        }`}
      >
        {checked && (
          <svg className="h-3 w-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
            <polyline points="20 6 9 17 4 12" />
          </svg>
        )}
      </div>
      <span className="text-xs font-medium text-foreground">{label}</span>
    </label>
  );
}

"use client";

import React from "react";
import { motion } from "framer-motion";

export default function AnimatedCheckWarning() {
  return (
    <motion.div
      initial={{ opacity: 0, scale: 0.96 }}
      animate={{ opacity: 1, scale: 1 }}
      whileHover={{ scale: 1.02 }}
      whileTap={{ scale: 0.98 }}
      transition={{ type: "spring", stiffness: 350, damping: 25 }}
      className="cursor-pointer"
    >
      <div className="flex items-center space-x-2"><input type="checkbox" id="check-4" className="peer h-4 w-4 shrink-0 rounded-sm border ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 checked:text-white border-yellow-500 checked:bg-yellow-500 checked:border-yellow-500" checked /><label htmlFor="check-4" className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">Warning Option</label></div>
    </motion.div>
  );
}

<div className="flex items-center space-x-2"><input type="checkbox" id="check-5" className="peer h-4 w-4 shrink-0 rounded-sm border ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 checked:text-white border-blue-500 checked:bg-blue-500 checked:border-blue-500" checked /><label htmlFor="check-5" className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">Info Option</label></div>

"use client";

import React, { useState } from "react";

interface CheckInfoProps {
  label?: string;
  defaultChecked?: boolean;
  onChange?: (checked: boolean) => void;
}

export default function CheckInfo({
  label = "Accept terms and conditions",
  defaultChecked = false,
  onChange,
}: CheckInfoProps) {
  const [checked, setChecked] = useState(defaultChecked);

  const handleChange = () => {
    const next = !checked;
    setChecked(next);
    onChange?.(next);
  };

  return (
    <label className="inline-flex items-center gap-3 cursor-pointer select-none">
      <input
        type="checkbox"
        checked={checked}
        onChange={handleChange}
        className="sr-only"
      />
      <div
        className={`h-5 w-5 rounded-md border flex items-center justify-center transition-all duration-200 ${
          checked
            ? "bg-primary border-primary text-primary-foreground shadow-xs"
            : "border-input bg-background hover:border-primary/50"
        }`}
      >
        {checked && (
          <svg className="h-3 w-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
            <polyline points="20 6 9 17 4 12" />
          </svg>
        )}
      </div>
      <span className="text-xs font-medium text-foreground">{label}</span>
    </label>
  );
}

"use client";

import React from "react";
import { motion } from "framer-motion";

export default function AnimatedCheckInfo() {
  return (
    <motion.div
      initial={{ opacity: 0, scale: 0.96 }}
      animate={{ opacity: 1, scale: 1 }}
      whileHover={{ scale: 1.02 }}
      whileTap={{ scale: 0.98 }}
      transition={{ type: "spring", stiffness: 350, damping: 25 }}
      className="cursor-pointer"
    >
      <div className="flex items-center space-x-2"><input type="checkbox" id="check-5" className="peer h-4 w-4 shrink-0 rounded-sm border ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 checked:text-white border-blue-500 checked:bg-blue-500 checked:border-blue-500" checked /><label htmlFor="check-5" className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">Info Option</label></div>
    </motion.div>
  );
}

<div className="flex items-center space-x-2"><input type="checkbox" id="check-6" className="peer h-4 w-4 shrink-0 rounded-sm border ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 checked:text-white border-purple-500 checked:bg-purple-500 checked:border-purple-500" checked /><label htmlFor="check-6" className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">Purple Option</label></div>

"use client";

import React, { useState } from "react";

interface CheckPurpleProps {
  label?: string;
  defaultChecked?: boolean;
  onChange?: (checked: boolean) => void;
}

export default function CheckPurple({
  label = "Accept terms and conditions",
  defaultChecked = false,
  onChange,
}: CheckPurpleProps) {
  const [checked, setChecked] = useState(defaultChecked);

  const handleChange = () => {
    const next = !checked;
    setChecked(next);
    onChange?.(next);
  };

  return (
    <label className="inline-flex items-center gap-3 cursor-pointer select-none">
      <input
        type="checkbox"
        checked={checked}
        onChange={handleChange}
        className="sr-only"
      />
      <div
        className={`h-5 w-5 rounded-md border flex items-center justify-center transition-all duration-200 ${
          checked
            ? "bg-primary border-primary text-primary-foreground shadow-xs"
            : "border-input bg-background hover:border-primary/50"
        }`}
      >
        {checked && (
          <svg className="h-3 w-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
            <polyline points="20 6 9 17 4 12" />
          </svg>
        )}
      </div>
      <span className="text-xs font-medium text-foreground">{label}</span>
    </label>
  );
}

"use client";

import React from "react";
import { motion } from "framer-motion";

export default function AnimatedCheckPurple() {
  return (
    <motion.div
      initial={{ opacity: 0, scale: 0.96 }}
      animate={{ opacity: 1, scale: 1 }}
      whileHover={{ scale: 1.02 }}
      whileTap={{ scale: 0.98 }}
      transition={{ type: "spring", stiffness: 350, damping: 25 }}
      className="cursor-pointer"
    >
      <div className="flex items-center space-x-2"><input type="checkbox" id="check-6" className="peer h-4 w-4 shrink-0 rounded-sm border ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 checked:text-white border-purple-500 checked:bg-purple-500 checked:border-purple-500" checked /><label htmlFor="check-6" className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">Purple Option</label></div>
    </motion.div>
  );
}

<div className="flex items-center space-x-2"><input type="checkbox" id="check-7" className="peer h-4 w-4 shrink-0 rounded-sm border ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 checked:text-white border-orange-500 checked:bg-orange-500 checked:border-orange-500" checked /><label htmlFor="check-7" className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">Orange Option</label></div>

"use client";

import React, { useState } from "react";

interface CheckOrangeProps {
  label?: string;
  defaultChecked?: boolean;
  onChange?: (checked: boolean) => void;
}

export default function CheckOrange({
  label = "Accept terms and conditions",
  defaultChecked = false,
  onChange,
}: CheckOrangeProps) {
  const [checked, setChecked] = useState(defaultChecked);

  const handleChange = () => {
    const next = !checked;
    setChecked(next);
    onChange?.(next);
  };

  return (
    <label className="inline-flex items-center gap-3 cursor-pointer select-none">
      <input
        type="checkbox"
        checked={checked}
        onChange={handleChange}
        className="sr-only"
      />
      <div
        className={`h-5 w-5 rounded-md border flex items-center justify-center transition-all duration-200 ${
          checked
            ? "bg-primary border-primary text-primary-foreground shadow-xs"
            : "border-input bg-background hover:border-primary/50"
        }`}
      >
        {checked && (
          <svg className="h-3 w-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
            <polyline points="20 6 9 17 4 12" />
          </svg>
        )}
      </div>
      <span className="text-xs font-medium text-foreground">{label}</span>
    </label>
  );
}

"use client";

import React from "react";
import { motion } from "framer-motion";

export default function AnimatedCheckOrange() {
  return (
    <motion.div
      initial={{ opacity: 0, scale: 0.96 }}
      animate={{ opacity: 1, scale: 1 }}
      whileHover={{ scale: 1.02 }}
      whileTap={{ scale: 0.98 }}
      transition={{ type: "spring", stiffness: 350, damping: 25 }}
      className="cursor-pointer"
    >
      <div className="flex items-center space-x-2"><input type="checkbox" id="check-7" className="peer h-4 w-4 shrink-0 rounded-sm border ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 checked:text-white border-orange-500 checked:bg-orange-500 checked:border-orange-500" checked /><label htmlFor="check-7" className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">Orange Option</label></div>
    </motion.div>
  );
}

<div className="flex items-center space-x-2"><input type="checkbox" id="check-8" className="peer h-4 w-4 shrink-0 rounded-sm border ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 checked:text-white border-pink-500 checked:bg-pink-500 checked:border-pink-500" checked /><label htmlFor="check-8" className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">Pink Option</label></div>

"use client";

import React, { useState } from "react";

interface CheckPinkProps {
  label?: string;
  defaultChecked?: boolean;
  onChange?: (checked: boolean) => void;
}

export default function CheckPink({
  label = "Accept terms and conditions",
  defaultChecked = false,
  onChange,
}: CheckPinkProps) {
  const [checked, setChecked] = useState(defaultChecked);

  const handleChange = () => {
    const next = !checked;
    setChecked(next);
    onChange?.(next);
  };

  return (
    <label className="inline-flex items-center gap-3 cursor-pointer select-none">
      <input
        type="checkbox"
        checked={checked}
        onChange={handleChange}
        className="sr-only"
      />
      <div
        className={`h-5 w-5 rounded-md border flex items-center justify-center transition-all duration-200 ${
          checked
            ? "bg-primary border-primary text-primary-foreground shadow-xs"
            : "border-input bg-background hover:border-primary/50"
        }`}
      >
        {checked && (
          <svg className="h-3 w-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
            <polyline points="20 6 9 17 4 12" />
          </svg>
        )}
      </div>
      <span className="text-xs font-medium text-foreground">{label}</span>
    </label>
  );
}

"use client";

import React from "react";
import { motion } from "framer-motion";

export default function AnimatedCheckPink() {
  return (
    <motion.div
      initial={{ opacity: 0, scale: 0.96 }}
      animate={{ opacity: 1, scale: 1 }}
      whileHover={{ scale: 1.02 }}
      whileTap={{ scale: 0.98 }}
      transition={{ type: "spring", stiffness: 350, damping: 25 }}
      className="cursor-pointer"
    >
      <div className="flex items-center space-x-2"><input type="checkbox" id="check-8" className="peer h-4 w-4 shrink-0 rounded-sm border ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 checked:text-white border-pink-500 checked:bg-pink-500 checked:border-pink-500" checked /><label htmlFor="check-8" className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">Pink Option</label></div>
    </motion.div>
  );
}

<div className="flex items-center space-x-2"><input type="checkbox" id="check-9" className="peer h-4 w-4 shrink-0 rounded-sm border ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 checked:text-white border-teal-500 checked:bg-teal-500 checked:border-teal-500" checked /><label htmlFor="check-9" className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">Teal Option</label></div>

"use client";

import React, { useState } from "react";

interface CheckTealProps {
  label?: string;
  defaultChecked?: boolean;
  onChange?: (checked: boolean) => void;
}

export default function CheckTeal({
  label = "Accept terms and conditions",
  defaultChecked = false,
  onChange,
}: CheckTealProps) {
  const [checked, setChecked] = useState(defaultChecked);

  const handleChange = () => {
    const next = !checked;
    setChecked(next);
    onChange?.(next);
  };

  return (
    <label className="inline-flex items-center gap-3 cursor-pointer select-none">
      <input
        type="checkbox"
        checked={checked}
        onChange={handleChange}
        className="sr-only"
      />
      <div
        className={`h-5 w-5 rounded-md border flex items-center justify-center transition-all duration-200 ${
          checked
            ? "bg-primary border-primary text-primary-foreground shadow-xs"
            : "border-input bg-background hover:border-primary/50"
        }`}
      >
        {checked && (
          <svg className="h-3 w-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
            <polyline points="20 6 9 17 4 12" />
          </svg>
        )}
      </div>
      <span className="text-xs font-medium text-foreground">{label}</span>
    </label>
  );
}

"use client";

import React from "react";
import { motion } from "framer-motion";

export default function AnimatedCheckTeal() {
  return (
    <motion.div
      initial={{ opacity: 0, scale: 0.96 }}
      animate={{ opacity: 1, scale: 1 }}
      whileHover={{ scale: 1.02 }}
      whileTap={{ scale: 0.98 }}
      transition={{ type: "spring", stiffness: 350, damping: 25 }}
      className="cursor-pointer"
    >
      <div className="flex items-center space-x-2"><input type="checkbox" id="check-9" className="peer h-4 w-4 shrink-0 rounded-sm border ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 checked:text-white border-teal-500 checked:bg-teal-500 checked:border-teal-500" checked /><label htmlFor="check-9" className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">Teal Option</label></div>
    </motion.div>
  );
}