From 64d67a9005d1a921d0116cc49e245f27c6b9c83c Mon Sep 17 00:00:00 2001
From: atomiks <cc.glows@gmail.com>
Date: Thu, 13 Jun 2024 18:45:31 +1000
Subject: [PATCH] [CheckboxGroup] Component and Hook

Init conformance tests

Fix label context test

test

Update
---
 .../css/index.js                              | 158 ++++++++++++++
 .../css/index.tsx                             | 158 ++++++++++++++
 .../system/index.js                           | 125 +++++++++++
 .../system/index.tsx                          | 125 +++++++++++
 .../tailwind/index.js                         | 123 +++++++++++
 .../tailwind/index.tsx                        | 112 ++++++++++
 .../UnstyledCheckboxGroupNested.js            | 146 +++++++++++++
 .../UnstyledCheckboxGroupNested.tsx           | 146 +++++++++++++
 .../checkbox-group/checkbox-group.md          | 102 +++++++++
 .../UnstyledCheckboxIndeterminateGroup.js     |  20 +-
 .../UnstyledCheckboxIndeterminateGroup.tsx    |  20 +-
 docs/data/base/pages.ts                       |   1 +
 docs/data/base/pagesApi.js                    |   8 +
 .../base-ui/api/checkbox-group-label.json     |  19 ++
 .../base-ui/api/checkbox-group-root.json      |  19 ++
 docs/pages/base-ui/api/checkbox-root.json     |   1 +
 .../base-ui/api/use-checkbox-group-label.json |  28 +++
 .../api/use-checkbox-group-parent.json        |  37 ++++
 .../base-ui/api/use-checkbox-group-root.json  |  42 ++++
 docs/pages/base-ui/api/use-checkbox-root.json |   1 +
 .../react-checkbox-group/[docsTab]/index.js   |  54 +++++
 .../base-ui/react-checkbox-group/index.js     |  13 ++
 .../checkbox-group-label.json                 |  10 +
 .../checkbox-group-root.json                  |  10 +
 .../api-docs/checkbox-root/checkbox-root.json |   3 +
 .../use-checkbox-group-label.json             |  10 +
 .../use-checkbox-group-parent.json            |   1 +
 .../use-checkbox-group-root.json              |   1 +
 .../use-checkbox-root/use-checkbox-root.json  |   3 +
 docs/translations/translations.json           |   1 +
 .../src/Checkbox/Root/CheckboxRoot.tsx        |  43 +++-
 .../src/Checkbox/Root/CheckboxRoot.types.ts   |   5 +
 .../src/Checkbox/Root/useCheckboxRoot.ts      |  27 ++-
 .../Label/CheckboxGroupLabel.test.tsx         |  28 +++
 .../Label/CheckboxGroupLabel.tsx              |  63 ++++++
 .../Label/CheckboxGroupLabel.types.ts         |   6 +
 .../Label/useCheckboxGroupLabel.ts            |  46 ++++
 .../Label/useCheckboxGroupLabel.types.ts      |  20 ++
 .../Parent/useCheckboxGroupParent.test.tsx    | 204 ++++++++++++++++++
 .../Parent/useCheckboxGroupParent.ts          |  92 ++++++++
 .../Parent/useCheckboxGroupParent.types.ts    |  23 ++
 .../Root/CheckboxGroupRoot.test.tsx           |  14 ++
 .../CheckboxGroup/Root/CheckboxGroupRoot.tsx  | 107 +++++++++
 .../Root/CheckboxGroupRoot.types.ts           |  22 ++
 .../Root/CheckboxGroupRootContext.ts          |  19 ++
 .../Root/useCheckboxGroupRoot.tsx             |  63 ++++++
 .../Root/useCheckboxGroupRoot.types.ts        |  19 ++
 .../src/CheckboxGroup/index.barrel.ts         |  23 ++
 packages/mui-base/src/CheckboxGroup/index.ts  |  23 ++
 packages/mui-base/src/index.ts                |   1 +
 .../src/utils/defaultRenderFunctions.tsx      |   4 +
 51 files changed, 2318 insertions(+), 31 deletions(-)
 create mode 100644 docs/data/base/components/checkbox-group/UnstyledCheckboxGroupIntroduction/css/index.js
 create mode 100644 docs/data/base/components/checkbox-group/UnstyledCheckboxGroupIntroduction/css/index.tsx
 create mode 100644 docs/data/base/components/checkbox-group/UnstyledCheckboxGroupIntroduction/system/index.js
 create mode 100644 docs/data/base/components/checkbox-group/UnstyledCheckboxGroupIntroduction/system/index.tsx
 create mode 100644 docs/data/base/components/checkbox-group/UnstyledCheckboxGroupIntroduction/tailwind/index.js
 create mode 100644 docs/data/base/components/checkbox-group/UnstyledCheckboxGroupIntroduction/tailwind/index.tsx
 create mode 100644 docs/data/base/components/checkbox-group/UnstyledCheckboxGroupNested.js
 create mode 100644 docs/data/base/components/checkbox-group/UnstyledCheckboxGroupNested.tsx
 create mode 100644 docs/data/base/components/checkbox-group/checkbox-group.md
 create mode 100644 docs/pages/base-ui/api/checkbox-group-label.json
 create mode 100644 docs/pages/base-ui/api/checkbox-group-root.json
 create mode 100644 docs/pages/base-ui/api/use-checkbox-group-label.json
 create mode 100644 docs/pages/base-ui/api/use-checkbox-group-parent.json
 create mode 100644 docs/pages/base-ui/api/use-checkbox-group-root.json
 create mode 100644 docs/pages/base-ui/react-checkbox-group/[docsTab]/index.js
 create mode 100644 docs/pages/base-ui/react-checkbox-group/index.js
 create mode 100644 docs/translations/api-docs/checkbox-group-label/checkbox-group-label.json
 create mode 100644 docs/translations/api-docs/checkbox-group-root/checkbox-group-root.json
 create mode 100644 docs/translations/api-docs/use-checkbox-group-label/use-checkbox-group-label.json
 create mode 100644 docs/translations/api-docs/use-checkbox-group-parent/use-checkbox-group-parent.json
 create mode 100644 docs/translations/api-docs/use-checkbox-group-root/use-checkbox-group-root.json
 create mode 100644 packages/mui-base/src/CheckboxGroup/Label/CheckboxGroupLabel.test.tsx
 create mode 100644 packages/mui-base/src/CheckboxGroup/Label/CheckboxGroupLabel.tsx
 create mode 100644 packages/mui-base/src/CheckboxGroup/Label/CheckboxGroupLabel.types.ts
 create mode 100644 packages/mui-base/src/CheckboxGroup/Label/useCheckboxGroupLabel.ts
 create mode 100644 packages/mui-base/src/CheckboxGroup/Label/useCheckboxGroupLabel.types.ts
 create mode 100644 packages/mui-base/src/CheckboxGroup/Parent/useCheckboxGroupParent.test.tsx
 create mode 100644 packages/mui-base/src/CheckboxGroup/Parent/useCheckboxGroupParent.ts
 create mode 100644 packages/mui-base/src/CheckboxGroup/Parent/useCheckboxGroupParent.types.ts
 create mode 100644 packages/mui-base/src/CheckboxGroup/Root/CheckboxGroupRoot.test.tsx
 create mode 100644 packages/mui-base/src/CheckboxGroup/Root/CheckboxGroupRoot.tsx
 create mode 100644 packages/mui-base/src/CheckboxGroup/Root/CheckboxGroupRoot.types.ts
 create mode 100644 packages/mui-base/src/CheckboxGroup/Root/CheckboxGroupRootContext.ts
 create mode 100644 packages/mui-base/src/CheckboxGroup/Root/useCheckboxGroupRoot.tsx
 create mode 100644 packages/mui-base/src/CheckboxGroup/Root/useCheckboxGroupRoot.types.ts
 create mode 100644 packages/mui-base/src/CheckboxGroup/index.barrel.ts
 create mode 100644 packages/mui-base/src/CheckboxGroup/index.ts

