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 CheckboxGroupHorizontalDemo() {
  return (
    <div className="flex w-full max-w-md items-center justify-center rounded-xl bg-[#05070F] p-8">
      <CheckboxGroup
        label="Size"
        orientation="horizontal"
        defaultValue={["m"]}
        options={[
          { value: "s", label: "S" },
          { value: "m", label: "M" },
          { value: "l", label: "L" },
          { value: "xl", label: "XL", disabled: true },
        ]}
      />
    </div>
  );
}