<CheckboxGroup />

The CheckboxGroup component extends Base UI's CheckboxGroup. It provides shared state to a series of checkboxes, making it easy to manage multiple selections and implement "select all" patterns.

Here is the component implementation code that you can copy to your project:

// https://base-ui.com/react/components/checkbox-group
 
import { CheckboxGroup as BaseCheckboxGroup } from "@base-ui-components/react/checkbox-group";
import clsx from "clsx";
import styles from "./CheckboxGroup.module.scss";
 
interface CheckboxGroupRootProps extends BaseCheckboxGroup.Props {
  className?: string;
}
 
function Root({ className, ...props }: CheckboxGroupRootProps) {
  return (
    <BaseCheckboxGroup className={clsx(styles.root, className)} {...props} />
  );
}
 
const CheckboxGroup = {
  Root,
};
 
export default CheckboxGroup;

Simple group

Use value and onValueChange to control the group state. Each checkbox needs a unique value prop.

Parent checkbox

Add the parent prop to a checkbox to make it control all other checkboxes in the group. Pass allValues to the group to enable the indeterminate state when some (but not all) items are selected.