Checkbox Group

Forms

About

A multi-select list of checkboxes where checking rows highlights the nearest item on hover and merges contiguous checked rows into one continuous background block instead of showing separate highlighted rows.

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 {
  CheckboxGroup,
  CheckboxGroupItem,
} from "@/components/ui/checkbox-group";
import { useState } from "react";

const todos = [
  { name: "wireframes", label: "Sketch wireframes" },
  { name: "review", label: "Review with design" },
  { name: "copy", label: "Write onboarding copy" },
  { name: "build", label: "Build the empty states" },
  { name: "qa", label: "QA on staging" },
  { name: "ship", label: "Ship to production" },
];

// Pre-checked non-contiguously (rows 1, 3, 4, 5) so checking "Write
// onboarding copy" (row 2) bridges two existing runs into one merged block,
// and unchecking any interior row splits it back apart.
export default function CheckboxGroupBasicExample() {
  const [value, setValue] = useState<string[]>([
    "review",
    "build",
    "qa",
    "ship",
  ]);

  return (
    <div className="w-full max-w-sm">
      <CheckboxGroup value={value} onValueChange={setValue}>
        {todos.map((todo) => (
          <CheckboxGroupItem key={todo.name} name={todo.name}>
            {todo.label}
          </CheckboxGroupItem>
        ))}
      </CheckboxGroup>
    </div>
  );
}