Primitives
Checkbox Group
Multi-select checkbox set with shared state and select-all support.
Composition
The preferred shape for composing the installed primitive from its exported parts.
Root
Single-slot surface with no nested parts.
CheckboxGroupThe refined source installs this primitive from src/registry/sources/refined/ui/checkbox-group.tsx. Install it on its own with the command above, or inspect the source below.
npx shadcn@latest add http://127.0.0.1:3000/r/refined/checkbox-group.jsonRaw code
Primary installed primitive source
Base UI Checkbox group slot
src/registry/sources/refined/ui/checkbox-group.tsx
"use client";import { CheckboxGroup as CheckboxGroupPrimitive } from "@base-ui/react/checkbox-group";import type { CheckboxGroupProps } from "@/components/refined-ui/contracts";import { cn } from "@/components/refined-ui/lib/cn";import { skinSlot } from "@/components/refined-ui/skin";// Layout-only wrapper: flex column flips to row on orientation="horizontal" (visual only, each// Checkbox owns its own focus). Pass `allValues` + a select-all Checkbox for the indeterminate state.// Import `Checkbox` from ui/checkbox for children; this module does not re-export it.export function CheckboxGroup({ className, orientation = "vertical", ...props }: CheckboxGroupProps) { return ( <CheckboxGroupPrimitive data-ui="agent" data-slot="checkbox-group" data-orientation={orientation} className={cn( "flex flex-col gap-2.5 data-[orientation=horizontal]:flex-row data-[orientation=horizontal]:gap-4", skinSlot("checkbox-group", {}), className, )} {...props} /> );}