Animated Checkbox

The check stroke draws itself on.

Accept terms and conditionsYou agree to our Terms of Service and Privacy Policy.

Installation

CLI

npx shadcn@latest add https://hantui-theta.vercel.app/r/animated-checkbox.json

Manual

Install the dependencies

npm install clsx motion radix-ui tailwind-merge

Add the shared helpers

Components use cn() from lib/utils.ts and the motion tokens below. See Installation if you have not set them up yet.

lib/motion.ts

import type { Transition, Variants } from "motion/react";

/** Durations in seconds. */
export const duration = {
  instant: 0.1,
  quick: 0.18,
  base: 0.28,
  slow: 0.45,
} as const;

/** Cubic-bezier curves. */
export const ease = {
  /** Entering, UI response. */
  out: [0.22, 1, 0.36, 1],
  /** Moving on screen. */
  inOut: [0.65, 0, 0.35, 1],
  /** Sheets and the mobile menu. */
  drawer: [0.32, 0.72, 0, 1],
} as const;

/** Everyday UI: presses, icon swaps, popovers and modals. Exits run at `exitFactor` of the enter. */
export const ui = {
  press: { scale: 0.96, duration: 0.12 },
  icon: { type: "spring", duration: 0.3, bounce: 0 },
  popover: { duration: 0.18, ease: ease.out },
  modal: { duration: 0.24, ease: ease.out },
  exitFactor: 0.6,
} as const;

/** Once-per-visit motion on the landing page: hero letters, the reel and the afterimage. */
export const kinetic = {
  heroLetter: { duration: 0.6, ease: ease.out },
  /** Delay per letter, eased so the wave slows toward the end. */
  heroStep: 0.035,
  reelSwap: { type: "spring", duration: 0.5, bounce: 0.1 },
  /** Two afterimages: lag in seconds and opacity of each. */
  ghost: { lag: [0.04, 0.09], opacity: [0.14, 0.06] },
} as const;

/** Spring presets. */
export const spring = {
  snappy: { type: "spring", stiffness: 500, damping: 30 },
  smooth: { type: "spring", stiffness: 260, damping: 26 },
  bouncy: { type: "spring", stiffness: 300, damping: 15 },
} as const satisfies Record<string, Transition>;

/** Stagger between siblings, in seconds (0.03–0.06). */
export const stagger = {
  tight: 0.03,
  base: 0.045,
  loose: 0.06,
} as const;

/** Blur + fade + y-offset. Falls back to a plain fade under reduced motion. */
export function enterVariants(reduceMotion?: boolean | null, y = 8): Variants {
  if (reduceMotion) {
    return {
      hidden: { opacity: 0 },
      visible: { opacity: 1, transition: { duration: duration.base } },
      exit: { opacity: 0, transition: { duration: duration.quick } },
    };
  }
  return {
    hidden: { opacity: 0, y, filter: "blur(4px)" },
    visible: {
      opacity: 1,
      y: 0,
      filter: "blur(0px)",
      transition: { duration: duration.base, ease: ease.out },
    },
    exit: {
      opacity: 0,
      y: -y / 2,
      filter: "blur(4px)",
      transition: { duration: duration.quick, ease: ease.out },
    },
  };
}

/** Scale 0.96 → 1 for popovers, menus and dialogs. */
export function overlayVariants(reduceMotion?: boolean | null): Variants {
  if (reduceMotion) {
    return {
      hidden: { opacity: 0 },
      visible: { opacity: 1, transition: { duration: duration.quick } },
      exit: { opacity: 0, transition: { duration: duration.instant } },
    };
  }
  return {
    hidden: { opacity: 0, scale: 0.96, filter: "blur(2px)" },
    visible: {
      opacity: 1,
      scale: 1,
      filter: "blur(0px)",
      transition: { duration: duration.quick, ease: ease.out },
    },
    exit: {
      opacity: 0,
      scale: 0.96,
      filter: "blur(2px)",
      transition: { duration: duration.instant + 0.02, ease: ease.out },
    },
  };
}

/** Parent variants that stagger their children in. */
export function staggerVariants(gap: number = stagger.base, delayChildren = 0): Variants {
  return {
    hidden: {},
    visible: { transition: { staggerChildren: gap, delayChildren } },
    exit: { transition: { staggerChildren: gap / 2, staggerDirection: -1 } },
  };
}

Copy the source

components/ui/animated-checkbox/animated-checkbox.tsx

"use client";

import { useState, type ComponentProps } from "react";
import { motion, useReducedMotion } from "motion/react";
import { Checkbox as CheckboxPrimitive } from "radix-ui";
import { cn } from "@/lib/utils";
import { duration, ease, spring } from "@/lib/motion";

export type CheckedState = boolean | "indeterminate";

