Checkbox Group

Forms 18

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 = ["Email notifications", "Push notifications", "SMS alerts", "Weekly digest", "Monthly report"];

export default function CheckboxNoneCheckedDemo() {
  const [checked, setChecked] = useState<Set<number>>(new Set());

  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>
  );
}