HeroUI Checkbox Group

Cards

About

HeroUI v3 CheckboxGroup manages a set of related checkboxes as a single form field with a shared label, description and validation. Built on the real @heroui/react package with @heroui/styles, it supports controlled selection, an indeterminate "select all" parent, disabled state, required-field validation via Form/FieldError, a Surface variant, custom check indicators, a custom render function, and rich card-style add-on rows. A thin re-export of the upstream component so consumers install and render the genuine HeroUI primitive.

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

Code

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

Usage.tsx

"use client"

import { Bell, Mail, MessageSquare } from "lucide-react"
import { Checkbox, Description, Label } from "@heroui/react"
import { CheckboxGroup } from "@/components/ui/heroui-checkbox-group"
import clsx from "clsx";

export function FeaturesAndAddOns() {
  const addOns = [
    {
      description: "Receive updates via email",
      icon: Mail,
      title: "Email Notifications",
      value: "email",
    },
    {
      description: "Get instant SMS notifications",
      icon: MessageSquare,
      title: "SMS Alerts",
      value: "sms",
    },
    {
      description: "Browser and mobile push alerts",
      icon: Bell,
      title: "Push Notifications",
      value: "push",
    },
  ];

  return (
    <div className="flex w-full flex-col items-center gap-10 px-4 py-8">
      <section className="flex w-full min-w-[320px] flex-col gap-4">
        <CheckboxGroup name="notification-preferences">
          <Label>Notification preferences</Label>
          <Description>Choose how you want to receive updates</Description>
          <div className="flex flex-col gap-2">
            {addOns.map((addon) => (
              <Checkbox key={addon.value} value={addon.value} variant="secondary">
                <Checkbox.Content
                  className={clsx(
                    "group relative flex w-full flex-row items-start justify-start gap-4 rounded-3xl bg-surface px-5 py-4 transition-all",
                    "data-[selected=true]:bg-accent/10",
                  )}
                >
                  <Checkbox.Control className="absolute top-3 right-4 size-5 rounded-full before:rounded-full">
                    <Checkbox.Indicator />
                  </Checkbox.Control>
                  <addon.icon className="size-5 text-accent-soft-foreground" />
                  <div className="flex flex-col gap-1">
                    <span>{addon.title}</span>
                    <Description>{addon.description}</Description>
                  </div>
                </Checkbox.Content>
              </Checkbox>
            ))}
          </div>
        </CheckboxGroup>
      </section>
    </div>
  );
}

export default FeaturesAndAddOns