export interface AnimatedCheckboxProps
  extends Omit<ComponentProps<typeof CheckboxPrimitive.Root>, "checked" | "defaultChecked" | "onCheckedChange" | "asChild"> {
  /** Controlled state. "indeterminate" draws a dash. */
  checked?: CheckedState;
  /** Initial state when uncontrolled. @default false */
  defaultChecked?: CheckedState;
  /** Called with the new state when toggled. */
  onCheckedChange?: (checked: CheckedState) => void;
  /** Box size. Every size keeps a 40px hit area. @default "md" */
  size?: "sm" | "md" | "lg";
}

const sizes = {
  sm: { box: "size-4 rounded-[4px] after:-inset-3", icon: "size-3" },
  md: { box: "size-[18px] rounded-[5px] after:-inset-[11px]", icon: "size-3.5" },
  lg: { box: "size-[22px] rounded-[6px] after:-inset-[9px]", icon: "size-4" },
} as const;

export function AnimatedCheckbox({
  checked,
  defaultChecked = false,
  onCheckedChange,
  size = "md",
  className,
  ...props
}: AnimatedCheckboxProps) {
  const [internal, setInternal] = useState<CheckedState>(defaultChecked);
  const state = checked ?? internal;
  const reduceMotion = useReducedMotion();
  const filled = state !== false;
  const draw = (visible: boolean) =>
    reduceMotion
      ? { duration: 0 }
      : visible
        ? { duration: duration.base, ease: ease.out, delay: 0.06 }
        : { duration: duration.instant, ease: ease.out };

  return (
    <CheckboxPrimitive.Root
      checked={state}
      onCheckedChange={(next) => {
        if (checked === undefined) setInternal(next);
        onCheckedChange?.(next);
      }}
      className={cn(
        "relative inline-flex shrink-0 cursor-pointer items-center justify-center border border-input bg-background shadow-xs outline-none",
        "transition-[border-color,box-shadow,transform] duration-150 after:absolute after:content-[''] active:scale-90",
        "hover:border-[color-mix(in_oklab,var(--input),var(--foreground)_25%)] focus-visible:ring-3 focus-visible:ring-ring/30",
        "data-[state=checked]:border-primary data-[state=indeterminate]:border-primary",
        "disabled:cursor-not-allowed disabled:opacity-50 disabled:active:scale-100",
        "aria-invalid:border-destructive",
        sizes[size].box,
        className,
      )}
      {...props}
    >
      {/* The fill pops in as a layer so the box never animates background-color. */}
      <motion.span
        aria-hidden="true"
        className="absolute -inset-px rounded-[inherit] bg-primary"
        initial={false}
        animate={filled ? { opacity: 1, scale: 1 } : { opacity: 0, scale: reduceMotion ? 1 : 0.55 }}
        transition={reduceMotion ? { duration: duration.instant } : filled ? spring.snappy : { duration: duration.quick }}
      />
      <svg
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        strokeWidth={3.25}
        strokeLinecap="round"
        strokeLinejoin="round"
        aria-hidden="true"
        className={cn("relative text-primary-foreground", sizes[size].icon)}
      >
        <motion.path
          d="M5 12.5l4.5 4.5L19 7.5"
          initial={false}
          animate={{ pathLength: state === true ? 1 : 0, opacity: state === true ? 1 : 0 }}
          transition={draw(state === true)}
        />
        <motion.path
          d="M6.5 12h11"
          initial={false}
          animate={{ pathLength: state === "indeterminate" ? 1 : 0, opacity: state === "indeterminate" ? 1 : 0 }}
          transition={draw(state === "indeterminate")}
        />
      </svg>
    </CheckboxPrimitive.Root>
  );
}

Usage

import { AnimatedCheckbox } from "@/components/ui/animated-checkbox/animated-checkbox";

export function Terms() {
  return (
    <div className="flex items-center gap-3">
      <AnimatedCheckbox id="terms" />
      <label htmlFor="terms">Accept terms and conditions</label>
    </div>
  );
}

API reference

Prop	Type	Default	Description
`checked`	`CheckedState`	–	Controlled state. "indeterminate" draws a dash.
`defaultChecked`	`CheckedState`	`false`	Initial state when uncontrolled.
`onCheckedChange`	`(checked: CheckedState) => void`	–	Called with the new state when toggled.
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Box size. Every size keeps a 40px hit area.

Also accepts every prop of Radix Checkbox.Root, including className and disabled.

The check stroke draws on with pathLength; unchecking reverses it quickly so the state change reads at a glance.
Use "indeterminate" for a parent checkbox whose children are partly selected, as in the Select all example.

Accessibility

Built on Radix Checkbox: role="checkbox", aria-checked ("mixed" when indeterminate) and Space to toggle.
Inside a form with a name, Radix renders a hidden native input, so it submits like a real checkbox.
Every size extends its hit area to about 40px; pair it with a <label htmlFor> for a larger target.
With reduced motion enabled, the check and fill appear instantly.

Installation#

CLI