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 WithCustomIndicator() {
return (
<CheckboxGroup name="features">
<Label>Features</Label>
<Description>Select the features you want</Description>
<Checkbox value="notifications">
<Checkbox.Content>
<Checkbox.Control>
<Checkbox.Indicator>
{({isSelected}) =>
isSelected ? (
<svg
aria-hidden="true"
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeWidth={2}
viewBox="0 0 24 24"
>
<path d="M6 18L18 6M6 6l12 12" />
</svg>
) : null
}
</Checkbox.Indicator>
</Checkbox.Control>
Email notifications
</Checkbox.Content>
<Description>Receive updates via email</Description>
</Checkbox>
<Checkbox value="newsletter">
<Checkbox.Content>
<Checkbox.Control>
<Checkbox.Indicator>
{({isSelected}) =>
isSelected ? (
<svg
aria-hidden="true"
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeWidth={2}
viewBox="0 0 24 24"
>
<path d="M6 18L18 6M6 6l12 12" />
</svg>
) : null
}
</Checkbox.Indicator>
</Checkbox.Control>
Newsletter
</Checkbox.Content>
<Description>Get weekly newsletters</Description>
</Checkbox>
</CheckboxGroup>
);
}
export default WithCustomIndicator
Loading preview...
Loading preview...
Loading preview...
Loading preview...
Loading preview...
Loading preview...
Loading preview...
Loading preview...