Checkbox Group

Forms 12

About

A checkbox group with proximity hover, animated checkmarks, contiguous selection merging, and spring transitions. Built on Radix UI with Framer Motion.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Checkbox Group to your project and fits it to your theme.

Code

How Checkbox Group is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import { useState } from "react";
import { CheckboxGroup, CheckboxItem } from "../components/ui/checkbox-group";

const items = ["React", "TypeScript", "Tailwind CSS", "Framer Motion"];

export default function CheckboxAllCheckedDemo() {
  const [checked, setChecked] = useState<Set<number>>(new Set([0, 1, 2, 3]));

  const toggle = (index: number) => {
    setChecked((prev) => {
      const next = new Set(prev);
      if (next.has(index)) next.delete(index);
      else next.add(index);
      return next;
    });
  };

  return (
    <div className="flex items-center justify-center min-h-screen bg-background">
      <CheckboxGroup checkedIndices={checked} className="w-80">
        {items.map((item, i) => (
          <CheckboxItem key={item} label={item} index={i} checked={checked.has(i)} onToggle={() => toggle(i)} />
        ))}
      </CheckboxGroup>
    </div>
  );
}