diff --git a/docs/data/base/components/checkbox-group/UnstyledCheckboxGroupIntroduction/css/index.js b/docs/data/base/components/checkbox-group/UnstyledCheckboxGroupIntroduction/css/index.js
new file mode 100644
index 0000000000..0baafd979a
--- /dev/null
+++ b/docs/data/base/components/checkbox-group/UnstyledCheckboxGroupIntroduction/css/index.js
@@ -0,0 +1,158 @@
+import * as React from 'react';
+import { useTheme } from '@mui/system';
+import * as Checkbox from '@base_ui/react/Checkbox';
+import * as CheckboxGroup from '@base_ui/react/CheckboxGroup';
+import Check from '@mui/icons-material/Check';
+
+export default function UnstyledCheckboxIndeterminateGroup() {
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column' }}>
+      <CheckboxGroup.Root defaultValue={['red']}>
+        <CheckboxGroup.Label className="CheckboxGroup-label">
+          Colors
+        </CheckboxGroup.Label>
+        <div style={{ display: 'flex', flexDirection: 'column' }}>
+          <Label className="Checkbox-label">
+            <Checkbox.Root className="Checkbox" name="red">
+              <Checkbox.Indicator className="Checkbox-indicator">
+                <Check className="Check" />
+              </Checkbox.Indicator>
+            </Checkbox.Root>
+            Red
+          </Label>
+          <Label className="Checkbox-label">
+            <Checkbox.Root className="Checkbox" name="green">
+              <Checkbox.Indicator className="Checkbox-indicator">
+                <Check className="Check" />
+              </Checkbox.Indicator>
+            </Checkbox.Root>
+            Green
+          </Label>
+          <Label className="Checkbox-label">
+            <Checkbox.Root className="Checkbox" name="blue">
+              <Checkbox.Indicator className="Checkbox-indicator">
+                <Check className="Check" />
+              </Checkbox.Indicator>
+            </Checkbox.Root>
+            Blue
+          </Label>
+        </div>
+      </CheckboxGroup.Root>
+      <Styles />
+    </div>
+  );
+}
+
+const grey = {
+  100: '#E5EAF2',
+  300: '#C7D0DD',
+  500: '#9DA8B7',
+  600: '#6B7A90',
+  800: '#303740',
+  900: '#1C2025',
+};
+
+function useIsDarkMode() {
+  const theme = useTheme();
+  return theme.palette.mode === 'dark';
+}
+
+function Label(props) {
+  // eslint-disable-next-line jsx-a11y/label-has-associated-control, jsx-a11y/no-noninteractive-element-interactions
+  return <label onMouseDown={(e) => e.preventDefault()} {...props} />;
+}
+
+function Styles() {
+  // Replace this with your app logic for determining dark mode
+  const isDarkMode = useIsDarkMode();
+
+  return (
+    <style>
+      {`
+      .Check {
+        height: 100%;
+        width: 100%;
+      }
+
+      .CheckboxGroup-label {
+        display: flex;
+        font-weight: bold;
+        gap: 8px;
+        margin-bottom: 8px;
+        font-size: 17px;
+      }
+
+      .Checkbox-label {
+        display: flex;
+        font-weight: 500;
+        gap: 8px;
+        margin-bottom: 8px;
+      }
+
+      .Checkbox {
+        all: unset;
+        box-sizing: border-box;
+        text-align: center;
+        width: 24px;
+        height: 24px;
+        padding: 0;
+        border-radius: 4px;
+        border: 2px solid ${grey[600]};
+        background: none;
+        transition-property: background, border-color;
+        transition-duration: 0.15s;
+      }
+
+      .Checkbox[data-disabled] {
+        opacity: 0.4;
+        cursor: not-allowed;
+      }
+
+      .Checkbox:focus-visible {
+        outline: 2px solid ${isDarkMode ? grey[600] : grey[500]};
+        outline-offset: 2px;
+      }
+
+      .Checkbox[data-state="checked"] {
+        border-color: ${grey[800]};
+        background: ${grey[800]};
+      }
+
+      .Checkbox-indicator {
+        height: 100%;
+        display: inline-block;
+        visibility: hidden;
+        color: ${isDarkMode ? grey[900] : grey[100]};
+      }
+
+      .Checkbox-indicator[data-state="checked"] {
+        visibility: visible;
+      }
+
+      .Checkbox-icon {
+        width: 100%;
+        height: 100%;
+      }
+
+      @media (prefers-color-scheme: dark) {
+        .Checkbox {
+          border-color: ${grey[500]};
+        }
+
+        .Checkbox[data-state="checked"] {
+          border-color: ${grey[300]};
+          background: ${grey[300]};
+        }
+
+        .Checkbox:hover:not([data-disabled]) {
+          border-color: ${grey[100]};
+        }
+
+        .Checkbox-indicator {
+          color: ${grey[900]};
+        }
+      }
+    `}
+    </style>
+  );
+}
diff --git a/docs/data/base/components/checkbox-group/UnstyledCheckboxGroupIntroduction/css/index.tsx b/docs/data/base/components/checkbox-group/UnstyledCheckboxGroupIntroduction/css/index.tsx
new file mode 100644
index 0000000000..521bb8197e
--- /dev/null
+++ b/docs/data/base/components/checkbox-group/UnstyledCheckboxGroupIntroduction/css/index.tsx
@@ -0,0 +1,158 @@
+import * as React from 'react';
+import { useTheme } from '@mui/system';
+import * as Checkbox from '@base_ui/react/Checkbox';
+import * as CheckboxGroup from '@base_ui/react/CheckboxGroup';
+import Check from '@mui/icons-material/Check';
+
+export default function UnstyledCheckboxIndeterminateGroup() {
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column' }}>
+      <CheckboxGroup.Root defaultValue={['red']}>
+        <CheckboxGroup.Label className="CheckboxGroup-label">
+          Colors
+        </CheckboxGroup.Label>
+        <div style={{ display: 'flex', flexDirection: 'column' }}>
+          <Label className="Checkbox-label">
+            <Checkbox.Root className="Checkbox" name="red">
+              <Checkbox.Indicator className="Checkbox-indicator">
+                <Check className="Check" />
+              </Checkbox.Indicator>
+            </Checkbox.Root>
+            Red
+          </Label>
+          <Label className="Checkbox-label">
+            <Checkbox.Root className="Checkbox" name="green">
+              <Checkbox.Indicator className="Checkbox-indicator">
+                <Check className="Check" />
+              </Checkbox.Indicator>
+            </Checkbox.Root>
+            Green
+          </Label>
+          <Label className="Checkbox-label">
+            <Checkbox.Root className="Checkbox" name="blue">
+              <Checkbox.Indicator className="Checkbox-indicator">
+                <Check className="Check" />
+              </Checkbox.Indicator>
+            </Checkbox.Root>
+            Blue
+          </Label>
+        </div>
+      </CheckboxGroup.Root>
+      <Styles />
+    </div>
+  );
+}
+
+const grey = {
+  100: '#E5EAF2',
+  300: '#C7D0DD',
+  500: '#9DA8B7',
+  600: '#6B7A90',
+  800: '#303740',
+  900: '#1C2025',
+};
+
+function useIsDarkMode() {
+  const theme = useTheme();
+  return theme.palette.mode === 'dark';
+}
+
+function Label(props: React.ComponentPropsWithoutRef<'label'>) {
+  // eslint-disable-next-line jsx-a11y/label-has-associated-control, jsx-a11y/no-noninteractive-element-interactions
+  return <label onMouseDown={(e) => e.preventDefault()} {...props} />;
+}
+
+function Styles() {
+  // Replace this with your app logic for determining dark mode
+  const isDarkMode = useIsDarkMode();
+
+  return (
+    <style>
+      {`
+      .Check {
+        height: 100%;
+        width: 100%;
+      }
+
+      .CheckboxGroup-label {
+        display: flex;
+        font-weight: bold;
+        gap: 8px;
+        margin-bottom: 8px;
+        font-size: 17px;
+      }
+
+      .Checkbox-label {
+        display: flex;
+        font-weight: 500;
+        gap: 8px;
+        margin-bottom: 8px;
+      }
+
+      .Checkbox {
+        all: unset;
+        box-sizing: border-box;
+        text-align: center;
+        width: 24px;
+        height: 24px;
+        padding: 0;
+        border-radius: 4px;
+        border: 2px solid ${grey[600]};
+        background: none;
+        transition-property: background, border-color;
+        transition-duration: 0.15s;
+      }
+
+      .Checkbox[data-disabled] {
+        opacity: 0.4;
+        cursor: not-allowed;
+      }
+
+      .Checkbox:focus-visible {
+        outline: 2px solid ${isDarkMode ? grey[600] : grey[500]};
+        outline-offset: 2px;
+      }
+
+      .Checkbox[data-state="checked"] {
+        border-color: ${grey[800]};
+        background: ${grey[800]};
+      }
+
+      .Checkbox-indicator {
+        height: 100%;
+        display: inline-block;
+        visibility: hidden;
+        color: ${isDarkMode ? grey[900] : grey[100]};
+      }
+
+      .Checkbox-indicator[data-state="checked"] {
+        visibility: visible;
+      }
+
+      .Checkbox-icon {
+        width: 100%;
+        height: 100%;
+      }
+
+      @media (prefers-color-scheme: dark) {
+        .Checkbox {
+          border-color: ${grey[500]};
+        }
+
+        .Checkbox[data-state="checked"] {
+          border-color: ${grey[300]};
+          background: ${grey[300]};
+        }
+
+        .Checkbox:hover:not([data-disabled]) {
+          border-color: ${grey[100]};
+        }
+
+        .Checkbox-indicator {
+          color: ${grey[900]};
+        }
+      }
+    `}
+    </style>
+  );
+}
diff --git a/docs/data/base/components/checkbox-group/UnstyledCheckboxGroupIntroduction/system/index.js b/docs/data/base/components/checkbox-group/UnstyledCheckboxGroupIntroduction/system/index.js
new file mode 100644
index 0000000000..097399314f
--- /dev/null
+++ b/docs/data/base/components/checkbox-group/UnstyledCheckboxGroupIntroduction/system/index.js
@@ -0,0 +1,125 @@
+import * as React from 'react';
+import { css, styled } from '@mui/system';
+import * as BaseCheckbox from '@base_ui/react/Checkbox';
+import * as CheckboxGroup from '@base_ui/react/CheckboxGroup';
+import Check from '@mui/icons-material/Check';
+
+export default function UnstyledCheckboxIndeterminateGroup() {
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column' }}>
+      <CheckboxGroup.Root defaultValue={['red']}>
+        <CheckboxGroupLabel>Colors</CheckboxGroupLabel>
+        <div style={{ display: 'flex', flexDirection: 'column' }}>
+          <CheckboxLabel>
+            <Checkbox name="red">
+              <Indicator>
+                <CheckIcon />
+              </Indicator>
+            </Checkbox>
+            Red
+          </CheckboxLabel>
+          <CheckboxLabel>
+            <Checkbox name="green">
+              <Indicator>
+                <CheckIcon />
+              </Indicator>
+            </Checkbox>
+            Green
+          </CheckboxLabel>
+          <CheckboxLabel>
+            <Checkbox name="blue">
+              <Indicator>
+                <CheckIcon />
+              </Indicator>
+            </Checkbox>
+            Blue
+          </CheckboxLabel>
+        </div>
+      </CheckboxGroup.Root>
+    </div>
+  );
+}
+
+const blue = {
+  400: '#3399FF',
+  600: '#0072E6',
+  800: '#004C99',
+};
+
+const grey = {
+  100: '#E5EAF2',
+  400: '#B0B8C4',
+  800: '#303740',
+};
+
+const labelStyles = css`
+  display: flex;
+  gap: 8px;
+  margin-bottom: 8px;
+`;
+
+const CheckboxLabelStyled = styled('label')`
+  ${labelStyles}
+`;
+
+const CheckboxGroupLabelStyled = styled(CheckboxGroup.Label)`
+  font-size: 17px;
+  font-weight: bold;
+  ${labelStyles}
+`;
+
+function CheckboxLabel(props) {
+  return <CheckboxLabelStyled onMouseDown={(e) => e.preventDefault()} {...props} />;
+}
+
+function CheckboxGroupLabel(props) {
+  return (
+    <CheckboxGroupLabelStyled onMouseDown={(e) => e.preventDefault()} {...props} />
+  );
+}
+
+const Checkbox = styled(BaseCheckbox.Root)(
+  ({ theme }) => `
+    width: 24px;
+    height: 24px;
+    padding: 0;
+    border-radius: 4px;
+    border: 2px solid ${blue[600]};
+    background: none;
+    transition-property: background, border-color;
+    transition-duration: 0.15s;
+    outline: none;
+
+    &[data-disabled] {
+      opacity: 0.4;
+      cursor: not-allowed;
+    }
+
+    &:focus-visible {
+      outline: 2px solid ${theme.palette.mode === 'dark' ? blue[800] : blue[400]};
+      outline-offset: 2px;
+    }
+
+    &[data-state="checked"], &[data-state="mixed"] {
+      border-color: transparent;
+      background: ${blue[600]};
+    }
+  `,
+);
+
+const CheckIcon = styled(Check)`
+  height: 100%;
+  width: 100%;
+`;
+
+const Indicator = styled(BaseCheckbox.Indicator)`
+  height: 100%;
+  display: inline-block;
+  visibility: hidden;
+  color: ${grey[100]};
+
+  &[data-state='checked'],
+  &[data-state='mixed'] {
+    visibility: visible;
+  }
+`;
diff --git a/docs/data/base/components/checkbox-group/UnstyledCheckboxGroupIntroduction/system/index.tsx b/docs/data/base/components/checkbox-group/UnstyledCheckboxGroupIntroduction/system/index.tsx
new file mode 100644
index 0000000000..3779e12b4f
--- /dev/null
+++ b/docs/data/base/components/checkbox-group/UnstyledCheckboxGroupIntroduction/system/index.tsx
@@ -0,0 +1,125 @@
+import * as React from 'react';
+import { css, styled } from '@mui/system';
+import * as BaseCheckbox from '@base_ui/react/Checkbox';
+import * as CheckboxGroup from '@base_ui/react/CheckboxGroup';
+import Check from '@mui/icons-material/Check';
+
+export default function UnstyledCheckboxIndeterminateGroup() {
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column' }}>
+      <CheckboxGroup.Root defaultValue={['red']}>
+        <CheckboxGroupLabel>Colors</CheckboxGroupLabel>
+        <div style={{ display: 'flex', flexDirection: 'column' }}>
+          <CheckboxLabel>
+            <Checkbox name="red">
+              <Indicator>
+                <CheckIcon />
+              </Indicator>
+            </Checkbox>
+            Red
+          </CheckboxLabel>
+          <CheckboxLabel>
+            <Checkbox name="green">
+              <Indicator>
+                <CheckIcon />
+              </Indicator>
+            </Checkbox>
+            Green
+          </CheckboxLabel>
+          <CheckboxLabel>
+            <Checkbox name="blue">
+              <Indicator>
+                <CheckIcon />
+              </Indicator>
+            </Checkbox>
+            Blue
+          </CheckboxLabel>
+        </div>
+      </CheckboxGroup.Root>
+    </div>
+  );
+}
+
+const blue = {
+  400: '#3399FF',
+  600: '#0072E6',
+  800: '#004C99',
+};
+
+const grey = {
+  100: '#E5EAF2',
+  400: '#B0B8C4',
+  800: '#303740',
+};
+
+const labelStyles = css`
+  display: flex;
+  gap: 8px;
+  margin-bottom: 8px;
+`;
+
+const CheckboxLabelStyled = styled('label')`
+  ${labelStyles}
+`;
+
+const CheckboxGroupLabelStyled = styled(CheckboxGroup.Label)`
+  font-size: 17px;
+  font-weight: bold;
+  ${labelStyles}
+`;
+
+function CheckboxLabel(props: React.ComponentPropsWithoutRef<'label'>) {
+  return <CheckboxLabelStyled onMouseDown={(e) => e.preventDefault()} {...props} />;
+}
+
+function CheckboxGroupLabel(props: React.ComponentPropsWithoutRef<'label'>) {
+  return (
+    <CheckboxGroupLabelStyled onMouseDown={(e) => e.preventDefault()} {...props} />
+  );
+}
+
+const Checkbox = styled(BaseCheckbox.Root)(
+  ({ theme }) => `
+    width: 24px;
+    height: 24px;
+    padding: 0;
+    border-radius: 4px;
+    border: 2px solid ${blue[600]};
+    background: none;
+    transition-property: background, border-color;
+    transition-duration: 0.15s;
+    outline: none;
+
+    &[data-disabled] {
+      opacity: 0.4;
+      cursor: not-allowed;
+    }
+
+    &:focus-visible {
+      outline: 2px solid ${theme.palette.mode === 'dark' ? blue[800] : blue[400]};
+      outline-offset: 2px;
+    }
+
+    &[data-state="checked"], &[data-state="mixed"] {
+      border-color: transparent;
+      background: ${blue[600]};
+    }
+  `,
+);
+
+const CheckIcon = styled(Check)`
+  height: 100%;
+  width: 100%;
+`;
+
+const Indicator = styled(BaseCheckbox.Indicator)`
+  height: 100%;
+  display: inline-block;
+  visibility: hidden;
+  color: ${grey[100]};
+
+  &[data-state='checked'],
+  &[data-state='mixed'] {
+    visibility: visible;
+  }
+`;
diff --git a/docs/data/base/components/checkbox-group/UnstyledCheckboxGroupIntroduction/tailwind/index.js b/docs/data/base/components/checkbox-group/UnstyledCheckboxGroupIntroduction/tailwind/index.js
new file mode 100644
index 0000000000..c52ff6d2f1
--- /dev/null
+++ b/docs/data/base/components/checkbox-group/UnstyledCheckboxGroupIntroduction/tailwind/index.js
@@ -0,0 +1,123 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { useTheme } from '@mui/system';
+import * as BaseCheckbox from '@base_ui/react/Checkbox';
+import * as CheckboxGroup from '@base_ui/react/CheckboxGroup';
+import Check from '@mui/icons-material/Check';
+
+function classNames(...classes) {
+  return classes.filter(Boolean).join(' ');
+}
+
+function useIsDarkMode() {
+  const theme = useTheme();
+  return theme.palette.mode === 'dark';
+}
+
+function Label(props) {
+  return (
+    // eslint-disable-next-line jsx-a11y/label-has-associated-control, jsx-a11y/no-noninteractive-element-interactions
+    <label
+      className="flex gap-2 mb-2"
+      onMouseDown={(e) => e.preventDefault()}
+      {...props}
+    />
+  );
+}
+
+export default function UnstyledCheckboxIntroduction() {
+  // Replace this with your app logic for determining dark mode
+  const isDarkMode = useIsDarkMode();
+
+  return (
+    <div className={isDarkMode ? 'dark' : ''} style={{ display: 'flex', gap: 12 }}>
+      <CheckboxGroup.Root defaultValue={['red']}>
+        <CheckboxGroup.Label className="font-bold text-lg mb-2 flex">
+          Colors
+        </CheckboxGroup.Label>
+        <div style={{ display: 'flex', flexDirection: 'column' }}>
+          <Label>
+            <Checkbox name="red">
+              <Indicator>
+                <Check className="w-full h-full" />
+              </Indicator>
+            </Checkbox>
+            Red
+          </Label>
+          <Label>
+            <Checkbox name="green">
+              <Indicator>
+                <Check className="w-full h-full" />
+              </Indicator>
+            </Checkbox>
+            Green
+          </Label>
+          <Label>
+            <Checkbox name="blue">
+              <Indicator>
+                <Check className="w-full h-full" />
+              </Indicator>
+            </Checkbox>
+            Blue
+          </Label>
+        </div>
+      </CheckboxGroup.Root>
+    </div>
+  );
+}
+
+const Checkbox = React.forwardRef(function Checkbox(props, ref) {
+  return (
+    <BaseCheckbox.Root
+      {...props}
+      ref={ref}
+      className={(state) =>
+        classNames(
+          'w-6 h-6 p-0 rounded-md',
+          'border-2 border-solid border-purple-500',
+          'outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-purple-500 focus-visible:ring-opacity-60',
+          'transition-colors duration-150',
+          state.disabled && 'opacity-40 cursor-not-allowed',
+          state.checked && 'bg-purple-500',
+          !state.checked && 'bg-transparent',
+          typeof props.className === 'function'
+            ? props.className(state)
+            : props.className,
+        )
+      }
+    />
+  );
+});
+
+Checkbox.propTypes = {
+  /**
+   * Class names applied to the element or a function that returns them based on the component's state.
+   */
+  className: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+};
+
+const Indicator = React.forwardRef(function Indicator(props, ref) {
+  return (
+    <BaseCheckbox.Indicator
+      {...props}
+      ref={ref}
+      className={(state) =>
+        classNames(
+          'h-full inline-block invisible data-[state=checked]:visible text-gray-100',
+          typeof props.className === 'function'
+            ? props.className(state)
+            : props.className,
+        )
+      }
+    >
+      <Check className="w-full h-full" />
+    </BaseCheckbox.Indicator>
+  );
+});
+
+Indicator.propTypes = {
+  /**
+   * Class names applied to the element or a function that returns them based on the component's state.
+   */
+  className: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+};
diff --git a/docs/data/base/components/checkbox-group/UnstyledCheckboxGroupIntroduction/tailwind/index.tsx b/docs/data/base/components/checkbox-group/UnstyledCheckboxGroupIntroduction/tailwind/index.tsx
new file mode 100644
index 0000000000..527ec859b4
--- /dev/null
+++ b/docs/data/base/components/checkbox-group/UnstyledCheckboxGroupIntroduction/tailwind/index.tsx
@@ -0,0 +1,112 @@
+import * as React from 'react';
+import { useTheme } from '@mui/system';
+import * as BaseCheckbox from '@base_ui/react/Checkbox';
+import * as CheckboxGroup from '@base_ui/react/CheckboxGroup';
+import Check from '@mui/icons-material/Check';
+
+function classNames(...classes: Array<string | undefined | null | false>) {
+  return classes.filter(Boolean).join(' ');
+}
+
+function useIsDarkMode() {
+  const theme = useTheme();
+  return theme.palette.mode === 'dark';
+}
+
+function Label(props: React.ComponentPropsWithoutRef<'label'>) {
+  return (
+    // eslint-disable-next-line jsx-a11y/label-has-associated-control, jsx-a11y/no-noninteractive-element-interactions
+    <label
+      className="flex gap-2 mb-2"
+      onMouseDown={(e) => e.preventDefault()}
+      {...props}
+    />
+  );
+}
+
+export default function UnstyledCheckboxIntroduction() {
+  // Replace this with your app logic for determining dark mode
+  const isDarkMode = useIsDarkMode();
+
+  return (
+    <div className={isDarkMode ? 'dark' : ''} style={{ display: 'flex', gap: 12 }}>
+      <CheckboxGroup.Root defaultValue={['red']}>
+        <CheckboxGroup.Label className="font-bold text-lg mb-2 flex">
+          Colors
+        </CheckboxGroup.Label>
+        <div style={{ display: 'flex', flexDirection: 'column' }}>
+          <Label>
+            <Checkbox name="red">
+              <Indicator>
+                <Check className="w-full h-full" />
+              </Indicator>
+            </Checkbox>
+            Red
+          </Label>
+          <Label>
+            <Checkbox name="green">
+              <Indicator>
+                <Check className="w-full h-full" />
+              </Indicator>
+            </Checkbox>
+            Green
+          </Label>
+          <Label>
+            <Checkbox name="blue">
+              <Indicator>
+                <Check className="w-full h-full" />
+              </Indicator>
+            </Checkbox>
+            Blue
+          </Label>
+        </div>
+      </CheckboxGroup.Root>
+    </div>
+  );
+}
+
+const Checkbox = React.forwardRef<HTMLButtonElement, BaseCheckbox.RootProps>(
+  function Checkbox(props, ref) {
+    return (
+      <BaseCheckbox.Root
+        {...props}
+        ref={ref}
+        className={(state) =>
+          classNames(
+            'w-6 h-6 p-0 rounded-md',
+            'border-2 border-solid border-purple-500',
+            'outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-purple-500 focus-visible:ring-opacity-60',
+            'transition-colors duration-150',
+            state.disabled && 'opacity-40 cursor-not-allowed',
+            state.checked && 'bg-purple-500',
+            !state.checked && 'bg-transparent',
+            typeof props.className === 'function'
+              ? props.className(state)
+              : props.className,
+          )
+        }
+      />
+    );
+  },
+);
+
+const Indicator = React.forwardRef<HTMLSpanElement, BaseCheckbox.IndicatorProps>(
+  function Indicator(props, ref) {
+    return (
+      <BaseCheckbox.Indicator
+        {...props}
+        ref={ref}
+        className={(state) =>
+          classNames(
+            'h-full inline-block invisible data-[state=checked]:visible text-gray-100',
+            typeof props.className === 'function'
+              ? props.className(state)
+              : props.className,
+          )
+        }
+      >
+        <Check className="w-full h-full" />
+      </BaseCheckbox.Indicator>
+    );
+  },
+);
diff --git a/docs/data/base/components/checkbox-group/UnstyledCheckboxGroupNested.js b/docs/data/base/components/checkbox-group/UnstyledCheckboxGroupNested.js
new file mode 100644
index 0000000000..83b3808e19
--- /dev/null
+++ b/docs/data/base/components/checkbox-group/UnstyledCheckboxGroupNested.js
@@ -0,0 +1,146 @@
+import * as React from 'react';
+import { styled } from '@mui/system';
+import * as BaseCheckbox from '@base_ui/react/Checkbox';
+import * as CheckboxGroup from '@base_ui/react/CheckboxGroup';
+import HorizontalRule from '@mui/icons-material/HorizontalRule';
+import Check from '@mui/icons-material/Check';
+
+const colors = ['red', 'green', 'blue'];
+
+export default function UnstyledCheckboxGroupNested() {
+  const [value, setValue] = React.useState([]);
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column' }}>
+      <CheckboxGroup.Root allValues={colors} value={value} onValueChange={setValue}>
+        <CheckboxGroupLabel>Colors</CheckboxGroupLabel>
+        <ListRoot>
+          <Label onMouseDown={(e) => e.preventDefault()}>
+            <Checkbox parent>
+              <Indicator
+                render={(props, { indeterminate }) => (
+                  <Indicator {...props}>
+                    {indeterminate ? <HorizontalRuleIcon /> : <CheckIcon />}
+                  </Indicator>
+                )}
+              />
+            </Checkbox>
+            All Colors
+          </Label>
+        </ListRoot>
+        <List>
+          {colors.map((color) => (
+            <ListItem key={color}>
+              <Label onMouseDown={(e) => e.preventDefault()}>
+                <Checkbox name={color}>
+                  <Indicator>
+                    <CheckIcon />
+                  </Indicator>
+                </Checkbox>
+                {color}
+              </Label>
+            </ListItem>
+          ))}
+        </List>
+      </CheckboxGroup.Root>
+    </div>
+  );
+}
+
+const blue = {
+  400: '#3399FF',
+  600: '#0072E6',
+  800: '#004C99',
+};
+
+const grey = {
+  100: '#E5EAF2',
+  400: '#B0B8C4',
+  800: '#303740',
+};
+
+const CheckboxGroupLabel = styled(CheckboxGroup.Label)`
+  display: block;
+  font-weight: bold;
+  font-size: 18px;
+  margin-bottom: 8px;
+`;
+
+const Checkbox = styled(BaseCheckbox.Root)(
+  ({ theme }) => `
+    width: 24px;
+    height: 24px;
+    padding: 0;
+    border-radius: 4px;
+    border: 2px solid ${blue[600]};
+    background: none;
+    transition-property: background, border-color;
+    transition-duration: 0.15s;
+    outline: none;
+
+    &[data-disabled] {
+      opacity: 0.4;
+      cursor: not-allowed;
+    }
+
+    &:focus-visible {
+      outline: 2px solid ${theme.palette.mode === 'dark' ? blue[800] : blue[400]};
+      outline-offset: 2px;
+    }
+
+    &[data-state="checked"], &[data-state="mixed"] {
+      border-color: transparent;
+      background: ${blue[600]};
+    }
+  `,
+);
+
+const HorizontalRuleIcon = styled(HorizontalRule)`
+  height: 100%;
+  width: 100%;
+`;
+
+const CheckIcon = styled(Check)`
+  height: 100%;
+  width: 100%;
+`;
+
+const Indicator = styled(BaseCheckbox.Indicator)`
+  height: 100%;
+  display: inline-block;
+  visibility: hidden;
+  color: ${grey[100]};
+
+  &[data-state='checked'],
+  &[data-state='mixed'] {
+    visibility: visible;
+  }
+`;
+
+const ListRoot = styled('div')`
+  display: flex;
+  align-items: center;
+  margin-bottom: 8px;
+`;
+
+const List = styled('ul')`
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  margin-left: 32px;
+`;
+
+const ListItem = styled('li')`
+  display: flex;
+  align-items: center;
+
+  &:not(:last-child) {
+    margin-bottom: 8px;
+  }
+`;
+
+const Label = styled('label')`
+  display: flex;
+  gap: 8px;
+  text-transform: capitalize;
+`;
diff --git a/docs/data/base/components/checkbox-group/UnstyledCheckboxGroupNested.tsx b/docs/data/base/components/checkbox-group/UnstyledCheckboxGroupNested.tsx
new file mode 100644
index 0000000000..9ff290fc78
--- /dev/null
+++ b/docs/data/base/components/checkbox-group/UnstyledCheckboxGroupNested.tsx
@@ -0,0 +1,146 @@
+import * as React from 'react';
+import { styled } from '@mui/system';
+import * as BaseCheckbox from '@base_ui/react/Checkbox';
+import * as CheckboxGroup from '@base_ui/react/CheckboxGroup';
+import HorizontalRule from '@mui/icons-material/HorizontalRule';
+import Check from '@mui/icons-material/Check';
+
+const colors = ['red', 'green', 'blue'];
+
+export default function UnstyledCheckboxGroupNested() {
+  const [value, setValue] = React.useState<string[]>([]);
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column' }}>
+      <CheckboxGroup.Root allValues={colors} value={value} onValueChange={setValue}>
+        <CheckboxGroupLabel>Colors</CheckboxGroupLabel>
+        <ListRoot>
+          <Label onMouseDown={(e) => e.preventDefault()}>
+            <Checkbox parent>
+              <Indicator
+                render={(props, { indeterminate }) => (
+                  <Indicator {...props}>
+                    {indeterminate ? <HorizontalRuleIcon /> : <CheckIcon />}
+                  </Indicator>
+                )}
+              />
+            </Checkbox>
+            All Colors
+          </Label>
+        </ListRoot>
+        <List>
+          {colors.map((color) => (
+            <ListItem key={color}>
+              <Label onMouseDown={(e) => e.preventDefault()}>
+                <Checkbox name={color}>
+                  <Indicator>
+                    <CheckIcon />
+                  </Indicator>
+                </Checkbox>
+                {color}
+              </Label>
+            </ListItem>
+          ))}
+        </List>
+      </CheckboxGroup.Root>
+    </div>
+  );
+}
+
+const blue = {
+  400: '#3399FF',
+  600: '#0072E6',
+  800: '#004C99',
+};
+
+const grey = {
+  100: '#E5EAF2',
+  400: '#B0B8C4',
+  800: '#303740',
+};
+
+const CheckboxGroupLabel = styled(CheckboxGroup.Label)`
+  display: block;
+  font-weight: bold;
+  font-size: 18px;
+  margin-bottom: 8px;
+`;
+
+const Checkbox = styled(BaseCheckbox.Root)(
+  ({ theme }) => `
+    width: 24px;
+    height: 24px;
+    padding: 0;
+    border-radius: 4px;
+    border: 2px solid ${blue[600]};
+    background: none;
+    transition-property: background, border-color;
+    transition-duration: 0.15s;
+    outline: none;
+
+    &[data-disabled] {
+      opacity: 0.4;
+      cursor: not-allowed;
+    }
+
+    &:focus-visible {
+      outline: 2px solid ${theme.palette.mode === 'dark' ? blue[800] : blue[400]};
+      outline-offset: 2px;
+    }
+
+    &[data-state="checked"], &[data-state="mixed"] {
+      border-color: transparent;
+      background: ${blue[600]};
+    }
+  `,
+);
+
+const HorizontalRuleIcon = styled(HorizontalRule)`
+  height: 100%;
+  width: 100%;
+`;
+
+const CheckIcon = styled(Check)`
+  height: 100%;
+  width: 100%;
+`;
+
+const Indicator = styled(BaseCheckbox.Indicator)`
+  height: 100%;
+  display: inline-block;
+  visibility: hidden;
+  color: ${grey[100]};
+
+  &[data-state='checked'],
+  &[data-state='mixed'] {
+    visibility: visible;
+  }
+`;
+
+const ListRoot = styled('div')`
+  display: flex;
+  align-items: center;
+  margin-bottom: 8px;
+`;
+
+const List = styled('ul')`
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  margin-left: 32px;
+`;
+
+const ListItem = styled('li')`
+  display: flex;
+  align-items: center;
+
+  &:not(:last-child) {
+    margin-bottom: 8px;
+  }
+`;
+
+const Label = styled('label')`
+  display: flex;
+  gap: 8px;
+  text-transform: capitalize;
+`;
diff --git a/docs/data/base/components/checkbox-group/checkbox-group.md b/docs/data/base/components/checkbox-group/checkbox-group.md
new file mode 100644
index 0000000000..bf6f85f1ae
--- /dev/null
+++ b/docs/data/base/components/checkbox-group/checkbox-group.md
@@ -0,0 +1,102 @@
+---
+productId: base-ui
+title: React Checkbox Group component and hook
+components: CheckboxGroupRoot, CheckboxGroupLabel
+githubLabel: 'component: checkbox'
+waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/
+packageName: '@base_ui/react'
+---
+
+# Checkbox Group
+
+<p class="description">Checkbox groups combine a series of checkboxes together with a label.</p>
+
+{{"component": "@mui/docs/ComponentLinkHeader", "design": false}}
+
+{{"component": "modules/components/ComponentPageTabs.js"}}
+
+{{"demo": "UnstyledCheckboxGroupIntroduction", "defaultCodeOpen": false, "bg": "gradient"}}
+
+## Installation
+
+Base UI components are all available as a single package.
+
+<codeblock storageKey="package-manager">
+
+```bash npm
+npm install @base_ui/react
+```
+
+```bash yarn
+yarn add @base_ui/react
+```
+
+```bash pnpm
+pnpm add @base_ui/react
+```
+
+</codeblock>
+
+Once you have the package installed, import the component.
+
+```ts
+import * as CheckboxGroup from '@base_ui/react/CheckboxGroup';
+```
+
+## Anatomy
+
+Checkbox is composed of two components:
+
+- `<CheckboxGroup.Root />` renders a `<div>` with a `group` role.
+- `<CheckboxGroup.Label />` renders a `<span>` to label the group of checkboxes.
+
+```tsx
+<CheckboxGroup.Root>
+  <CheckboxGroup.Label />
+  {/* Checkboxes */}
+</CheckboxGroup.Root>
+```
+
+## Controlled
+
+The `value` and `onValueChange` props control the Checkbox Group with external state. `value` is an array of strings matching the `name` props of Checkboxes that are currently checked:
+
+```jsx
+const [value, setValue] = useState(['red']);
+
+return (
+  <CheckboxGroup.Root value={value} onValueChange={setValue}>
+    <CheckboxGroup.Label />
+    <Checkbox.Root name="red" /> {/* Checked */}
+    <Checkbox.Root name="green" />
+    <Checkbox.Root name="blue" />
+  </CheckboxGroup.Root>
+);
+```
+
+## Parent Checkbox
+
+A Checkbox can control a group of child Checkboxes.
+
+1. Make `CheckboxGroup.Root` controlled and add `allValues` as a prop — an array of strings that contains the names of all the child checkboxes.
+2. Add a `parent` prop to the `Checkbox.Root` component that controls the other (child) Checkboxes inside the group.
+3. Give the child Checkboxes a `name` prop that identifies them inside the `allValues` array.
+
+```jsx
+const allValues = ['a', 'b', 'c'];
+
+function App() {
+  const [value, setValue] = useState([]);
+  return (
+    <CheckboxGroup.Root value={value} onValueChange={setValue} allValues={allValues}>
+      <CheckboxGroup.Label />
+      <Checkbox.Root parent />
+      {allValues.map((value) => (
+        <Checkbox.Root key={value} name={value} />
+      ))}
+    </CheckboxGroup.Root>
+  );
+}
+```
+
+{{"demo": "UnstyledCheckboxGroupNested.js"}}
diff --git a/docs/data/base/components/checkbox/UnstyledCheckboxIndeterminateGroup.js b/docs/data/base/components/checkbox/UnstyledCheckboxIndeterminateGroup.js
index af25dd54fe..c9237f96dc 100644
--- a/docs/data/base/components/checkbox/UnstyledCheckboxIndeterminateGroup.js
+++ b/docs/data/base/components/checkbox/UnstyledCheckboxIndeterminateGroup.js
@@ -7,10 +7,11 @@ import Check from '@mui/icons-material/Check';
 const colors = ['Red', 'Green', 'Blue'];
 
 export default function UnstyledCheckboxIndeterminateGroup() {
-  const [checkedValues, setCheckedValues] = React.useState([false, true, false]);
+  const [checkedValues, setCheckedValues] = React.useState(['Green']);
 
-  const isChecked = checkedValues.every((value) => value);
-  const isIndeterminate = checkedValues.some((value) => value) && !isChecked;
+  const isChecked = checkedValues.length === colors.length;
+  const isIndeterminate =
+    checkedValues.length !== colors.length && checkedValues.length > 0;
 
   const id = React.useId();
 
@@ -23,8 +24,7 @@ export default function UnstyledCheckboxIndeterminateGroup() {
           indeterminate={isIndeterminate}
           checked={isChecked}
           onChange={(event) => {
-            const checked = event.target.checked;
-            setCheckedValues([checked, checked, checked]);
+            setCheckedValues(event.target.checked ? colors : []);
           }}
         >
           <Indicator>
@@ -36,14 +36,18 @@ export default function UnstyledCheckboxIndeterminateGroup() {
         </Label>
       </ListRoot>
       <List>
-        {colors.map((color, index) => (
+        {colors.map((color) => (
           <ListItem key={color}>
             <Checkbox
               id={`${id}-${color}`}
-              checked={checkedValues[index]}
+              checked={checkedValues.includes(color)}
               onChange={(event) => {
                 const newCheckedValues = [...checkedValues];
-                newCheckedValues[index] = event.target.checked;
+                if (event.target.checked) {
+                  newCheckedValues.push(color);
+                } else {
+                  newCheckedValues.splice(newCheckedValues.indexOf(color), 1);
+                }
                 setCheckedValues(newCheckedValues);
               }}
             >
diff --git a/docs/data/base/components/checkbox/UnstyledCheckboxIndeterminateGroup.tsx b/docs/data/base/components/checkbox/UnstyledCheckboxIndeterminateGroup.tsx
index af25dd54fe..c9237f96dc 100644
--- a/docs/data/base/components/checkbox/UnstyledCheckboxIndeterminateGroup.tsx
+++ b/docs/data/base/components/checkbox/UnstyledCheckboxIndeterminateGroup.tsx
@@ -7,10 +7,11 @@ import Check from '@mui/icons-material/Check';
 const colors = ['Red', 'Green', 'Blue'];
 
 export default function UnstyledCheckboxIndeterminateGroup() {
-  const [checkedValues, setCheckedValues] = React.useState([false, true, false]);
+  const [checkedValues, setCheckedValues] = React.useState(['Green']);
 
-  const isChecked = checkedValues.every((value) => value);
-  const isIndeterminate = checkedValues.some((value) => value) && !isChecked;
+  const isChecked = checkedValues.length === colors.length;
+  const isIndeterminate =
+    checkedValues.length !== colors.length && checkedValues.length > 0;
 
   const id = React.useId();
 
@@ -23,8 +24,7 @@ export default function UnstyledCheckboxIndeterminateGroup() {
           indeterminate={isIndeterminate}
           checked={isChecked}
           onChange={(event) => {
-            const checked = event.target.checked;
-            setCheckedValues([checked, checked, checked]);
+            setCheckedValues(event.target.checked ? colors : []);
           }}
         >
           <Indicator>
@@ -36,14 +36,18 @@ export default function UnstyledCheckboxIndeterminateGroup() {
         </Label>
       </ListRoot>
       <List>
-        {colors.map((color, index) => (
+        {colors.map((color) => (
           <ListItem key={color}>
             <Checkbox
               id={`${id}-${color}`}
-              checked={checkedValues[index]}
+              checked={checkedValues.includes(color)}
               onChange={(event) => {
                 const newCheckedValues = [...checkedValues];
-                newCheckedValues[index] = event.target.checked;
+                if (event.target.checked) {
+                  newCheckedValues.push(color);
+                } else {
+                  newCheckedValues.splice(newCheckedValues.indexOf(color), 1);
+                }
                 setCheckedValues(newCheckedValues);
               }}
             >
diff --git a/docs/data/base/pages.ts b/docs/data/base/pages.ts
index 9f049a2afa..72a5bec784 100644
--- a/docs/data/base/pages.ts
+++ b/docs/data/base/pages.ts
@@ -25,6 +25,7 @@ const pages: readonly MuiPage[] = [
           // { pathname: '/base-ui/react-autocomplete', title: 'Autocomplete' },
           // { pathname: '/base-ui/react-button', title: 'Button' },
           { pathname: '/base-ui/react-checkbox', title: 'Checkbox' },
+          { pathname: '/base-ui/react-checkbox-group', title: 'Checkbox Group' },
           // { pathname: '/base-ui/react-input', title: 'Input' },
           { pathname: '/base-ui/react-number-field', title: 'Number Field' },
           // { pathname: '/base-ui/react-radio-group', title: 'Radio Group', planned: true },
diff --git a/docs/data/base/pagesApi.js b/docs/data/base/pagesApi.js
index 17e5e1f9eb..11e05a4bc3 100644
--- a/docs/data/base/pagesApi.js
+++ b/docs/data/base/pagesApi.js
@@ -1,6 +1,14 @@
 module.exports = [
   { pathname: '/base-ui/react-badge/components-api/#badge', title: 'Badge' },
   { pathname: '/base-ui/react-button/components-api/#button', title: 'Button' },
+  {
+    pathname: '/base-ui/react-checkbox-group/components-api/#checkbox-group-label',
+    title: 'CheckboxGroupLabel',
+  },
+  {
+    pathname: '/base-ui/react-checkbox-group/components-api/#checkbox-group-root',
+    title: 'CheckboxGroupRoot',
+  },
   {
     pathname: '/base-ui/react-checkbox/components-api/#checkbox-indicator',
     title: 'CheckboxIndicator',
diff --git a/docs/pages/base-ui/api/checkbox-group-label.json b/docs/pages/base-ui/api/checkbox-group-label.json
new file mode 100644
index 0000000000..89cbe96181
--- /dev/null
+++ b/docs/pages/base-ui/api/checkbox-group-label.json
@@ -0,0 +1,19 @@
+{
+  "props": {
+    "className": { "type": { "name": "union", "description": "func<br>&#124;&nbsp;string" } },
+    "render": { "type": { "name": "union", "description": "element<br>&#124;&nbsp;func" } }
+  },
+  "name": "CheckboxGroupLabel",
+  "imports": [
+    "import * as CheckboxGroup from '@base_ui/react/CheckboxGroup';\nconst CheckboxGroupLabel = CheckboxGroup.Label;"
+  ],
+  "classes": [],
+  "spread": true,
+  "themeDefaultProps": true,
+  "muiName": "CheckboxGroupLabel",
+  "forwardsRefTo": "HTMLSpanElement",
+  "filename": "/packages/mui-base/src/CheckboxGroup/Label/CheckboxGroupLabel.tsx",
+  "inheritance": null,
+  "demos": "<ul><li><a href=\"/base-ui/react-checkbox-group/\">Checkbox Group</a></li></ul>",
+  "cssComponent": false
+}
diff --git a/docs/pages/base-ui/api/checkbox-group-root.json b/docs/pages/base-ui/api/checkbox-group-root.json
new file mode 100644
index 0000000000..d4b1208de0
--- /dev/null
+++ b/docs/pages/base-ui/api/checkbox-group-root.json
@@ -0,0 +1,19 @@
+{
+  "props": {
+    "className": { "type": { "name": "union", "description": "func<br>&#124;&nbsp;string" } },
+    "render": { "type": { "name": "union", "description": "element<br>&#124;&nbsp;func" } }
+  },
+  "name": "CheckboxGroupRoot",
+  "imports": [
+    "import * as CheckboxGroup from '@base_ui/react/CheckboxGroup';\nconst CheckboxGroupRoot = CheckboxGroup.Root;"
+  ],
+  "classes": [],
+  "spread": true,
+  "themeDefaultProps": true,
+  "muiName": "CheckboxGroupRoot",
+  "forwardsRefTo": "HTMLDivElement",
+  "filename": "/packages/mui-base/src/CheckboxGroup/Root/CheckboxGroupRoot.tsx",
+  "inheritance": null,
+  "demos": "<ul><li><a href=\"/base-ui/react-checkbox-group/\">Checkbox Group</a></li></ul>",
+  "cssComponent": false
+}
diff --git a/docs/pages/base-ui/api/checkbox-root.json b/docs/pages/base-ui/api/checkbox-root.json
index ac8ec5d670..73531e39f2 100644
--- a/docs/pages/base-ui/api/checkbox-root.json
+++ b/docs/pages/base-ui/api/checkbox-root.json
@@ -17,6 +17,7 @@
         "describedArgs": ["event"]
       }
     },
+    "parent": { "type": { "name": "bool" }, "default": "false" },
     "readOnly": { "type": { "name": "bool" }, "default": "false" },
     "render": { "type": { "name": "union", "description": "element<br>&#124;&nbsp;func" } },
     "required": { "type": { "name": "bool" }, "default": "false" }
diff --git a/docs/pages/base-ui/api/use-checkbox-group-label.json b/docs/pages/base-ui/api/use-checkbox-group-label.json
new file mode 100644
index 0000000000..3a5a41764e
--- /dev/null
+++ b/docs/pages/base-ui/api/use-checkbox-group-label.json
@@ -0,0 +1,28 @@
+{
+  "parameters": {
+    "id": {
+      "type": { "name": "string | undefined", "description": "string | undefined" },
+      "required": true
+    },
+    "setId": {
+      "type": {
+        "name": "React.Dispatch&lt;React.SetStateAction&lt;string | undefined&gt;&gt;",
+        "description": "React.Dispatch&lt;React.SetStateAction&lt;string | undefined&gt;&gt;"
+      },
+      "required": true
+    }
+  },
+  "returnValue": {
+    "getLabelProps": {
+      "type": {
+        "name": "(externalProps?: GenericHTMLProps) =&gt; GenericHTMLProps",
+        "description": "(externalProps?: GenericHTMLProps) =&gt; GenericHTMLProps"
+      },
+      "required": true
+    }
+  },
+  "name": "useCheckboxGroupLabel",
+  "filename": "/packages/mui-base/src/CheckboxGroup/Label/useCheckboxGroupLabel.ts",
+  "imports": ["import { useCheckboxGroupLabel } from '@base_ui/react/CheckboxGroup';"],
+  "demos": "<ul></ul>"
+}
diff --git a/docs/pages/base-ui/api/use-checkbox-group-parent.json b/docs/pages/base-ui/api/use-checkbox-group-parent.json
new file mode 100644
index 0000000000..31065b4f57
--- /dev/null
+++ b/docs/pages/base-ui/api/use-checkbox-group-parent.json
@@ -0,0 +1,37 @@
+{
+  "parameters": {
+    "allValues": { "type": { "name": "string[]", "description": "string[]" } },
+    "onValueChange": {
+      "type": {
+        "name": "(value: string[]) =&gt; void",
+        "description": "(value: string[]) =&gt; void"
+      }
+    },
+    "value": { "type": { "name": "string[]", "description": "string[]" } }
+  },
+  "returnValue": {
+    "getChildProps": {
+      "type": {
+        "name": "(name: string) =&gt; {\n  name: string\n  id: string\n  checked: boolean\n  onChange: (event: React.ChangeEvent&lt;HTMLInputElement&gt;) =&gt; void\n}",
+        "description": "(name: string) =&gt; {\n  name: string\n  id: string\n  checked: boolean\n  onChange: (event: React.ChangeEvent&lt;HTMLInputElement&gt;) =&gt; void\n}"
+      },
+      "required": true
+    },
+    "getParentProps": {
+      "type": {
+        "name": "() =&gt; {\n  id: string | undefined\n  indeterminate: boolean\n  checked: boolean\n  &#39;aria-controls&#39;: string\n  onChange: (event: React.ChangeEvent&lt;HTMLInputElement&gt;) =&gt; void\n}",
+        "description": "() =&gt; {\n  id: string | undefined\n  indeterminate: boolean\n  checked: boolean\n  &#39;aria-controls&#39;: string\n  onChange: (event: React.ChangeEvent&lt;HTMLInputElement&gt;) =&gt; void\n}"
+      },
+      "required": true
+    },
+    "id": {
+      "type": { "name": "string | undefined", "description": "string | undefined" },
+      "required": true
+    },
+    "indeterminate": { "type": { "name": "boolean", "description": "boolean" }, "required": true }
+  },
+  "name": "useCheckboxGroupParent",
+  "filename": "/packages/mui-base/src/CheckboxGroup/Parent/useCheckboxGroupParent.ts",
+  "imports": ["import { useCheckboxGroupParent } from '@base_ui/react/CheckboxGroup';"],
+  "demos": "<ul></ul>"
+}
diff --git a/docs/pages/base-ui/api/use-checkbox-group-root.json b/docs/pages/base-ui/api/use-checkbox-group-root.json
new file mode 100644
index 0000000000..4e970d599d
--- /dev/null
+++ b/docs/pages/base-ui/api/use-checkbox-group-root.json
@@ -0,0 +1,42 @@
+{
+  "parameters": {},
+  "returnValue": {
+    "getRootProps": {
+      "type": {
+        "name": "(externalProps?: GenericHTMLProps) =&gt; GenericHTMLProps",
+        "description": "(externalProps?: GenericHTMLProps) =&gt; GenericHTMLProps"
+      },
+      "required": true
+    },
+    "labelId": {
+      "type": { "name": "string | undefined", "description": "string | undefined" },
+      "required": true
+    },
+    "parent": {
+      "type": {
+        "name": "UseCheckboxGroupParentReturnValue",
+        "description": "UseCheckboxGroupParentReturnValue"
+      },
+      "required": true
+    },
+    "setLabelId": {
+      "type": {
+        "name": "React.Dispatch&lt;React.SetStateAction&lt;string | undefined&gt;&gt;",
+        "description": "React.Dispatch&lt;React.SetStateAction&lt;string | undefined&gt;&gt;"
+      },
+      "required": true
+    },
+    "setValue": {
+      "type": {
+        "name": "(value: string[]) =&gt; void",
+        "description": "(value: string[]) =&gt; void"
+      },
+      "required": true
+    },
+    "value": { "type": { "name": "string[]", "description": "string[]" }, "required": true }
+  },
+  "name": "useCheckboxGroupRoot",
+  "filename": "/packages/mui-base/src/CheckboxGroup/Root/useCheckboxGroupRoot.tsx",
+  "imports": ["import { useCheckboxGroupRoot } from '@base_ui/react/CheckboxGroup';"],
+  "demos": "<ul></ul>"
+}
diff --git a/docs/pages/base-ui/api/use-checkbox-root.json b/docs/pages/base-ui/api/use-checkbox-root.json
index bd709c8bfc..f0950fa3fd 100644
--- a/docs/pages/base-ui/api/use-checkbox-root.json
+++ b/docs/pages/base-ui/api/use-checkbox-root.json
@@ -24,6 +24,7 @@
         "description": "React.ChangeEventHandler&lt;HTMLInputElement&gt;"
       }
     },
+    "parent": { "type": { "name": "boolean", "description": "boolean" }, "default": "false" },
     "readOnly": { "type": { "name": "boolean", "description": "boolean" }, "default": "false" },
     "required": { "type": { "name": "boolean", "description": "boolean" }, "default": "false" }
   },
diff --git a/docs/pages/base-ui/react-checkbox-group/[docsTab]/index.js b/docs/pages/base-ui/react-checkbox-group/[docsTab]/index.js
new file mode 100644
index 0000000000..17783e73e8
--- /dev/null
+++ b/docs/pages/base-ui/react-checkbox-group/[docsTab]/index.js
@@ -0,0 +1,54 @@
+import * as React from 'react';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2';
+import AppFrame from 'docs/src/modules/components/AppFrame';
+import * as pageProps from 'docs-base/data/base/components/checkbox-group/checkbox-group.md?@mui/markdown';
+import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
+import CheckboxGroupLabelApiJsonPageContent from '../../api/checkbox-group-label.json';
+import CheckboxGroupRootApiJsonPageContent from '../../api/checkbox-group-root.json';
+
+export default function Page(props) {
+  const { userLanguage, ...other } = props;
+  return <MarkdownDocs {...pageProps} {...other} />;
+}
+
+Page.getLayout = (page) => {
+  return <AppFrame>{page}</AppFrame>;
+};
+
+export const getStaticPaths = () => {
+  return {
+    paths: [{ params: { docsTab: 'components-api' } }, { params: { docsTab: 'hooks-api' } }],
+    fallback: false, // can also be true or 'blocking'
+  };
+};
+
+export const getStaticProps = () => {
+  const CheckboxGroupLabelApiReq = require.context(
+    'docs-base/translations/api-docs/checkbox-group-label',
+    false,
+    /\.\/checkbox-group-label.*.json$/,
+  );
+  const CheckboxGroupLabelApiDescriptions = mapApiPageTranslations(CheckboxGroupLabelApiReq);
+
+  const CheckboxGroupRootApiReq = require.context(
+    'docs-base/translations/api-docs/checkbox-group-root',
+    false,
+    /\.\/checkbox-group-root.*.json$/,
+  );
+  const CheckboxGroupRootApiDescriptions = mapApiPageTranslations(CheckboxGroupRootApiReq);
+
+  return {
+    props: {
+      componentsApiDescriptions: {
+        CheckboxGroupLabel: CheckboxGroupLabelApiDescriptions,
+        CheckboxGroupRoot: CheckboxGroupRootApiDescriptions,
+      },
+      componentsApiPageContents: {
+        CheckboxGroupLabel: CheckboxGroupLabelApiJsonPageContent,
+        CheckboxGroupRoot: CheckboxGroupRootApiJsonPageContent,
+      },
+      hooksApiDescriptions: {},
+      hooksApiPageContents: {},
+    },
+  };
+};
diff --git a/docs/pages/base-ui/react-checkbox-group/index.js b/docs/pages/base-ui/react-checkbox-group/index.js
new file mode 100644
index 0000000000..a6fd05a9dd
--- /dev/null
+++ b/docs/pages/base-ui/react-checkbox-group/index.js
@@ -0,0 +1,13 @@
+import * as React from 'react';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2';
+import AppFrame from 'docs/src/modules/components/AppFrame';
+import * as pageProps from 'docs-base/data/base/components/checkbox-group/checkbox-group.md?@mui/markdown';
+
+export default function Page(props) {
+  const { userLanguage, ...other } = props;
+  return <MarkdownDocs {...pageProps} {...other} />;
+}
+
+Page.getLayout = (page) => {
+  return <AppFrame>{page}</AppFrame>;
+};
diff --git a/docs/translations/api-docs/checkbox-group-label/checkbox-group-label.json b/docs/translations/api-docs/checkbox-group-label/checkbox-group-label.json
new file mode 100644
index 0000000000..c9a4f4750f
--- /dev/null
+++ b/docs/translations/api-docs/checkbox-group-label/checkbox-group-label.json
@@ -0,0 +1,10 @@
+{
+  "componentDescription": "The label of a checkbox group.",
+  "propDescriptions": {
+    "className": {
+      "description": "Class names applied to the element or a function that returns them based on the component&#39;s state."
+    },
+    "render": { "description": "A function to customize rendering of the component." }
+  },
+  "classDescriptions": {}
+}
diff --git a/docs/translations/api-docs/checkbox-group-root/checkbox-group-root.json b/docs/translations/api-docs/checkbox-group-root/checkbox-group-root.json
new file mode 100644
index 0000000000..ee31bdb481
--- /dev/null
+++ b/docs/translations/api-docs/checkbox-group-root/checkbox-group-root.json
@@ -0,0 +1,10 @@
+{
+  "componentDescription": "The foundation for building custom-styled checkbox groups.",
+  "propDescriptions": {
+    "className": {
+      "description": "Class names applied to the element or a function that returns them based on the component&#39;s state."
+    },
+    "render": { "description": "A function to customize rendering of the component." }
+  },
+  "classDescriptions": {}
+}
diff --git a/docs/translations/api-docs/checkbox-root/checkbox-root.json b/docs/translations/api-docs/checkbox-root/checkbox-root.json
index 1e66a0abcd..3de6fd73c7 100644
--- a/docs/translations/api-docs/checkbox-root/checkbox-root.json
+++ b/docs/translations/api-docs/checkbox-root/checkbox-root.json
@@ -19,6 +19,9 @@
         "event": "The event source of the callback. You can pull out the new value by accessing <code>event.target.value</code> (string). You can pull out the new checked state by accessing <code>event.target.checked</code> (boolean)."
       }
     },
+    "parent": {
+      "description": "If <code>true</code>, the checkbox is a parent checkbox for a group of child checkboxes."
+    },
     "readOnly": { "description": "If <code>true</code>, the component is read only." },
     "render": { "description": "A function to customize rendering of the component." },
     "required": {
diff --git a/docs/translations/api-docs/use-checkbox-group-label/use-checkbox-group-label.json b/docs/translations/api-docs/use-checkbox-group-label/use-checkbox-group-label.json
new file mode 100644
index 0000000000..aabd7c1a5c
--- /dev/null
+++ b/docs/translations/api-docs/use-checkbox-group-label/use-checkbox-group-label.json
@@ -0,0 +1,10 @@
+{
+  "hookDescription": "",
+  "parametersDescriptions": {
+    "id": { "description": "The id of the label." },
+    "setId": { "description": "Set the id of the label." }
+  },
+  "returnValueDescriptions": {
+    "getLabelProps": { "description": "Props to apply to the label element." }
+  }
+}
diff --git a/docs/translations/api-docs/use-checkbox-group-parent/use-checkbox-group-parent.json b/docs/translations/api-docs/use-checkbox-group-parent/use-checkbox-group-parent.json
new file mode 100644
index 0000000000..e3eb65c6e4
--- /dev/null
+++ b/docs/translations/api-docs/use-checkbox-group-parent/use-checkbox-group-parent.json
@@ -0,0 +1 @@
+{ "hookDescription": "", "parametersDescriptions": {}, "returnValueDescriptions": {} }
diff --git a/docs/translations/api-docs/use-checkbox-group-root/use-checkbox-group-root.json b/docs/translations/api-docs/use-checkbox-group-root/use-checkbox-group-root.json
new file mode 100644
index 0000000000..e3eb65c6e4
--- /dev/null
+++ b/docs/translations/api-docs/use-checkbox-group-root/use-checkbox-group-root.json
@@ -0,0 +1 @@
+{ "hookDescription": "", "parametersDescriptions": {}, "returnValueDescriptions": {} }
diff --git a/docs/translations/api-docs/use-checkbox-root/use-checkbox-root.json b/docs/translations/api-docs/use-checkbox-root/use-checkbox-root.json
index f534acaa60..a0762c0279 100644
--- a/docs/translations/api-docs/use-checkbox-root/use-checkbox-root.json
+++ b/docs/translations/api-docs/use-checkbox-root/use-checkbox-root.json
@@ -11,6 +11,9 @@
     "inputRef": { "description": "The ref to the input element." },
     "name": { "description": "Name of the underlying input element." },
     "onChange": { "description": "Callback fired when the state is changed." },
+    "parent": {
+      "description": "If <code>true</code>, the checkbox is a parent checkbox for a group of child checkboxes."
+    },
     "readOnly": { "description": "If <code>true</code>, the component is read only." },
     "required": {
       "description": "If <code>true</code>, the <code>input</code> element is required."
diff --git a/docs/translations/translations.json b/docs/translations/translations.json
index 569c621e49..ea21d6c43f 100644
--- a/docs/translations/translations.json
+++ b/docs/translations/translations.json
@@ -221,6 +221,7 @@
     "/base-ui/all-components": "All components",
     "inputs": "Inputs",
     "/base-ui/react-checkbox": "Checkbox",
+    "/base-ui/react-checkbox-group": "Checkbox Group",
     "/base-ui/react-number-field": "Number Field",
     "/base-ui/react-switch": "Switch",
     "data-display": "Data display",
diff --git a/packages/mui-base/src/Checkbox/Root/CheckboxRoot.tsx b/packages/mui-base/src/Checkbox/Root/CheckboxRoot.tsx
index 94a9b636ed..adacf18971 100644
--- a/packages/mui-base/src/Checkbox/Root/CheckboxRoot.tsx
+++ b/packages/mui-base/src/Checkbox/Root/CheckboxRoot.tsx
@@ -8,6 +8,7 @@ import { resolveClassName } from '../../utils/resolveClassName';
 import { evaluateRenderProp } from '../../utils/evaluateRenderProp';
 import { useRenderPropForkRef } from '../../utils/useRenderPropForkRef';
 import { defaultRenderFunctions } from '../../utils/defaultRenderFunctions';
+import { useLooseCheckboxGroupRootContext } from '../../CheckboxGroup/Root/CheckboxGroupRootContext';
 
 /**
  * The foundation for building custom-styled checkboxes.
@@ -28,6 +29,7 @@ const CheckboxRoot = React.forwardRef(function CheckboxRoot(
     name,
     onChange,
     defaultChecked,
+    parent = false,
     disabled = false,
     readOnly = false,
     indeterminate = false,
@@ -39,17 +41,44 @@ const CheckboxRoot = React.forwardRef(function CheckboxRoot(
   } = props;
   const render = renderProp ?? defaultRenderFunctions.button;
 
-  const { checked, getInputProps, getButtonProps } = useCheckboxRoot(props);
+  const groupContext = useLooseCheckboxGroupRootContext();
+  const isGrouped = groupContext?.parent && groupContext.allValues;
+
+  let groupProps: Partial<Omit<CheckboxRootProps, 'className'>> = {};
+  if (isGrouped) {
+    if (parent) {
+      groupProps = groupContext.parent.getParentProps();
+    } else if (name) {
+      groupProps = groupContext.parent.getChildProps(name);
+    }
+  }
+
+  const {
+    checked: groupChecked = checkedProp,
+    indeterminate: groupIndeterminate = indeterminate,
+    onChange: groupOnChange = onChange,
+    ...otherGroupProps
+  } = groupProps;
+
+  const { checked, getInputProps, getButtonProps } = useCheckboxRoot({
+    ...props,
+    checked: groupChecked,
+    indeterminate: groupIndeterminate,
+    onChange: groupOnChange,
+  });
+
+  const computedChecked = isGrouped ? Boolean(groupChecked) : checked;
+  const computedIndeterminate = isGrouped ? groupIndeterminate : indeterminate;
 
   const ownerState: CheckboxOwnerState = React.useMemo(
     () => ({
-      checked,
+      checked: computedChecked,
       disabled,
       readOnly,
       required,
-      indeterminate,
+      indeterminate: computedIndeterminate,
     }),
-    [checked, disabled, readOnly, required, indeterminate],
+    [computedChecked, disabled, readOnly, required, computedIndeterminate],
   );
 
   const styleHooks = useCheckboxStyleHooks(ownerState);
@@ -60,6 +89,7 @@ const CheckboxRoot = React.forwardRef(function CheckboxRoot(
     ref: mergedRef,
     ...styleHooks,
     ...otherProps,
+    ...otherGroupProps,
   });
 
   return (
@@ -137,6 +167,11 @@ CheckboxRoot.propTypes /* remove-proptypes */ = {
    * You can pull out the new checked state by accessing `event.target.checked` (boolean).
    */
   onChange: PropTypes.func,
+  /**
+   * If `true`, the checkbox is a parent checkbox for a group of child checkboxes.
+   * @default false
+   */
+  parent: PropTypes.bool,
   /**
    * If `true`, the component is read only.
    *
diff --git a/packages/mui-base/src/Checkbox/Root/CheckboxRoot.types.ts b/packages/mui-base/src/Checkbox/Root/CheckboxRoot.types.ts
index 3dba81eab2..301b40de84 100644
--- a/packages/mui-base/src/Checkbox/Root/CheckboxRoot.types.ts
+++ b/packages/mui-base/src/Checkbox/Root/CheckboxRoot.types.ts
@@ -75,6 +75,11 @@ export interface UseCheckboxRootParameters {
    * The ref to the input element.
    */
   inputRef?: React.Ref<HTMLInputElement>;
+  /**
+   * If `true`, the checkbox is a parent checkbox for a group of child checkboxes.
+   * @default false
+   */
+  parent?: boolean;
 }
 
 export interface UseCheckboxRootReturnValue {
diff --git a/packages/mui-base/src/Checkbox/Root/useCheckboxRoot.ts b/packages/mui-base/src/Checkbox/Root/useCheckboxRoot.ts
index 349d4e35d2..3996389a99 100644
--- a/packages/mui-base/src/Checkbox/Root/useCheckboxRoot.ts
+++ b/packages/mui-base/src/Checkbox/Root/useCheckboxRoot.ts
@@ -4,6 +4,7 @@ import { useControlled } from '../../utils/useControlled';
 import { visuallyHidden } from '../../utils/visuallyHidden';
 import { useForkRef } from '../../utils/useForkRef';
 import { mergeReactProps } from '../../utils/mergeReactProps';
+import { useId } from '../../utils/useId';
 
 /**
  * The basic building block for creating custom checkboxes.
@@ -30,6 +31,15 @@ export function useCheckboxRoot(params: UseCheckboxRootParameters): UseCheckboxR
     indeterminate = false,
   } = params;
 
+  const id = useId();
+
+  const [checked, setCheckedState] = useControlled({
+    controlled: externalChecked,
+    default: defaultChecked,
+    name: 'Checkbox',
+    state: 'checked',
+  });
+
   const inputRef = React.useRef<HTMLInputElement>(null);
   const mergedInputRef = useForkRef(externalInputRef, inputRef);
 
@@ -39,32 +49,26 @@ export function useCheckboxRoot(params: UseCheckboxRootParameters): UseCheckboxR
     }
   }, [indeterminate]);
 
-  const [checked, setCheckedState] = useControlled({
-    controlled: externalChecked,
-    default: defaultChecked,
-    name: 'Checkbox',
-    state: 'checked',
-  });
-
   const getButtonProps: UseCheckboxRootReturnValue['getButtonProps'] = React.useCallback(
     (externalProps = {}) =>
       mergeReactProps<'button'>(externalProps, {
+        id,
         value: 'off',
         type: 'button',
         role: 'checkbox',
         'aria-checked': indeterminate ? 'mixed' : checked,
         'aria-disabled': disabled || undefined,
         'aria-readonly': readOnly || undefined,
-        ...externalProps,
         onClick(event) {
           if (event.defaultPrevented || readOnly) {
             return;
           }
 
+          event.preventDefault();
           inputRef.current?.click();
         },
       }),
-    [checked, disabled, indeterminate, readOnly],
+    [id, indeterminate, checked, disabled, readOnly],
   );
 
   const getInputProps: UseCheckboxRootReturnValue['getInputProps'] = React.useCallback(
@@ -86,11 +90,12 @@ export function useCheckboxRoot(params: UseCheckboxRootParameters): UseCheckboxR
             return;
           }
 
-          setCheckedState(event.target.checked);
+          const checkedValue = event.target.checked;
+          setCheckedState(checkedValue);
           onChange?.(event);
         },
       }),
-    [autoFocus, checked, disabled, name, onChange, required, setCheckedState, mergedInputRef],
+    [checked, disabled, name, required, autoFocus, mergedInputRef, setCheckedState, onChange],
   );
 
   return React.useMemo(
diff --git a/packages/mui-base/src/CheckboxGroup/Label/CheckboxGroupLabel.test.tsx b/packages/mui-base/src/CheckboxGroup/Label/CheckboxGroupLabel.test.tsx
new file mode 100644
index 0000000000..1fdaf4418a
--- /dev/null
+++ b/packages/mui-base/src/CheckboxGroup/Label/CheckboxGroupLabel.test.tsx
@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { createRenderer } from '@mui/internal-test-utils';
+import * as CheckboxGroup from '@base_ui/react/CheckboxGroup';
+import { expect } from 'chai';
+import { describeConformance } from '../../../test/describeConformance';
+
+describe('<CheckboxGroup.Label />', () => {
+  const { render } = createRenderer();
+
+  describeConformance(<CheckboxGroup.Label />, () => ({
+    inheritComponent: 'span',
+    refInstanceof: window.HTMLSpanElement,
+    render(node) {
+      return render(<CheckboxGroup.Root>{node}</CheckboxGroup.Root>);
+    },
+    skip: ['reactTestRenderer'],
+  }));
+
+  it('should label the group', () => {
+    const { getByRole } = render(
+      <CheckboxGroup.Root>
+        <CheckboxGroup.Label>Test</CheckboxGroup.Label>
+      </CheckboxGroup.Root>,
+    );
+
+    expect(getByRole('group')).toHaveAccessibleName('Test');
+  });
+});
diff --git a/packages/mui-base/src/CheckboxGroup/Label/CheckboxGroupLabel.tsx b/packages/mui-base/src/CheckboxGroup/Label/CheckboxGroupLabel.tsx
new file mode 100644
index 0000000000..16589e1dd6
--- /dev/null
+++ b/packages/mui-base/src/CheckboxGroup/Label/CheckboxGroupLabel.tsx
@@ -0,0 +1,63 @@
+'use client';
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { useComponentRenderer } from '../../utils/useComponentRenderer';
+import type { CheckboxGroupLabelProps } from './CheckboxGroupLabel.types';
+import { useCheckboxGroupRootContext } from '../Root/CheckboxGroupRootContext';
+import { useCheckboxGroupLabel } from './useCheckboxGroupLabel';
+
+/**
+ * The label of a checkbox group.
+ *
+ * Demos:
+ *
+ * - [CheckboxGroupLabel](https://mui.com/base-ui/react-checkbox-group/)
+ *
+ * API:
+ *
+ * - [CheckboxGroupLabel API](https://mui.com/base-ui/react-checkbox/components-api/#checkbox-group-label)
+ */
+const CheckboxGroupLabel = React.forwardRef(function CheckboxGroupLabel(
+  props: CheckboxGroupLabelProps,
+  forwardedRef: React.ForwardedRef<HTMLSpanElement>,
+) {
+  const { render, className, ...otherProps } = props;
+
+  const { groupLabelId, setGroupLabelId } = useCheckboxGroupRootContext();
+  const { getLabelProps } = useCheckboxGroupLabel({
+    id: groupLabelId,
+    setId: setGroupLabelId,
+  });
+
+  const { renderElement } = useComponentRenderer({
+    propGetter: getLabelProps,
+    render: render ?? 'span',
+    ownerState: {},
+    className,
+    ref: forwardedRef,
+    extraProps: otherProps,
+  });
+
+  return renderElement();
+});
+
+CheckboxGroupLabel.propTypes /* remove-proptypes */ = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * @ignore
+   */
+  children: PropTypes.node,
+  /**
+   * Class names applied to the element or a function that returns them based on the component's state.
+   */
+  className: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+  /**
+   * A function to customize rendering of the component.
+   */
+  render: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
+} as any;
+
+export { CheckboxGroupLabel };
diff --git a/packages/mui-base/src/CheckboxGroup/Label/CheckboxGroupLabel.types.ts b/packages/mui-base/src/CheckboxGroup/Label/CheckboxGroupLabel.types.ts
new file mode 100644
index 0000000000..fe6bc4e40c
--- /dev/null
+++ b/packages/mui-base/src/CheckboxGroup/Label/CheckboxGroupLabel.types.ts
@@ -0,0 +1,6 @@
+import type { BaseUIComponentProps } from '../../utils/types';
+
+export type CheckboxGroupLabelOwnerState = {};
+
+export interface CheckboxGroupLabelProps
+  extends BaseUIComponentProps<'label', CheckboxGroupLabelOwnerState> {}
diff --git a/packages/mui-base/src/CheckboxGroup/Label/useCheckboxGroupLabel.ts b/packages/mui-base/src/CheckboxGroup/Label/useCheckboxGroupLabel.ts
new file mode 100644
index 0000000000..a5ac273d58
--- /dev/null
+++ b/packages/mui-base/src/CheckboxGroup/Label/useCheckboxGroupLabel.ts
@@ -0,0 +1,46 @@
+import * as React from 'react';
+import { mergeReactProps } from '../../utils/mergeReactProps';
+import type {
+  UseCheckboxGroupLabelParameters,
+  UseCheckboxGroupLabelReturnValue,
+} from './useCheckboxGroupLabel.types';
+import { useEnhancedEffect } from '../../utils/useEnhancedEffect';
+import { useId } from '../../utils/useId';
+
+/**
+ *
+ * API:
+ *
+ * - [useCheckboxGroupLabel API](https://mui.com/base-ui/api/use-checkbox-group-label/)
+ */
+export function useCheckboxGroupLabel(
+  params: UseCheckboxGroupLabelParameters,
+): UseCheckboxGroupLabelReturnValue {
+  const { id: idProp, setId } = params;
+
+  const fallbackId = useId();
+  const id = idProp ?? fallbackId;
+
+  const getLabelProps = React.useCallback(
+    (externalProps = {}) => {
+      return mergeReactProps(externalProps, {
+        id,
+      });
+    },
+    [id],
+  );
+
+  useEnhancedEffect(() => {
+    setId(id);
+    return () => {
+      setId(undefined);
+    };
+  }, [setId, id]);
+
+  return React.useMemo(
+    () => ({
+      getLabelProps,
+    }),
+    [getLabelProps],
+  );
+}
diff --git a/packages/mui-base/src/CheckboxGroup/Label/useCheckboxGroupLabel.types.ts b/packages/mui-base/src/CheckboxGroup/Label/useCheckboxGroupLabel.types.ts
new file mode 100644
index 0000000000..e82d9bb565
--- /dev/null
+++ b/packages/mui-base/src/CheckboxGroup/Label/useCheckboxGroupLabel.types.ts
@@ -0,0 +1,20 @@
+import type * as React from 'react';
+import type { GenericHTMLProps } from '../../utils/types';
+
+export interface UseCheckboxGroupLabelParameters {
+  /**
+   * The id of the label.
+   */
+  id: string | undefined;
+  /**
+   * Set the id of the label.
+   */
+  setId: React.Dispatch<React.SetStateAction<string | undefined>>;
+}
+
+export interface UseCheckboxGroupLabelReturnValue {
+  /**
+   * Props to apply to the label element.
+   */
+  getLabelProps: (externalProps?: GenericHTMLProps) => GenericHTMLProps;
+}
diff --git a/packages/mui-base/src/CheckboxGroup/Parent/useCheckboxGroupParent.test.tsx b/packages/mui-base/src/CheckboxGroup/Parent/useCheckboxGroupParent.test.tsx
new file mode 100644
index 0000000000..160df12c54
--- /dev/null
+++ b/packages/mui-base/src/CheckboxGroup/Parent/useCheckboxGroupParent.test.tsx
@@ -0,0 +1,204 @@
+import * as React from 'react';
+import { createRenderer, fireEvent, screen } from '@mui/internal-test-utils';
+import * as CheckboxGroup from '@base_ui/react/CheckboxGroup';
+import * as Checkbox from '@base_ui/react/Checkbox';
+import { expect } from 'chai';
+
+describe('useCheckboxGroupParent', () => {
+  const { render } = createRenderer();
+  const allValues = ['a', 'b', 'c'];
+
+  it('should control child checkboxes', () => {
+    function App() {
+      const [value, setValue] = React.useState<string[]>([]);
+      return (
+        <CheckboxGroup.Root value={value} onValueChange={setValue} allValues={allValues}>
+          <Checkbox.Root parent data-testid="parent" />
+          <Checkbox.Root name="a" />
+          <Checkbox.Root name="b" />
+          <Checkbox.Root name="c" />
+        </CheckboxGroup.Root>
+      );
+    }
+
+    render(<App />);
+
+    const checkboxes = screen
+      .getAllByRole('checkbox')
+      .filter((v) => v.getAttribute('name') && v.tagName === 'BUTTON');
+    const parent = screen.getByTestId('parent');
+
+    checkboxes.forEach((checkbox) => {
+      expect(checkbox).to.have.attribute('aria-checked', 'false');
+    });
+
+    fireEvent.click(parent);
+    expect(parent).to.have.attribute('aria-checked', 'true');
+
+    checkboxes.forEach((checkbox) => {
+      expect(checkbox).to.have.attribute('aria-checked', 'true');
+    });
+
+    fireEvent.click(parent);
+    expect(parent).to.have.attribute('aria-checked', 'false');
+
+    checkboxes.forEach((checkbox) => {
+      expect(checkbox).to.have.attribute('aria-checked', 'false');
+    });
+  });
+
+  it('parent should be marked as mixed if some children are checked', () => {
+    function App() {
+      const [value, setValue] = React.useState<string[]>([]);
+      return (
+        <CheckboxGroup.Root value={value} onValueChange={setValue} allValues={allValues}>
+          <Checkbox.Root parent data-testid="parent" />
+          <Checkbox.Root name="a" />
+          <Checkbox.Root name="b" />
+          <Checkbox.Root name="c" />
+        </CheckboxGroup.Root>
+      );
+    }
+
+    render(<App />);
+
+    const checkboxes = screen
+      .getAllByRole('checkbox')
+      .filter((v) => v.getAttribute('name') && v.tagName === 'BUTTON');
+
+    checkboxes.forEach((checkbox) => {
+      expect(checkbox).to.have.attribute('aria-checked', 'false');
+    });
+
+    fireEvent.click(checkboxes[0]);
+
+    expect(screen.getByTestId('parent')).to.have.attribute('aria-checked', 'mixed');
+  });
+
+  it('should correctly initialize the values array', () => {
+    function App() {
+      const [value, setValue] = React.useState<string[]>(['a']);
+      return (
+        <CheckboxGroup.Root value={value} onValueChange={setValue} allValues={allValues}>
+          <Checkbox.Root parent data-testid="parent" />
+          <Checkbox.Root name="a" />
+          <Checkbox.Root name="b" />
+          <Checkbox.Root name="c" />
+        </CheckboxGroup.Root>
+      );
+    }
+
+    render(<App />);
+
+    expect(screen.getByTestId('parent')).to.have.attribute('aria-checked', 'mixed');
+
+    const checkboxes = screen
+      .getAllByRole('checkbox')
+      .filter((v) => v.getAttribute('name') && v.tagName === 'BUTTON');
+    const checkboxA = checkboxes.find((v) => v.getAttribute('name') === 'a');
+
+    expect(checkboxA).to.have.attribute('aria-checked', 'true');
+  });
+
+  it('should update the values array when a child checkbox is clicked', () => {
+    function App() {
+      const [value, setValue] = React.useState<string[]>(['a']);
+      return (
+        <CheckboxGroup.Root value={value} onValueChange={setValue} allValues={allValues}>
+          <Checkbox.Root parent data-testid="parent" />
+          <Checkbox.Root name="a" />
+          <Checkbox.Root name="b" />
+          <Checkbox.Root name="c" />
+        </CheckboxGroup.Root>
+      );
+    }
+
+    render(<App />);
+
+    expect(screen.getByTestId('parent')).to.have.attribute('aria-checked', 'mixed');
+
+    const checkboxes = screen
+      .getAllByRole('checkbox')
+      .filter((v) => v.getAttribute('name') && v.tagName === 'BUTTON');
+    const checkboxA = checkboxes.find((v) => v.getAttribute('name') === 'a');
+
+    expect(checkboxA).to.have.attribute('aria-checked', 'true');
+
+    checkboxes.forEach((checkbox) => {
+      if (checkbox !== checkboxA) {
+        fireEvent.click(checkbox);
+      }
+    });
+
+    expect(screen.getByTestId('parent')).to.have.attribute('aria-checked', 'true');
+  });
+
+  it('should apply space-separated aria-controls attribute with child names', () => {
+    function App() {
+      const [value, setValue] = React.useState<string[]>([]);
+      return (
+        <CheckboxGroup.Root value={value} onValueChange={setValue} allValues={allValues}>
+          <Checkbox.Root parent data-testid="parent" />
+          <Checkbox.Root name="a" />
+          <Checkbox.Root name="b" />
+          <Checkbox.Root name="c" />
+        </CheckboxGroup.Root>
+      );
+    }
+
+    render(<App />);
+
+    const parent = screen.getByTestId('parent');
+    const id = parent.getAttribute('id');
+
+    expect(parent).to.have.attribute('aria-controls', allValues.map((v) => `${id}-${v}`).join(' '));
+  });
+
+  it('preserves initial state if mixed when parent is clicked', () => {
+    function App() {
+      const [value, setValue] = React.useState<string[]>([]);
+      return (
+        <CheckboxGroup.Root value={value} onValueChange={setValue} allValues={allValues}>
+          <Checkbox.Root parent data-testid="parent" />
+          <Checkbox.Root name="a" />
+          <Checkbox.Root name="b" />
+          <Checkbox.Root name="c" />
+        </CheckboxGroup.Root>
+      );
+    }
+
+    render(<App />);
+
+    const checkboxes = screen
+      .getAllByRole('checkbox')
+      .filter((v) => v.getAttribute('name') && v.tagName === 'BUTTON');
+    const checkboxA = checkboxes.find((v) => v.getAttribute('name') === 'a')!;
+    const parent = screen.getByTestId('parent');
+
+    fireEvent.click(checkboxA);
+
+    expect(screen.getByTestId('parent')).to.have.attribute('aria-checked', 'mixed');
+
+    fireEvent.click(parent);
+
+    checkboxes.forEach((checkbox) => {
+      expect(checkbox).to.have.attribute('aria-checked', 'true');
+    });
+
+    fireEvent.click(parent);
+
+    checkboxes.forEach((checkbox) => {
+      expect(checkbox).to.have.attribute('aria-checked', 'false');
+    });
+
+    fireEvent.click(parent);
+
+    expect(parent).to.have.attribute('aria-checked', 'mixed');
+    expect(checkboxA).to.have.attribute('aria-checked', 'true');
+    checkboxes.forEach((checkbox) => {
+      if (checkbox !== checkboxA) {
+        expect(checkbox).to.have.attribute('aria-checked', 'false');
+      }
+    });
+  });
+});
diff --git a/packages/mui-base/src/CheckboxGroup/Parent/useCheckboxGroupParent.ts b/packages/mui-base/src/CheckboxGroup/Parent/useCheckboxGroupParent.ts
new file mode 100644
index 0000000000..8661c3d469
--- /dev/null
+++ b/packages/mui-base/src/CheckboxGroup/Parent/useCheckboxGroupParent.ts
@@ -0,0 +1,92 @@
+import * as React from 'react';
+import type {
+  UseCheckboxGroupParentParameters,
+  UseCheckboxGroupParentReturnValue,
+} from './useCheckboxGroupParent.types';
+import { useId } from '../../utils/useId';
+import { useEventCallback } from '../../utils/useEventCallback';
+
+/**
+ *
+ * API:
+ *
+ * - [useCheckboxGroupParent API](https://mui.com/base-ui/api/use-checkbox-group-parent/)
+ */
+export function useCheckboxGroupParent(
+  params: UseCheckboxGroupParentParameters,
+): UseCheckboxGroupParentReturnValue {
+  const { allValues = [], value = [], onValueChange: onValueChangeProp = () => {} } = params;
+
+  const uncontrolledStateRef = React.useRef(value);
+  const [status, setStatus] = React.useState<'on' | 'off' | 'mixed'>('mixed');
+
+  const id = useId();
+  const checked = value.length === allValues.length;
+  const indeterminate = value.length !== allValues.length && value.length > 0;
+
+  const onValueChange = useEventCallback(onValueChangeProp);
+
+  const getParentProps = React.useCallback(
+    () => ({
+      id,
+      indeterminate,
+      checked,
+      'aria-controls': allValues.map((v) => `${id}-${v}`).join(' '),
+      onChange() {
+        const uncontrolledState = uncontrolledStateRef.current;
+        const allOnOrOff =
+          uncontrolledState.length === allValues.length || uncontrolledState.length === 0;
+
+        if (allOnOrOff) {
+          if (value.length === allValues.length) {
+            onValueChange([]);
+          } else {
+            onValueChange(allValues);
+          }
+          return;
+        }
+
+        if (status === 'mixed') {
+          onValueChange(allValues);
+          setStatus('on');
+        } else if (status === 'on') {
+          onValueChange([]);
+          setStatus('off');
+        } else if (status === 'off') {
+          onValueChange(uncontrolledState);
+          setStatus('mixed');
+        }
+      },
+    }),
+    [allValues, checked, id, indeterminate, onValueChange, status, value.length],
+  );
+
+  const getChildProps = React.useCallback(
+    (name: string) => ({
+      name,
+      id: `${id}-${name}`,
+      checked: value.includes(name),
+      onChange(event: React.ChangeEvent<HTMLInputElement>) {
+        const newValue = [...value];
+        if (event.target.checked) {
+          newValue.push(name);
+        } else {
+          newValue.splice(newValue.indexOf(name), 1);
+        }
+        uncontrolledStateRef.current = newValue;
+        onValueChange(newValue);
+      },
+    }),
+    [id, onValueChange, value],
+  );
+
+  return React.useMemo(
+    () => ({
+      id,
+      indeterminate,
+      getParentProps,
+      getChildProps,
+    }),
+    [id, indeterminate, getParentProps, getChildProps],
+  );
+}
diff --git a/packages/mui-base/src/CheckboxGroup/Parent/useCheckboxGroupParent.types.ts b/packages/mui-base/src/CheckboxGroup/Parent/useCheckboxGroupParent.types.ts
new file mode 100644
index 0000000000..ee43b35b41
--- /dev/null
+++ b/packages/mui-base/src/CheckboxGroup/Parent/useCheckboxGroupParent.types.ts
@@ -0,0 +1,23 @@
+export interface UseCheckboxGroupParentParameters {
+  allValues?: string[];
+  value?: string[];
+  onValueChange?: (value: string[]) => void;
+}
+
+export interface UseCheckboxGroupParentReturnValue {
+  id: string | undefined;
+  indeterminate: boolean;
+  getParentProps: () => {
+    id: string | undefined;
+    indeterminate: boolean;
+    checked: boolean;
+    'aria-controls': string;
+    onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  };
+  getChildProps: (name: string) => {
+    name: string;
+    id: string;
+    checked: boolean;
+    onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  };
+}
diff --git a/packages/mui-base/src/CheckboxGroup/Root/CheckboxGroupRoot.test.tsx b/packages/mui-base/src/CheckboxGroup/Root/CheckboxGroupRoot.test.tsx
new file mode 100644
index 0000000000..317eae91ef
--- /dev/null
+++ b/packages/mui-base/src/CheckboxGroup/Root/CheckboxGroupRoot.test.tsx
@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { createRenderer } from '@mui/internal-test-utils';
+import * as CheckboxGroup from '@base_ui/react/CheckboxGroup';
+import { describeConformance } from '../../../test/describeConformance';
+
+describe('<CheckboxGroup.Root />', () => {
+  const { render } = createRenderer();
+
+  describeConformance(<CheckboxGroup.Root />, () => ({
+    inheritComponent: 'div',
+    refInstanceof: window.HTMLDivElement,
+    render,
+  }));
+});
diff --git a/packages/mui-base/src/CheckboxGroup/Root/CheckboxGroupRoot.tsx b/packages/mui-base/src/CheckboxGroup/Root/CheckboxGroupRoot.tsx
new file mode 100644
index 0000000000..55cf5ea585
--- /dev/null
+++ b/packages/mui-base/src/CheckboxGroup/Root/CheckboxGroupRoot.tsx
@@ -0,0 +1,107 @@
+'use client';
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { useComponentRenderer } from '../../utils/useComponentRenderer';
+import type {
+  CheckboxGroupRootContextValue,
+  CheckboxGroupRootProps,
+} from './CheckboxGroupRoot.types';
+import { useCheckboxGroupRoot } from './useCheckboxGroupRoot';
+import { CheckboxGroupRootContext } from './CheckboxGroupRootContext';
+
+/**
+ * The foundation for building custom-styled checkbox groups.
+ *
+ * Demos:
+ *
+ * - [CheckboxGroup](https://mui.com/base-ui/react-checkbox-group/)
+ *
+ * API:
+ *
+ * - [CheckboxGroup API](https://mui.com/base-ui/react-checkbox/components-api/#checkbox-group-root)
+ */
+const CheckboxGroupRoot = React.forwardRef(function CheckboxGroupRoot(
+  props: CheckboxGroupRootProps,
+  forwardedRef: React.ForwardedRef<HTMLDivElement>,
+) {
+  const {
+    render,
+    className,
+    value: externalValue,
+    defaultValue,
+    onValueChange,
+    allValues,
+    ...otherProps
+  } = props;
+
+  const { getRootProps, labelId, setLabelId, value, setValue, parent } = useCheckboxGroupRoot({
+    value: externalValue,
+    allValues,
+    defaultValue,
+    onValueChange,
+  });
+
+  const { renderElement } = useComponentRenderer({
+    propGetter: getRootProps,
+    render: render ?? 'div',
+    className,
+    ownerState: {},
+    ref: forwardedRef,
+    extraProps: otherProps,
+  });
+
+  const contextValue: CheckboxGroupRootContextValue = React.useMemo(
+    () => ({
+      groupLabelId: labelId,
+      setGroupLabelId: setLabelId,
+      allValues,
+      value,
+      setValue,
+      parent,
+    }),
+    [labelId, setLabelId, value, setValue, parent, allValues],
+  );
+
+  return (
+    <CheckboxGroupRootContext.Provider value={contextValue}>
+      {renderElement()}
+    </CheckboxGroupRootContext.Provider>
+  );
+});
+
+CheckboxGroupRoot.propTypes /* remove-proptypes */ = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * @ignore
+   */
+  allValues: PropTypes.arrayOf(PropTypes.string),
+  /**
+   * @ignore
+   */
+  children: PropTypes.node,
+  /**
+   * Class names applied to the element or a function that returns them based on the component's state.
+   */
+  className: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+  /**
+   * @ignore
+   */
+  defaultValue: PropTypes.arrayOf(PropTypes.string),
+  /**
+   * @ignore
+   */
+  onValueChange: PropTypes.func,
+  /**
+   * A function to customize rendering of the component.
+   */
+  render: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
+  /**
+   * @ignore
+   */
+  value: PropTypes.arrayOf(PropTypes.string),
+} as any;
+
+export { CheckboxGroupRoot };
diff --git a/packages/mui-base/src/CheckboxGroup/Root/CheckboxGroupRoot.types.ts b/packages/mui-base/src/CheckboxGroup/Root/CheckboxGroupRoot.types.ts
new file mode 100644
index 0000000000..0abbeae4d0
--- /dev/null
+++ b/packages/mui-base/src/CheckboxGroup/Root/CheckboxGroupRoot.types.ts
@@ -0,0 +1,22 @@
+import type * as React from 'react';
+import type { BaseUIComponentProps } from '../../utils/types';
+import type { UseCheckboxGroupParentReturnValue } from '../Parent/useCheckboxGroupParent.types';
+
+export type CheckboxGroupRootOwnerState = {};
+
+export interface CheckboxGroupRootContextValue {
+  groupLabelId: string | undefined;
+  setGroupLabelId: React.Dispatch<React.SetStateAction<string | undefined>>;
+  value: string[];
+  setValue: (value: string[]) => void;
+  allValues: string[] | undefined;
+  parent: UseCheckboxGroupParentReturnValue;
+}
+
+export interface CheckboxGroupRootProps
+  extends BaseUIComponentProps<'div', CheckboxGroupRootOwnerState> {
+  value?: string[];
+  defaultValue?: string[];
+  onValueChange?: (value: string[]) => void;
+  allValues?: string[];
+}
diff --git a/packages/mui-base/src/CheckboxGroup/Root/CheckboxGroupRootContext.ts b/packages/mui-base/src/CheckboxGroup/Root/CheckboxGroupRootContext.ts
new file mode 100644
index 0000000000..42079c15be
--- /dev/null
+++ b/packages/mui-base/src/CheckboxGroup/Root/CheckboxGroupRootContext.ts
@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { CheckboxGroupRootContextValue } from './CheckboxGroupRoot.types';
+
+export const CheckboxGroupRootContext = React.createContext<CheckboxGroupRootContextValue | null>(
+  null,
+);
+
+export function useCheckboxGroupRootContext() {
+  const context = React.useContext(CheckboxGroupRootContext);
+  if (context === null) {
+    throw new Error('<CheckboxGroup.Label> must be used within <CheckboxGroup.Root>');
+  }
+  return context;
+}
+
+export function useLooseCheckboxGroupRootContext() {
+  const context = React.useContext(CheckboxGroupRootContext);
+  return context;
+}
diff --git a/packages/mui-base/src/CheckboxGroup/Root/useCheckboxGroupRoot.tsx b/packages/mui-base/src/CheckboxGroup/Root/useCheckboxGroupRoot.tsx
new file mode 100644
index 0000000000..2ddd29121b
--- /dev/null
+++ b/packages/mui-base/src/CheckboxGroup/Root/useCheckboxGroupRoot.tsx
@@ -0,0 +1,63 @@
+'use client';
+import * as React from 'react';
+import { mergeReactProps } from '../../utils/mergeReactProps';
+import type {
+  UseCheckboxGroupRootParameters,
+  UseCheckboxGroupRootReturnValue,
+} from './useCheckboxGroupRoot.types';
+import { useControlled } from '../../utils/useControlled';
+import { useEventCallback } from '../../utils/useEventCallback';
+import { useCheckboxGroupParent } from '../Parent/useCheckboxGroupParent';
+
+/**
+ *
+ * API:
+ *
+ * - [useCheckboxGroupRoot API](https://mui.com/base-ui/api/use-checkbox-group-root/)
+ */
+export function useCheckboxGroupRoot(
+  params: UseCheckboxGroupRootParameters,
+): UseCheckboxGroupRootReturnValue {
+  const { allValues, value: externalValue, defaultValue, onValueChange } = params;
+
+  const [labelId, setLabelId] = React.useState<string | undefined>(undefined);
+
+  const [value, setValueUnwrapped] = useControlled({
+    controlled: externalValue,
+    default: defaultValue,
+    name: 'CheckboxGroup',
+    state: 'value',
+  });
+
+  const setValue = useEventCallback((v: string[]) => {
+    setValueUnwrapped(v);
+    onValueChange?.(v);
+  });
+
+  const parent = useCheckboxGroupParent({
+    allValues,
+    value: externalValue,
+    onValueChange,
+  });
+
+  const getRootProps = React.useCallback(
+    (externalProps = {}) =>
+      mergeReactProps<'div'>(externalProps, {
+        role: 'group',
+        'aria-labelledby': labelId,
+      }),
+    [labelId],
+  );
+
+  return React.useMemo(
+    () => ({
+      getRootProps,
+      labelId,
+      setLabelId,
+      value,
+      setValue,
+      parent,
+    }),
+    [getRootProps, labelId, value, setValue, parent],
+  );
+}
diff --git a/packages/mui-base/src/CheckboxGroup/Root/useCheckboxGroupRoot.types.ts b/packages/mui-base/src/CheckboxGroup/Root/useCheckboxGroupRoot.types.ts
new file mode 100644
index 0000000000..d2cd725400
--- /dev/null
+++ b/packages/mui-base/src/CheckboxGroup/Root/useCheckboxGroupRoot.types.ts
@@ -0,0 +1,19 @@
+import type * as React from 'react';
+import type { GenericHTMLProps } from '../../utils/types';
+import type { UseCheckboxGroupParentReturnValue } from '../Parent/useCheckboxGroupParent.types';
+
+export interface UseCheckboxGroupRootParameters {
+  value?: string[];
+  defaultValue?: string[];
+  onValueChange?: (value: string[]) => void;
+  allValues?: string[];
+}
+
+export interface UseCheckboxGroupRootReturnValue {
+  getRootProps: (externalProps?: GenericHTMLProps) => GenericHTMLProps;
+  labelId: string | undefined;
+  setLabelId: React.Dispatch<React.SetStateAction<string | undefined>>;
+  value: string[];
+  setValue: (value: string[]) => void;
+  parent: UseCheckboxGroupParentReturnValue;
+}
diff --git a/packages/mui-base/src/CheckboxGroup/index.barrel.ts b/packages/mui-base/src/CheckboxGroup/index.barrel.ts
new file mode 100644
index 0000000000..f7cb43cd73
--- /dev/null
+++ b/packages/mui-base/src/CheckboxGroup/index.barrel.ts
@@ -0,0 +1,23 @@
+export * from './Root/CheckboxGroupRoot';
+export * from './Root/useCheckboxGroupRoot';
+export * from './Label/CheckboxGroupLabel';
+export * from './Label/useCheckboxGroupLabel';
+export * from './Parent/useCheckboxGroupParent';
+
+export type {
+  CheckboxGroupRootProps,
+  CheckboxGroupRootOwnerState,
+} from './Root/CheckboxGroupRoot.types';
+export type { UseCheckboxGroupRootReturnValue } from './Root/useCheckboxGroupRoot.types';
+export type {
+  CheckboxGroupLabelProps,
+  CheckboxGroupLabelOwnerState,
+} from './Label/CheckboxGroupLabel.types';
+export type {
+  UseCheckboxGroupLabelParameters,
+  UseCheckboxGroupLabelReturnValue,
+} from './Label/useCheckboxGroupLabel.types';
+export type {
+  UseCheckboxGroupParentParameters,
+  UseCheckboxGroupParentReturnValue,
+} from './Parent/useCheckboxGroupParent.types';
diff --git a/packages/mui-base/src/CheckboxGroup/index.ts b/packages/mui-base/src/CheckboxGroup/index.ts
new file mode 100644
index 0000000000..113e4a07cf
--- /dev/null
+++ b/packages/mui-base/src/CheckboxGroup/index.ts
@@ -0,0 +1,23 @@
+export { CheckboxGroupRoot as Root } from './Root/CheckboxGroupRoot';
+export { CheckboxGroupLabel as Label } from './Label/CheckboxGroupLabel';
+export { useCheckboxGroupRoot as useRoot } from './Root/useCheckboxGroupRoot';
+export { useCheckboxGroupLabel as useLabel } from './Label/useCheckboxGroupLabel';
+export { useCheckboxGroupParent } from './Parent/useCheckboxGroupParent';
+
+export type {
+  CheckboxGroupRootProps as RootProps,
+  CheckboxGroupRootOwnerState as RootOwnerState,
+} from './Root/CheckboxGroupRoot.types';
+export type {
+  CheckboxGroupLabelProps as LabelProps,
+  CheckboxGroupLabelOwnerState as LabelOwnerState,
+} from './Label/CheckboxGroupLabel.types';
+export type { UseCheckboxGroupRootReturnValue as UseRootReturnValue } from './Root/useCheckboxGroupRoot.types';
+export type {
+  UseCheckboxGroupLabelParameters as UseLabelParameters,
+  UseCheckboxGroupLabelReturnValue as UseLabelReturnValue,
+} from './Label/useCheckboxGroupLabel.types';
+export type {
+  UseCheckboxGroupParentParameters as UseParentParameters,
+  UseCheckboxGroupParentReturnValue as UseParentReturnValue,
+} from './Parent/useCheckboxGroupParent.types';
diff --git a/packages/mui-base/src/index.ts b/packages/mui-base/src/index.ts
index 01576785c2..6b65c23b42 100644
--- a/packages/mui-base/src/index.ts
+++ b/packages/mui-base/src/index.ts
@@ -1,4 +1,5 @@
 export * from './Checkbox/index.barrel';
+export * from './CheckboxGroup/index.barrel';
 export * from './NumberField/index.barrel';
 export * from './Switch/index.barrel';
 export * from './Tabs/index.barrel';
diff --git a/packages/mui-base/src/utils/defaultRenderFunctions.tsx b/packages/mui-base/src/utils/defaultRenderFunctions.tsx
index 68d50e66ad..221ece9462 100644
--- a/packages/mui-base/src/utils/defaultRenderFunctions.tsx
+++ b/packages/mui-base/src/utils/defaultRenderFunctions.tsx
@@ -17,4 +17,8 @@ export const defaultRenderFunctions = {
   span: (props: React.ComponentPropsWithRef<'span'>) => {
     return <span {...props} />;
   },
+  label: (props: React.ComponentPropsWithRef<'label'>) => {
+    // eslint-disable-next-line jsx-a11y/label-has-associated-control
+    return <label {...props} />;
+  },
 };