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 Disabled() {
return (
<CheckboxGroup isDisabled name="disabled-features">
<Label>Features</Label>
<Description>Feature selection is temporarily disabled</Description>
<Checkbox value="feature1">
<Checkbox.Content>
<Checkbox.Control>
<Checkbox.Indicator />
</Checkbox.Control>
Feature 1
</Checkbox.Content>
<Description>This feature is coming soon</Description>
</Checkbox>
<Checkbox value="feature2">
<Checkbox.Content>
<Checkbox.Control>
<Checkbox.Indicator />
</Checkbox.Control>
Feature 2
</Checkbox.Content>
<Description>This feature is coming soon</Description>
</Checkbox>
</CheckboxGroup>
);
}
export default Disabled
Loading preview...
Loading preview...
Loading preview...
Loading preview...
Loading preview...
Loading preview...
Loading preview...
Loading preview...