Devie UI
Version: 2026-02-14

<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.

Installation

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

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

Use Cases

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.