Checkbox Group

Forms

About

A grouped set of checkboxes with an optional select-all control, per-choice descriptions and disabled states, ported from Starbase's sb-checkbox-group web component.

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

import CheckboxGroup from "@/components/ui/checkbox-group";

export default function CheckboxGroupDemo() {
  return (
    <div className="flex w-full max-w-sm items-center justify-center rounded-xl bg-[#05070F] p-8">
      <CheckboxGroup
        label="Notifications"
        selectAll="All"
        name="notifications"
        defaultValue={["comments"]}
        options={[
          {
            value: "comments",
            label: "Comments",
            description: "Get notified when someone comments on your post.",
          },
          {
            value: "mentions",
            label: "Mentions",
            description: "Get notified when someone mentions you.",
          },
          { value: "follows", label: "New followers" },
          { value: "digest", label: "Weekly digest", disabled: true },
        ]}
      />
    </div>
  );
}