Checkbox List Group

Forms 2

About

A bordered list of options each pairing a labeled row with icon and a checkbox, useful for selecting multiple preferences or skills.

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

Code

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

Usage.tsx

import { Gamepad2, MapPinned, Music2 } from "lucide-react";
import { Checkbox } from "@/components/ui/checkbox";
import { Label } from "@/components/ui/label";

const skills = [
  { label: "Music & Singing", icon: Music2, checked: true },
  { label: "Gaming", icon: Gamepad2, checked: false },
  { label: "Traveling", icon: MapPinned, checked: true },
];

export default function Default() {
  return (
    <div className="flex w-full max-w-sm items-center justify-center p-6">
      <ul className="flex w-full flex-col divide-y rounded-md border">
        {skills.map(({ label, icon: Icon, checked }) => (
          <li
            key={label}
            className="flex items-center justify-between gap-2 px-5 py-3"
          >
            <Label htmlFor={label}>
              <span className="flex items-center gap-2">
                <Icon className="size-4" /> {label}
              </span>
            </Label>
            <Checkbox
              id={label}
              className="cursor-pointer"
              defaultChecked={checked}
            />
          </li>
        ))}
      </ul>
    </div>
  );
}