Animated Checkbox

A checkbox with animated transitions and a strike-through effect. It renders a clickable label with a checkmark and a line through the text when checked. It uses spring animations for smooth interactions. Use it for forms or lists requiring visual feedback on selection.

bytom from Spell

Installation

terminal

pnpm dlx layro-cli add @xxtomm/animated-checkbox

npx layro-cli add @xxtomm/animated-checkbox

npx layro-cli add @xxtomm/animated-checkbox

bunx layro-cli add @xxtomm/animated-checkbox

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

"use client";

import { motion } from "motion/react";
import { useState } from "react";
import { cn } from "@/lib/utils";

interface AnimatedCheckboxProps {
  title?: string;
  defaultChecked?: boolean;
  className?: string;
  onCheckedChange?: (checked: boolean) => void;
}

const springTransition = {