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, Description, Label } from "@heroui/react"
import { CheckboxGroup } from "@/components/ui/heroui-checkbox-group"
export function Basic() {
return (
<CheckboxGroup name="interests">
<Label>Select your interests</Label>
<Description>Choose all that apply</Description>
<Checkbox value="coding">
<Checkbox.Content>
<Checkbox.Control>
<Checkbox.Indicator />
</Checkbox.Control>
Coding
</Checkbox.Content>
<Description>Love building software</Description>
</Checkbox>
<Checkbox value="design">
<Checkbox.Content>
<Checkbox.Control>
<Checkbox.Indicator />
</Checkbox.Control>
Design
</Checkbox.Content>
<Description>Enjoy creating beautiful interfaces</Description>
</Checkbox>
<Checkbox value="writing">
<Checkbox.Content>
<Checkbox.Control>
<Checkbox.Indicator />
</Checkbox.Control>
Writing
</Checkbox.Content>
<Description>Passionate about content creation</Description>
</Checkbox>
</CheckboxGroup>
);
}
export default Basic
Loading preview...
Loading preview...
Loading preview...
Loading preview...
Loading preview...
Loading preview...
Loading preview...
Loading preview...