Components
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.
npx shadcn@latest add https://21st.dev/r/hero_ui/heroui-checkbox-groupLoading preview...
"use client"
import { Checkbox, Label } from "@heroui/react"
import { CheckboxGroup } from "@/components/ui/heroui-checkbox-group"
import {useState} from "react";
export function Controlled() {
const [selected, setSelected] = useState(["coding", "design"]);
return (
<CheckboxGroup className="min-w-[320px]" name="skills" value={selected} onChange={setSelected}>
<Label>Your skills</Label>
<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>
<Label className="my-4 text-sm text-muted">Selected: {selected.join(", ") || "None"}</Label>
</CheckboxGroup>
);
}
export default Controlled
Loading preview...
Loading preview...
Loading preview...
Loading preview...
Loading preview...
Loading preview...
Loading preview...
Loading preview...