HeroUI Checkbox Group

Forms

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

export function Indeterminate() {
  const [selected, setSelected] = useState(["coding"]);
  const allOptions = ["coding", "design", "writing"];

  return (
    <div>
      <Checkbox
        isIndeterminate={selected.length > 0 && selected.length < allOptions.length}
        isSelected={selected.length === allOptions.length}
        name="select-all"
        onChange={(isSelected: boolean) => {
          setSelected(isSelected ? allOptions : []);
        }}
      >
        <Checkbox.Content>
          <Checkbox.Control>
            <Checkbox.Indicator />
          </Checkbox.Control>
          Select all
        </Checkbox.Content>
      </Checkbox>
      <div className="ml-6 flex flex-col gap-2">
        <CheckboxGroup value={selected} onChange={setSelected}>
          <Checkbox value="coding">
            <Checkbox.Content>
              <Checkbox.Control>
                <Checkbox.Indicator />
              </Checkbox.Control>
              Coding
            </Checkbox.Content>
          </Checkbox>
          <Checkbox value="design">
            <Checkbox.Content>
              <Checkbox.Control>
                <Checkbox.Indicator />
              </Checkbox.Control>
              Design
            </Checkbox.Content>
          </Checkbox>
          <Checkbox value="writing">
            <Checkbox.Content>
              <Checkbox.Control>
                <Checkbox.Indicator />
              </Checkbox.Control>
              Writing
            </Checkbox.Content>
          </Checkbox>
        </CheckboxGroup>
      </div>
    </div>
  );
}

export default Indeterminate