Components

Checkbox Group

Multi-select checkbox set with shared state and select-all support.

Composition

Anatomy

<CheckboxGroup>
- <CheckboxGroupItem>
  - <Checkbox />
  </CheckboxGroupItem>
</CheckboxGroup>

Installation

The Control UI source installs this primitive from src/registry/sources/control-ui/ui/checkbox-group.tsx.

Registry command

npx shadcn@latest add https://control-ui.dev/r/checkbox-group.json

See registry manifest

Dependencies

Track highlighttrack-highlightPrimitive

Raw code

Primary installed source

src/registry/sources/control-ui/ui/checkbox-group.tsx

"use client";

import { CheckboxGroup as CheckboxGroupPrimitive } from "@base-ui/react/checkbox-group";

import type { ComponentProps } from "react";

import type { ControlledMultiChoice, HoverIndicator } from "@/components/control-ui/control-props";

import { TrackHighlight } from "@/components/control-ui/extensions/track-highlight";

import { cn } from "@/components/control-ui/lib/cn";

import { useSkin } from "@/components/control-ui/skin-provider";

export type CheckboxGroupProps = Omit<ComponentProps<"div">, "defaultValue" | "onChange"> &

ControlledMultiChoice & {

allValues?: string[];

disabled?: boolean;

orientation?: "horizontal" | "vertical";

indicator?: HoverIndicator;

};

export function CheckboxGroup({ className, orientation = "vertical", indicator, children, ...props }: CheckboxGroupProps) {

const skin = useSkin();

const resolvedIndicator = indicator ?? skin.indicators?.["checkbox-group"] ?? "none";

return (

<CheckboxGroupPrimitive

data-control-ui="checkbox-group"

data-control-family="checkbox-group"

data-slot="root"

data-orientation={orientation}

data-track={resolvedIndicator}

className={cn(

        "flex flex-col gap-2.5 data-[orientation=horizontal]:flex-row data-[orientation=horizontal]:gap-4 data-[track=hover]:relative data-[track=hover]:isolate data-[track=hover]:gap-0",

className,

)}

{...props}

>

{children}

{resolvedIndicator === "hover" ? <TrackHighlight /> : null}

</CheckboxGroupPrimitive>

);

}

export function CheckboxGroupItem({ className, htmlFor, children, ...props }: ComponentProps<"label">) {

return (

<label

htmlFor={htmlFor}