From b0498013388491e150973ee01da81c2abc9a79a6 Mon Sep 17 00:00:00 2001
From: atomiks <cc.glows@gmail.com>
Date: Wed, 6 Mar 2024 19:26:07 +1100
Subject: [PATCH] [Checkbox] Component and Hook

---
 .../checkbox/UnstyledCheckboxIndeterminate.js | 102 ++++++
 .../UnstyledCheckboxIndeterminate.tsx         | 102 ++++++
 .../UnstyledCheckboxIndeterminate.tsx.preview |  10 +
 .../UnstyledCheckboxIntroduction/css/index.js | 150 +++++++++
 .../css/index.tsx                             | 150 +++++++++
 .../system/index.js                           | 114 +++++++
 .../system/index.tsx                          | 114 +++++++
 .../tailwind/index.js                         |  98 ++++++
 .../tailwind/index.tsx                        |  91 ++++++
 .../tailwind/index.tsx.preview                |  16 +
 .../data/base/components/checkbox/checkbox.md |  97 +++++-
 docs/pages/base-ui/api/use-checkbox.json      |  11 +
 .../api-docs/use-checkbox/use-checkbox.json   |   5 +
 .../mui-base/src/Checkbox/Checkbox.test.tsx   | 298 ++++++++++++++++++
 packages/mui-base/src/Checkbox/Checkbox.tsx   | 139 ++++++++
 .../mui-base/src/Checkbox/Checkbox.types.ts   |  79 +++++
 .../mui-base/src/Checkbox/CheckboxContext.ts  |   6 +
 .../src/Checkbox/CheckboxIndicator.tsx        |  35 ++
 packages/mui-base/src/Checkbox/index.ts       |  10 +
 packages/mui-base/src/Checkbox/utils.ts       |  17 +
 .../mui-base/src/useCheckbox/useCheckbox.ts   |  96 ++++++
 .../src/useCheckbox/useCheckbox.types.ts      | 111 +++++++
 .../src/utils/combineComponentExports.ts      |  11 +
 packages/mui-base/src/utils/constants.ts      |  13 +
 .../mui-base/src/utils/getStyleHookProps.ts   |  27 ++
 .../mui-base/src/utils/resolveClassName.ts    |  13 +
 packages/mui-base/src/utils/useControlled.ts  |   1 +
 packages/mui-base/src/utils/useForkRef.ts     |   1 +
 28 files changed, 1913 insertions(+), 4 deletions(-)
 create mode 100644 docs/data/base/components/checkbox/UnstyledCheckboxIndeterminate.js
 create mode 100644 docs/data/base/components/checkbox/UnstyledCheckboxIndeterminate.tsx
 create mode 100644 docs/data/base/components/checkbox/UnstyledCheckboxIndeterminate.tsx.preview
 create mode 100644 docs/data/base/components/checkbox/UnstyledCheckboxIntroduction/css/index.js
 create mode 100644 docs/data/base/components/checkbox/UnstyledCheckboxIntroduction/css/index.tsx
 create mode 100644 docs/data/base/components/checkbox/UnstyledCheckboxIntroduction/system/index.js
 create mode 100644 docs/data/base/components/checkbox/UnstyledCheckboxIntroduction/system/index.tsx
 create mode 100644 docs/data/base/components/checkbox/UnstyledCheckboxIntroduction/tailwind/index.js
 create mode 100644 docs/data/base/components/checkbox/UnstyledCheckboxIntroduction/tailwind/index.tsx
 create mode 100644 docs/data/base/components/checkbox/UnstyledCheckboxIntroduction/tailwind/index.tsx.preview
 create mode 100644 docs/pages/base-ui/api/use-checkbox.json
 create mode 100644 docs/translations/api-docs/use-checkbox/use-checkbox.json
 create mode 100644 packages/mui-base/src/Checkbox/Checkbox.test.tsx
 create mode 100644 packages/mui-base/src/Checkbox/Checkbox.tsx
 create mode 100644 packages/mui-base/src/Checkbox/Checkbox.types.ts
 create mode 100644 packages/mui-base/src/Checkbox/CheckboxContext.ts
 create mode 100644 packages/mui-base/src/Checkbox/CheckboxIndicator.tsx
 create mode 100644 packages/mui-base/src/Checkbox/index.ts
 create mode 100644 packages/mui-base/src/Checkbox/utils.ts
 create mode 100644 packages/mui-base/src/useCheckbox/useCheckbox.ts
 create mode 100644 packages/mui-base/src/useCheckbox/useCheckbox.types.ts
 create mode 100644 packages/mui-base/src/utils/combineComponentExports.ts
 create mode 100644 packages/mui-base/src/utils/constants.ts
 create mode 100644 packages/mui-base/src/utils/getStyleHookProps.ts
 create mode 100644 packages/mui-base/src/utils/resolveClassName.ts
 create mode 100644 packages/mui-base/src/utils/useControlled.ts
 create mode 100644 packages/mui-base/src/utils/useForkRef.ts

diff --git a/docs/data/base/components/checkbox/UnstyledCheckboxIndeterminate.js b/docs/data/base/components/checkbox/UnstyledCheckboxIndeterminate.js
new file mode 100644
index 0000000000..e202368841
--- /dev/null
+++ b/docs/data/base/components/checkbox/UnstyledCheckboxIndeterminate.js
@@ -0,0 +1,102 @@
+import * as React from 'react';
+import { styled } from '@mui/system';
+import { Checkbox as BaseCheckbox } from '@mui/base/Checkbox';
+import HorizontalRule from '@mui/icons-material/HorizontalRule';
+
+export default function UnstyledCheckboxIndeterminate() {
+  return (
+    <div style={{ display: 'flex', gap: 15 }}>
+      <Checkbox aria-label="Indeterminate checkbox" indeterminate>
+        <Indicator>
+          <HorizontalRuleIcon />
+        </Indicator>
+      </Checkbox>
+      <Checkbox aria-label="Indeterminate checkbox" indeterminate disabled>
+        <Indicator>
+          <HorizontalRuleIcon />
+        </Indicator>
+      </Checkbox>
+    </div>
+  );
+}
+
+const blue = {
+  50: '#e3f2fd',
+  100: '#bbdefb',
+  200: '#90caf9',
+  300: '#64b5f6',
+  400: '#42a5f5',
+  500: '#2196f3',
+  600: '#1e88e5',
+  700: '#1976d2',
+  800: '#1565c0',
+  900: '#0d47a1',
+};
+
+const grey = {
+  50: '#F3F6F9',
+  100: '#E5EAF2',
+  200: '#DAE2ED',
+  300: '#C7D0DD',
+  400: '#B0B8C4',
+  500: '#9DA8B7',
+  600: '#6B7A90',
+  700: '#434D5B',
+  800: '#303740',
+  900: '#1C2025',
+};
+
+const Checkbox = styled(BaseCheckbox)(
+  ({ theme }) => `
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border-radius: 4px;
+  border: 2px solid ${blue[500]};
+  background: none;
+  transition-property: background, border-color;
+  transition-duration: 0.15s;
+  outline: none;
+
+  &:not([data-disabled]):hover {
+    border-color: ${blue[700]};
+  }
+
+  &[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]};
+
+    &:not([data-disabled]):hover {
+      background: ${blue[700]};
+    }
+  }
+  `,
+);
+
+const HorizontalRuleIcon = styled(HorizontalRule)`
+  height: 100%;
+  color: ${grey[100]};
+`;
+
+const Indicator = styled(BaseCheckbox.Indicator)(
+  ({ theme }) => `
+    color: ${theme.palette.mode === 'dark' ? grey[100] : grey[100]};
+    height: 100%;
+    display: inline-block;
+    visibility: hidden;
+
+    &[data-state="checked"], &[data-state="mixed"] {
+      visibility: visible;
+    }
+`,
+);
diff --git a/docs/data/base/components/checkbox/UnstyledCheckboxIndeterminate.tsx b/docs/data/base/components/checkbox/UnstyledCheckboxIndeterminate.tsx
new file mode 100644
index 0000000000..e202368841
--- /dev/null
+++ b/docs/data/base/components/checkbox/UnstyledCheckboxIndeterminate.tsx
@@ -0,0 +1,102 @@
+import * as React from 'react';
+import { styled } from '@mui/system';
+import { Checkbox as BaseCheckbox } from '@mui/base/Checkbox';
+import HorizontalRule from '@mui/icons-material/HorizontalRule';
+
+export default function UnstyledCheckboxIndeterminate() {
+  return (
+    <div style={{ display: 'flex', gap: 15 }}>
+      <Checkbox aria-label="Indeterminate checkbox" indeterminate>
+        <Indicator>
+          <HorizontalRuleIcon />
+        </Indicator>
+      </Checkbox>
+      <Checkbox aria-label="Indeterminate checkbox" indeterminate disabled>
+        <Indicator>
+          <HorizontalRuleIcon />
+        </Indicator>
+      </Checkbox>
+    </div>
+  );
+}
+
+const blue = {
+  50: '#e3f2fd',
+  100: '#bbdefb',
+  200: '#90caf9',
+  300: '#64b5f6',
+  400: '#42a5f5',
+  500: '#2196f3',
+  600: '#1e88e5',
+  700: '#1976d2',
+  800: '#1565c0',
+  900: '#0d47a1',
+};
+
+const grey = {
+  50: '#F3F6F9',
+  100: '#E5EAF2',
+  200: '#DAE2ED',
+  300: '#C7D0DD',
+  400: '#B0B8C4',
+  500: '#9DA8B7',
+  600: '#6B7A90',
+  700: '#434D5B',
+  800: '#303740',
+  900: '#1C2025',
+};
+
+const Checkbox = styled(BaseCheckbox)(
+  ({ theme }) => `
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border-radius: 4px;
+  border: 2px solid ${blue[500]};
+  background: none;
+  transition-property: background, border-color;
+  transition-duration: 0.15s;
+  outline: none;
+
+  &:not([data-disabled]):hover {
+    border-color: ${blue[700]};
+  }
+
+  &[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]};
+
+    &:not([data-disabled]):hover {
+      background: ${blue[700]};
+    }
+  }
+  `,
+);
+
+const HorizontalRuleIcon = styled(HorizontalRule)`
+  height: 100%;
+  color: ${grey[100]};
+`;
+
+const Indicator = styled(BaseCheckbox.Indicator)(
+  ({ theme }) => `
+    color: ${theme.palette.mode === 'dark' ? grey[100] : grey[100]};
+    height: 100%;
+    display: inline-block;
+    visibility: hidden;
+
+    &[data-state="checked"], &[data-state="mixed"] {
+      visibility: visible;
+    }
+`,
+);
diff --git a/docs/data/base/components/checkbox/UnstyledCheckboxIndeterminate.tsx.preview b/docs/data/base/components/checkbox/UnstyledCheckboxIndeterminate.tsx.preview
new file mode 100644
index 0000000000..391b3614c7
--- /dev/null
+++ b/docs/data/base/components/checkbox/UnstyledCheckboxIndeterminate.tsx.preview
@@ -0,0 +1,10 @@
+<Checkbox aria-label="Indeterminate checkbox" indeterminate>
+  <Indicator>
+    <HorizontalRuleIcon />
+  </Indicator>
+</Checkbox>
+<Checkbox aria-label="Indeterminate checkbox" indeterminate disabled>
+  <Indicator>
+    <HorizontalRuleIcon />
+  </Indicator>
+</Checkbox>
\ No newline at end of file
diff --git a/docs/data/base/components/checkbox/UnstyledCheckboxIntroduction/css/index.js b/docs/data/base/components/checkbox/UnstyledCheckboxIntroduction/css/index.js
new file mode 100644
index 0000000000..db1b854ede
--- /dev/null
+++ b/docs/data/base/components/checkbox/UnstyledCheckboxIntroduction/css/index.js
@@ -0,0 +1,150 @@
+import * as React from 'react';
+import { Checkbox } from '@mui/base/Checkbox';
+import { useTheme } from '@mui/system';
+import Check from '@mui/icons-material/Check';
+
+export default function UnstyledCheckboxIntroduction() {
+  return (
+    <div style={{ display: 'flex', gap: 15 }}>
+      <Checkbox
+        className="Checkbox"
+        aria-label="Basic checkbox, on by default"
+        defaultChecked
+      >
+        <Checkbox.Indicator className="Checkbox-indicator">
+          <Check className="Checkbox-icon" />
+        </Checkbox.Indicator>
+      </Checkbox>
+      <Checkbox className="Checkbox" aria-label="Basic checkbox, off by default">
+        <Checkbox.Indicator className="Checkbox-indicator">
+          <Check className="Checkbox-icon" />
+        </Checkbox.Indicator>
+      </Checkbox>
+      <Checkbox
+        className="Checkbox"
+        aria-label="Disabled checkbox, on by default"
+        defaultChecked
+        disabled
+      >
+        <Checkbox.Indicator className="Checkbox-indicator">
+          <Check className="Checkbox-icon" />
+        </Checkbox.Indicator>
+      </Checkbox>
+      <Checkbox
+        className="Checkbox"
+        aria-label="Disabled checkbox, off by default"
+        disabled
+      >
+        <Checkbox.Indicator className="Checkbox-indicator">
+          <Check className="Checkbox-icon" />
+        </Checkbox.Indicator>
+      </Checkbox>
+      <Styles />
+    </div>
+  );
+}
+
+const grey = {
+  50: '#F3F6F9',
+  100: '#E5EAF2',
+  200: '#DAE2ED',
+  300: '#C7D0DD',
+  400: '#B0B8C4',
+  500: '#9DA8B7',
+  600: '#6B7A90',
+  700: '#434D5B',
+  800: '#303740',
+  900: '#1C2025',
+};
+
+function useIsDarkMode() {
+  const theme = useTheme();
+  return theme.palette.mode === 'dark';
+}
+
+function Styles() {
+  // Replace this with your app logic for determining dark modes
+  const isDarkMode = useIsDarkMode();
+
+  return (
+    <style>
+      {`
+      .Checkbox {
+        all: unset;
+        box-sizing: border-box;
+        text-align: center;
+        width: 32px;
+        height: 32px;
+        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:hover:not([data-disabled]) {
+        border-color: ${isDarkMode ? grey[600] : grey[700]};
+      }
+
+      .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[data-state="checked"]:not([data-disabled]):hover {
+        background: ${grey[900]};
+        border-color: transparent;
+      }
+
+
+      .Checkbox-indicator {
+        height: 100%;
+        display: inline-block;
+        visibility: hidden;
+        color: ${isDarkMode ? grey[900] : grey[100]};
+      }
+
+      .Checkbox-indicator[data-state="checked"] {
+        visibility: visible;
+      }
+
+      
+      .Checkbox-icon {
+        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[data-state="checked"]:not([data-disabled]):hover {
+          background: ${grey[100]};
+          border-color: transparent;
+        }
+        .Checkbox-indicator {
+          color: ${grey[900]};
+        }
+
+      }
+    `}
+    </style>
+  );
+}
diff --git a/docs/data/base/components/checkbox/UnstyledCheckboxIntroduction/css/index.tsx b/docs/data/base/components/checkbox/UnstyledCheckboxIntroduction/css/index.tsx
new file mode 100644
index 0000000000..db1b854ede
--- /dev/null
+++ b/docs/data/base/components/checkbox/UnstyledCheckboxIntroduction/css/index.tsx
@@ -0,0 +1,150 @@
+import * as React from 'react';
+import { Checkbox } from '@mui/base/Checkbox';
+import { useTheme } from '@mui/system';
+import Check from '@mui/icons-material/Check';
+
+export default function UnstyledCheckboxIntroduction() {
+  return (
+    <div style={{ display: 'flex', gap: 15 }}>
+      <Checkbox
+        className="Checkbox"
+        aria-label="Basic checkbox, on by default"
+        defaultChecked
+      >
+        <Checkbox.Indicator className="Checkbox-indicator">
+          <Check className="Checkbox-icon" />
+        </Checkbox.Indicator>
+      </Checkbox>
+      <Checkbox className="Checkbox" aria-label="Basic checkbox, off by default">
+        <Checkbox.Indicator className="Checkbox-indicator">
+          <Check className="Checkbox-icon" />
+        </Checkbox.Indicator>
+      </Checkbox>
+      <Checkbox
+        className="Checkbox"
+        aria-label="Disabled checkbox, on by default"
+        defaultChecked
+        disabled
+      >
+        <Checkbox.Indicator className="Checkbox-indicator">
+          <Check className="Checkbox-icon" />
+        </Checkbox.Indicator>
+      </Checkbox>
+      <Checkbox
+        className="Checkbox"
+        aria-label="Disabled checkbox, off by default"
+        disabled
+      >
+        <Checkbox.Indicator className="Checkbox-indicator">
+          <Check className="Checkbox-icon" />
+        </Checkbox.Indicator>
+      </Checkbox>
+      <Styles />
+    </div>
+  );
+}
+
+const grey = {
+  50: '#F3F6F9',
+  100: '#E5EAF2',
+  200: '#DAE2ED',
+  300: '#C7D0DD',
+  400: '#B0B8C4',
+  500: '#9DA8B7',
+  600: '#6B7A90',
+  700: '#434D5B',
+  800: '#303740',
+  900: '#1C2025',
+};
+
+function useIsDarkMode() {
+  const theme = useTheme();
+  return theme.palette.mode === 'dark';
+}
+
+function Styles() {
+  // Replace this with your app logic for determining dark modes
+  const isDarkMode = useIsDarkMode();
+
+  return (
+    <style>
+      {`
+      .Checkbox {
+        all: unset;
+        box-sizing: border-box;
+        text-align: center;
+        width: 32px;
+        height: 32px;
+        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:hover:not([data-disabled]) {
+        border-color: ${isDarkMode ? grey[600] : grey[700]};
+      }
+
+      .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[data-state="checked"]:not([data-disabled]):hover {
+        background: ${grey[900]};
+        border-color: transparent;
+      }
+
+
+      .Checkbox-indicator {
+        height: 100%;
+        display: inline-block;
+        visibility: hidden;
+        color: ${isDarkMode ? grey[900] : grey[100]};
+      }
+
+      .Checkbox-indicator[data-state="checked"] {
+        visibility: visible;
+      }
+
+      
+      .Checkbox-icon {
+        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[data-state="checked"]:not([data-disabled]):hover {
+          background: ${grey[100]};
+          border-color: transparent;
+        }
+        .Checkbox-indicator {
+          color: ${grey[900]};
+        }
+
+      }
+    `}
+    </style>
+  );
+}
diff --git a/docs/data/base/components/checkbox/UnstyledCheckboxIntroduction/system/index.js b/docs/data/base/components/checkbox/UnstyledCheckboxIntroduction/system/index.js
new file mode 100644
index 0000000000..27f7474704
--- /dev/null
+++ b/docs/data/base/components/checkbox/UnstyledCheckboxIntroduction/system/index.js
@@ -0,0 +1,114 @@
+import * as React from 'react';
+import { styled } from '@mui/system';
+import { Checkbox as BaseCheckbox } from '@mui/base/Checkbox';
+import Check from '@mui/icons-material/Check';
+
+export default function UnstyledSwitchIntroduction() {
+  return (
+    <div style={{ display: 'flex', gap: 15 }}>
+      <Checkbox autoFocus aria-label="Basic checkbox, on by default" defaultChecked>
+        <Indicator>
+          <CheckIcon />
+        </Indicator>
+      </Checkbox>
+      <Checkbox aria-label="Basic checkbox, off by default">
+        <Indicator>
+          <CheckIcon />
+        </Indicator>
+      </Checkbox>
+      <Checkbox
+        aria-label="Disabled checkbox, on by default"
+        defaultChecked
+        disabled
+      >
+        <Indicator>
+          <CheckIcon />
+        </Indicator>
+      </Checkbox>
+      <Checkbox aria-label="Disabled checkbox, off by default" disabled>
+        <Indicator>
+          <CheckIcon />
+        </Indicator>
+      </Checkbox>
+    </div>
+  );
+}
+
+const blue = {
+  50: '#F0F7FF',
+  100: '#C2E0FF',
+  200: '#99CCF3',
+  400: '#3399FF',
+  500: '#007FFF',
+  600: '#0072E6',
+  700: '#0059B3',
+  800: '#004C99',
+  900: '#003A75',
+};
+
+const grey = {
+  50: '#F3F6F9',
+  100: '#E5EAF2',
+  200: '#DAE2ED',
+  300: '#C7D0DD',
+  400: '#B0B8C4',
+  500: '#9DA8B7',
+  600: '#6B7A90',
+  700: '#434D5B',
+  800: '#303740',
+  900: '#1C2025',
+};
+
+const Checkbox = styled(BaseCheckbox)(
+  ({ theme }) => `
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border-radius: 4px;
+  border: 2px solid ${blue[500]};
+  background: none;
+  transition-property: background, border-color;
+  transition-duration: 0.15s;
+  outline: none;
+
+  &:not([data-disabled]):hover {
+    border-color: ${blue[700]};
+  }
+
+  &[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]};
+
+    &:not([data-disabled]):hover {
+      background: ${blue[700]};
+    }
+  }
+  `,
+);
+
+const CheckIcon = styled(Check)`
+  height: 100%;
+`;
+
+const Indicator = styled(BaseCheckbox.Indicator)(
+  ({ theme }) => `
+    color: ${theme.palette.mode === 'dark' ? grey[100] : grey[100]};
+    height: 100%;
+    display: inline-block;
+    visibility: hidden;
+
+    &[data-state="checked"], &[data-state="mixed"] {
+      visibility: visible;
+    }
+`,
+);
diff --git a/docs/data/base/components/checkbox/UnstyledCheckboxIntroduction/system/index.tsx b/docs/data/base/components/checkbox/UnstyledCheckboxIntroduction/system/index.tsx
new file mode 100644
index 0000000000..27f7474704
--- /dev/null
+++ b/docs/data/base/components/checkbox/UnstyledCheckboxIntroduction/system/index.tsx
@@ -0,0 +1,114 @@
+import * as React from 'react';
+import { styled } from '@mui/system';
+import { Checkbox as BaseCheckbox } from '@mui/base/Checkbox';
+import Check from '@mui/icons-material/Check';
+
+export default function UnstyledSwitchIntroduction() {
+  return (
+    <div style={{ display: 'flex', gap: 15 }}>
+      <Checkbox autoFocus aria-label="Basic checkbox, on by default" defaultChecked>
+        <Indicator>
+          <CheckIcon />
+        </Indicator>
+      </Checkbox>
+      <Checkbox aria-label="Basic checkbox, off by default">
+        <Indicator>
+          <CheckIcon />
+        </Indicator>
+      </Checkbox>
+      <Checkbox
+        aria-label="Disabled checkbox, on by default"
+        defaultChecked
+        disabled
+      >
+        <Indicator>
+          <CheckIcon />
+        </Indicator>
+      </Checkbox>
+      <Checkbox aria-label="Disabled checkbox, off by default" disabled>
+        <Indicator>
+          <CheckIcon />
+        </Indicator>
+      </Checkbox>
+    </div>
+  );
+}
+
+const blue = {
+  50: '#F0F7FF',
+  100: '#C2E0FF',
+  200: '#99CCF3',
+  400: '#3399FF',
+  500: '#007FFF',
+  600: '#0072E6',
+  700: '#0059B3',
+  800: '#004C99',
+  900: '#003A75',
+};
+
+const grey = {
+  50: '#F3F6F9',
+  100: '#E5EAF2',
+  200: '#DAE2ED',
+  300: '#C7D0DD',
+  400: '#B0B8C4',
+  500: '#9DA8B7',
+  600: '#6B7A90',
+  700: '#434D5B',
+  800: '#303740',
+  900: '#1C2025',
+};
+
+const Checkbox = styled(BaseCheckbox)(
+  ({ theme }) => `
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border-radius: 4px;
+  border: 2px solid ${blue[500]};
+  background: none;
+  transition-property: background, border-color;
+  transition-duration: 0.15s;
+  outline: none;
+
+  &:not([data-disabled]):hover {
+    border-color: ${blue[700]};
+  }
+
+  &[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]};
+
+    &:not([data-disabled]):hover {
+      background: ${blue[700]};
+    }
+  }
+  `,
+);
+
+const CheckIcon = styled(Check)`
+  height: 100%;
+`;
+
+const Indicator = styled(BaseCheckbox.Indicator)(
+  ({ theme }) => `
+    color: ${theme.palette.mode === 'dark' ? grey[100] : grey[100]};
+    height: 100%;
+    display: inline-block;
+    visibility: hidden;
+
+    &[data-state="checked"], &[data-state="mixed"] {
+      visibility: visible;
+    }
+`,
+);
diff --git a/docs/data/base/components/checkbox/UnstyledCheckboxIntroduction/tailwind/index.js b/docs/data/base/components/checkbox/UnstyledCheckboxIntroduction/tailwind/index.js
new file mode 100644
index 0000000000..778a479a9b
--- /dev/null
+++ b/docs/data/base/components/checkbox/UnstyledCheckboxIntroduction/tailwind/index.js
@@ -0,0 +1,98 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { Checkbox as BaseCheckbox } from '@mui/base/Checkbox';
+import { useTheme } from '@mui/system';
+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';
+}
+
+export default function UnstyledCheckboxIntroduction() {
+  // Replace this with your app logic for determining dark modes
+  const isDarkMode = useIsDarkMode();
+
+  return (
+    <div className={isDarkMode ? 'dark' : ''} style={{ display: 'flex', gap: 15 }}>
+      <Checkbox aria-label="Basic checkbox, on by default" defaultChecked>
+        <Indicator />
+      </Checkbox>
+      <Checkbox aria-label="Basic checkbox, off by default">
+        <Indicator />
+      </Checkbox>
+      <Checkbox
+        aria-label="Disabled checkbox, on by default"
+        defaultChecked
+        disabled
+      >
+        <Indicator />
+      </Checkbox>
+      <Checkbox aria-label="Disabled checkbox, off by default" disabled>
+        <Indicator />
+      </Checkbox>
+    </div>
+  );
+}
+
+const Checkbox = React.forwardRef(function Checkbox(props, ref) {
+  return (
+    <BaseCheckbox
+      {...props}
+      ref={ref}
+      className={(state) =>
+        classNames(
+          'w-[32px] h-[32px] 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 hover:border-transparent',
+          !state.checked && 'bg-transparent',
+          state.checked && !state.disabled && 'hover:bg-purple-700',
+          !state.checked && !state.disabled && 'hover:border-purple-700',
+          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="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/UnstyledCheckboxIntroduction/tailwind/index.tsx b/docs/data/base/components/checkbox/UnstyledCheckboxIntroduction/tailwind/index.tsx
new file mode 100644
index 0000000000..c6ba34682b
--- /dev/null
+++ b/docs/data/base/components/checkbox/UnstyledCheckboxIntroduction/tailwind/index.tsx
@@ -0,0 +1,91 @@
+import * as React from 'react';
+import {
+  Checkbox as BaseCheckbox,
+  type CheckboxIndicatorProps,
+  type CheckboxProps,
+} from '@mui/base/Checkbox';
+import { useTheme } from '@mui/system';
+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';
+}
+
+export default function UnstyledCheckboxIntroduction() {
+  // Replace this with your app logic for determining dark modes
+  const isDarkMode = useIsDarkMode();
+
+  return (
+    <div className={isDarkMode ? 'dark' : ''} style={{ display: 'flex', gap: 15 }}>
+      <Checkbox aria-label="Basic checkbox, on by default" defaultChecked>
+        <Indicator />
+      </Checkbox>
+      <Checkbox aria-label="Basic checkbox, off by default">
+        <Indicator />
+      </Checkbox>
+      <Checkbox
+        aria-label="Disabled checkbox, on by default"
+        defaultChecked
+        disabled
+      >
+        <Indicator />
+      </Checkbox>
+      <Checkbox aria-label="Disabled checkbox, off by default" disabled>
+        <Indicator />
+      </Checkbox>
+    </div>
+  );
+}
+
+const Checkbox = React.forwardRef<HTMLButtonElement, CheckboxProps>(
+  function Checkbox(props, ref) {
+    return (
+      <BaseCheckbox
+        {...props}
+        ref={ref}
+        className={(state) =>
+          classNames(
+            'w-[32px] h-[32px] 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 hover:border-transparent',
+            !state.checked && 'bg-transparent',
+            state.checked && !state.disabled && 'hover:bg-purple-700',
+            !state.checked && !state.disabled && 'hover:border-purple-700',
+            typeof props.className === 'function'
+              ? props.className(state)
+              : props.className,
+          )
+        }
+      />
+    );
+  },
+);
+
+const Indicator = React.forwardRef<HTMLSpanElement, CheckboxIndicatorProps>(
+  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="h-full" />
+      </BaseCheckbox.Indicator>
+    );
+  },
+);
diff --git a/docs/data/base/components/checkbox/UnstyledCheckboxIntroduction/tailwind/index.tsx.preview b/docs/data/base/components/checkbox/UnstyledCheckboxIntroduction/tailwind/index.tsx.preview
new file mode 100644
index 0000000000..8a53b1cf9f
--- /dev/null
+++ b/docs/data/base/components/checkbox/UnstyledCheckboxIntroduction/tailwind/index.tsx.preview
@@ -0,0 +1,16 @@
+<Checkbox aria-label="Basic checkbox, on by default" defaultChecked>
+  <Indicator />
+</Checkbox>
+<Checkbox aria-label="Basic checkbox, off by default">
+  <Indicator />
+</Checkbox>
+<Checkbox
+  aria-label="Disabled checkbox, on by default"
+  defaultChecked
+  disabled
+>
+  <Indicator />
+</Checkbox>
+<Checkbox aria-label="Disabled checkbox, off by default" disabled>
+  <Indicator />
+</Checkbox>
\ No newline at end of file
diff --git a/docs/data/base/components/checkbox/checkbox.md b/docs/data/base/components/checkbox/checkbox.md
index 58e682082f..96ca2dd577 100644
--- a/docs/data/base/components/checkbox/checkbox.md
+++ b/docs/data/base/components/checkbox/checkbox.md
@@ -1,14 +1,103 @@
 ---
 productId: base-ui
-title: React Checkbox component
+title: React Checkbox component and hook
+components: Checkbox, CheckboxIndicator
+hooks: useCheckbox
 githubLabel: 'component: checkbox'
 waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/
 ---
 
-# Checkbox 🚧
+# Checkbox
 
 <p class="description">Checkboxes give users binary choices when presented with multiple options in a series.</p>
 
-:::warning
-The Base UI Checkbox component isn't available yet, but you can upvote [this GitHub issue](https://github.com/mui/material-ui/issues/38036) to see it arrive sooner.
+{{"component": "modules/components/ComponentLinkHeader.js", "design": false}}
+
+{{"component": "modules/components/ComponentPageTabs.js"}}
+
+## Introduction
+
+The Checkbox component provides users with a checkbox for toggling a checked state.
+
+{{"demo": "UnstyledCheckboxIntroduction", "defaultCodeOpen": false, "bg": "gradient"}}
+
+## Component
+
+```jsx
+import { Checkbox } from '@mui/base/Checkbox';
+```
+
+### Anatomy
+
+The `Checkbox` component is composed of a root that houses one interior slot—an indicator:
+
+```tsx
+<Checkbox>
+  <Checkbox.Indicator />
+</Checkbox>
+```
+
+The indicator can contain children, such as an icon:
+
+```tsx
+<Checkbox>
+  <Checkbox.Indicator>
+    <MyCheckIcon />
+  </Checkbox.Indicator>
+</Checkbox>
+```
+
+### Custom structure
+
+Use the `render` prop to override the rendered checkbox or indicator element with your own components:
+
+```jsx
+<Checkbox render={(props) => <MyCheckbox {...props} />}>
+  <Checkbox.Indicator render={(props) => <MyCheckboxIndicator {...props} />} />
+</Checkbox>
+```
+
+To ensure all behavior works as expected:
+
+- **Forward all props**: Your component should spread all props to the underlying element.
+- **Forward the `ref`**: Your component should use [`forwardRef`](https://react.dev/reference/react/forwardRef) to ensure the Checkbox components can access the element via a ref.
+
+A custom component that adheres to these two principles looks like this:
+
+```jsx
+const MyCheckbox = React.forwardRef(function MyCheckbox(props, ref) {
+  return <button ref={ref} {...props} />;
+});
+```
+
+### Indeterminate state
+
+{{"demo": "UnstyledCheckboxIndeterminate.js", "defaultCodeOpen": false}}
+
+To make the checkbox indeterminate, add the `indeterminate` prop to override the appearance of the checkbox. It will remain in an indeterminate state regardless of user interaction until set back to `false`.
+
+```jsx
+<Checkbox indeterminate>
+  <Checkbox.Indicator />
+</Checkbox>
+```
+
+## Hook
+
+```js
+import { useCheckbox } from '@mui/base/useCheckbox';
+```
+
+The `useCheckbox` hook lets you apply the functionality of a Checkbox to a fully custom component.
+It returns props to be placed on the custom component, along with fields representing the component's internal state.
+
+:::info
+Hooks give you the most room for customization, but require more work to implement.
+With hooks, you can take full control over how your component is rendered, and define all the custom props and CSS classes you need.
+
+You may not need to use hooks unless you find that you're limited by the customization options of their component counterparts—for instance, if your component requires significantly different [HTML structure](#anatomy).
 :::
+
+## Accessibility
+
+To make the Checkbox component accessible, you should ensure that the corresponding labels reflect the Checkbox's current state.
diff --git a/docs/pages/base-ui/api/use-checkbox.json b/docs/pages/base-ui/api/use-checkbox.json
new file mode 100644
index 0000000000..633d0cf947
--- /dev/null
+++ b/docs/pages/base-ui/api/use-checkbox.json
@@ -0,0 +1,11 @@
+{
+  "parameters": {},
+  "returnValue": {},
+  "name": "useCheckbox",
+  "filename": "/packages/mui-base/src/useCheckbox/useCheckbox.ts",
+  "imports": [
+    "import { useCheckbox } from '@mui/base/useCheckbox';",
+    "import { useCheckbox } from '@mui/base';"
+  ],
+  "demos": "<ul></ul>"
+}
diff --git a/docs/translations/api-docs/use-checkbox/use-checkbox.json b/docs/translations/api-docs/use-checkbox/use-checkbox.json
new file mode 100644
index 0000000000..60ea9aa81c
--- /dev/null
+++ b/docs/translations/api-docs/use-checkbox/use-checkbox.json
@@ -0,0 +1,5 @@
+{
+  "hookDescription": "The basic building block for creating custom checkboxes.",
+  "parametersDescriptions": {},
+  "returnValueDescriptions": {}
+}
diff --git a/packages/mui-base/src/Checkbox/Checkbox.test.tsx b/packages/mui-base/src/Checkbox/Checkbox.test.tsx
new file mode 100644
index 0000000000..ae4e747360
--- /dev/null
+++ b/packages/mui-base/src/Checkbox/Checkbox.test.tsx
@@ -0,0 +1,298 @@
+import * as React from 'react';
+import { expect } from 'chai';
+import { spy } from 'sinon';
+import { createRenderer, act } from '@mui/internal-test-utils';
+import { Checkbox } from '.';
+
+describe('<Checkbox />', () => {
+  const { render } = createRenderer();
+
+  describe('extra props', () => {
+    it('should spread extra props', () => {
+      const { container } = render(<Checkbox data-extra-prop="Lorem ipsum" />);
+      expect(container.firstElementChild as HTMLElement).to.have.attribute(
+        'data-extra-prop',
+        'Lorem ipsum',
+      );
+    });
+
+    it('should not override the built-in attributes', () => {
+      const { container } = render(<Checkbox data-state="checked" role="switch" />);
+      expect(container.firstElementChild as HTMLElement).to.have.attribute('role', 'checkbox');
+    });
+  });
+
+  describe('prop: render', () => {
+    const Wrapper = React.forwardRef<HTMLButtonElement, { children?: React.ReactNode }>(
+      function Wrapper(props, forwardedRef) {
+        return (
+          <div data-testid="wrapper">
+            <button ref={forwardedRef} {...props} />
+          </div>
+        );
+      },
+    );
+
+    it('should render the component', () => {
+      const { container } = render(<Checkbox render={(props) => <button {...props} />} />);
+      expect(container.firstChild).to.have.property('nodeName', 'BUTTON');
+    });
+
+    it('should pass the ref to the custom component', () => {
+      let instanceFromRef = null;
+
+      function Test() {
+        return (
+          <Checkbox
+            ref={(el) => {
+              instanceFromRef = el;
+            }}
+            render={(props) => <Wrapper {...props} />}
+            data-testid="wrapped"
+          />
+        );
+      }
+
+      render(<Test />);
+      expect(instanceFromRef!.tagName).to.equal('BUTTON');
+      expect(instanceFromRef!).to.have.attribute('data-testid', 'wrapped');
+    });
+  });
+
+  it('should change its state when clicked', () => {
+    const { getAllByRole, container } = render(<Checkbox />);
+    const [checkbox] = getAllByRole('checkbox');
+    const input = container.querySelector('input[type=checkbox]') as HTMLInputElement;
+
+    expect(checkbox).to.have.attribute('aria-checked', 'false');
+    expect(input.checked).to.equal(false);
+
+    act(() => {
+      checkbox.click();
+    });
+
+    expect(checkbox).to.have.attribute('aria-checked', 'true');
+    expect(input.checked).to.equal(true);
+
+    act(() => {
+      checkbox.click();
+    });
+
+    expect(checkbox).to.have.attribute('aria-checked', 'false');
+    expect(input.checked).to.equal(false);
+  });
+
+  it('should update its state when changed from outside', () => {
+    function Test() {
+      const [checked, setChecked] = React.useState(false);
+      return (
+        <div>
+          <button onClick={() => setChecked((c) => !c)}>Toggle</button>
+          <Checkbox checked={checked} />;
+        </div>
+      );
+    }
+
+    const { getAllByRole, getByText } = render(<Test />);
+    const [checkbox] = getAllByRole('checkbox');
+    const button = getByText('Toggle');
+
+    expect(checkbox).to.have.attribute('aria-checked', 'false');
+    act(() => {
+      button.click();
+    });
+
+    expect(checkbox).to.have.attribute('aria-checked', 'true');
+
+    act(() => {
+      button.click();
+    });
+
+    expect(checkbox).to.have.attribute('aria-checked', 'false');
+  });
+
+  it('should call onChange when clicked', () => {
+    const handleChange = spy();
+    const { getAllByRole, container } = render(<Checkbox onChange={handleChange} />);
+    const [checkbox] = getAllByRole('checkbox');
+    const input = container.querySelector('input[type=checkbox]') as HTMLInputElement;
+
+    act(() => {
+      checkbox.click();
+    });
+
+    expect(handleChange.callCount).to.equal(1);
+    expect(handleChange.firstCall.args[0].target).to.equal(input);
+  });
+
+  describe('prop: disabled', () => {
+    it('should have the `aria-disabled` attribute', () => {
+      const { getAllByRole } = render(<Checkbox disabled />);
+      expect(getAllByRole('checkbox')[0]).to.have.attribute('aria-disabled', 'true');
+    });
+
+    it('should not have the aria attribute when `disabled` is not set', () => {
+      const { getAllByRole } = render(<Checkbox />);
+      expect(getAllByRole('checkbox')[0]).not.to.have.attribute('aria-disabled');
+    });
+
+    it('should not change its state when clicked', () => {
+      const { getAllByRole } = render(<Checkbox disabled />);
+      const [checkbox] = getAllByRole('checkbox');
+
+      expect(checkbox).to.have.attribute('aria-checked', 'false');
+
+      act(() => {
+        checkbox.click();
+      });
+
+      expect(checkbox).to.have.attribute('aria-checked', 'false');
+    });
+  });
+
+  describe('prop: readOnly', () => {
+    it('should have the `aria-readonly` attribute', () => {
+      const { getAllByRole } = render(<Checkbox readOnly />);
+      expect(getAllByRole('checkbox')[0]).to.have.attribute('aria-readonly', 'true');
+    });
+
+    it('should not have the aria attribute when `readOnly` is not set', () => {
+      const { getAllByRole } = render(<Checkbox />);
+      expect(getAllByRole('checkbox')[0]).not.to.have.attribute('aria-readonly');
+    });
+
+    it('should not change its state when clicked', () => {
+      const { getAllByRole } = render(<Checkbox readOnly />);
+      const [checkbox] = getAllByRole('checkbox');
+
+      expect(checkbox).to.have.attribute('aria-checked', 'false');
+
+      act(() => {
+        checkbox.click();
+      });
+
+      expect(checkbox).to.have.attribute('aria-checked', 'false');
+    });
+  });
+
+  it('should update its state if the underlying input is toggled', () => {
+    const { getAllByRole, container } = render(<Checkbox />);
+    const [checkbox] = getAllByRole('checkbox');
+    const input = container.querySelector('input[type=checkbox]') as HTMLInputElement;
+
+    act(() => {
+      input.click();
+    });
+
+    expect(checkbox).to.have.attribute('aria-checked', 'true');
+  });
+
+  it('should place the style hooks on the root and the indicator', () => {
+    const { getAllByRole } = render(
+      <Checkbox defaultChecked disabled readOnly required>
+        <Checkbox.Indicator />
+      </Checkbox>,
+    );
+
+    const [checkbox] = getAllByRole('checkbox');
+    const indicator = checkbox.querySelector('span');
+
+    expect(checkbox).to.have.attribute('data-state', 'checked');
+    expect(checkbox).to.have.attribute('data-disabled', 'true');
+    expect(checkbox).to.have.attribute('data-readonly', 'true');
+    expect(checkbox).to.have.attribute('data-required', 'true');
+
+    expect(indicator).to.have.attribute('data-state', 'checked');
+    expect(indicator).to.have.attribute('data-disabled', 'true');
+    expect(indicator).to.have.attribute('data-readonly', 'true');
+    expect(indicator).to.have.attribute('data-required', 'true');
+  });
+
+  it('should set the name attribute on the input', () => {
+    const { container } = render(<Checkbox name="checkbox-name" />);
+    const input = container.querySelector('input[type="checkbox"]')! as HTMLInputElement;
+
+    expect(input).to.have.attribute('name', 'checkbox-name');
+  });
+
+  describe('form handling', () => {
+    it('should toggle the checkbox when a parent label is clicked', () => {
+      const { getByTestId, getAllByRole } = render(
+        <label data-testid="label">
+          <Checkbox />
+          Toggle
+        </label>,
+      );
+
+      const [checkbox] = getAllByRole('checkbox');
+      const label = getByTestId('label');
+
+      expect(checkbox).to.have.attribute('aria-checked', 'false');
+
+      act(() => {
+        label.click();
+      });
+
+      expect(checkbox).to.have.attribute('aria-checked', 'true');
+    });
+
+    it('should toggle the checkbox when a linked label is clicked', () => {
+      const { getByTestId, getAllByRole } = render(
+        <div>
+          <label htmlFor="test-checkbox" data-testid="label">
+            Toggle
+          </label>
+          <Checkbox id="test-checkbox" />
+        </div>,
+      );
+
+      const [checkbox] = getAllByRole('checkbox');
+      const label = getByTestId('label');
+
+      expect(checkbox).to.have.attribute('aria-checked', 'false');
+
+      act(() => {
+        label.click();
+      });
+
+      expect(checkbox).to.have.attribute('aria-checked', 'true');
+    });
+  });
+
+  it('should include the checkbox value in the form submission', function test() {
+    if (/jsdom/.test(window.navigator.userAgent)) {
+      // FormData is not available in JSDOM
+      this.skip();
+    }
+
+    let stringifiedFormData = '';
+
+    const { getAllByRole, getByRole } = render(
+      <form
+        onSubmit={(event) => {
+          event.preventDefault();
+          const formData = new FormData(event.currentTarget);
+          stringifiedFormData = new URLSearchParams(formData as any).toString();
+        }}
+      >
+        <Checkbox name="test-checkbox" />
+        <button type="submit">Submit</button>
+      </form>,
+    );
+
+    const [checkbox] = getAllByRole('checkbox');
+    const submitButton = getByRole('button')!;
+
+    submitButton.click();
+
+    expect(stringifiedFormData).to.equal('test-checkbox=off');
+
+    act(() => {
+      checkbox.click();
+    });
+
+    submitButton.click();
+
+    expect(stringifiedFormData).to.equal('test-checkbox=on');
+  });
+});
diff --git a/packages/mui-base/src/Checkbox/Checkbox.tsx b/packages/mui-base/src/Checkbox/Checkbox.tsx
new file mode 100644
index 0000000000..79a94b8264
--- /dev/null
+++ b/packages/mui-base/src/Checkbox/Checkbox.tsx
@@ -0,0 +1,139 @@
+'use client';
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import type { CheckboxOwnerState, CheckboxProps } from './Checkbox.types';
+import { resolveClassName } from '../utils/resolveClassName';
+import { CheckboxContext } from './CheckboxContext';
+import { useCheckbox } from '../useCheckbox/useCheckbox';
+import { createStyleHooks } from './utils';
+
+function defaultRender(props: React.ComponentPropsWithRef<'button'>) {
+  return <button type="button" {...props} />;
+}
+
+/**
+ * The foundation for building custom-styled checkboxes.
+ *
+ * Demos:
+ *
+ * - [Checkbox](https://mui.com/base-ui/react-checkbox/)
+ *
+ * API:
+ *
+ * - [Checkbox API](https://mui.com/base-ui/react-checkbox/components-api/#checkbox)
+ */
+const Checkbox = React.forwardRef(function Checkbox(
+  props: CheckboxProps,
+  forwardedRef: React.ForwardedRef<HTMLButtonElement>,
+) {
+  const {
+    onChange,
+    checked: checkedProp,
+    className: classNameProp,
+    disabled: disabledProp,
+    readOnly: readOnlyProp,
+    defaultChecked,
+    required = false,
+    indeterminate = false,
+    render = defaultRender,
+    ...other
+  } = props;
+
+  const { getInputProps, getButtonProps, checked, disabled, readOnly } = useCheckbox(props);
+
+  const ownerState: CheckboxOwnerState = React.useMemo(
+    () => ({
+      checked,
+      disabled,
+      readOnly,
+      required,
+      indeterminate,
+    }),
+    [checked, disabled, readOnly, required, indeterminate],
+  );
+
+  const className = resolveClassName(classNameProp, ownerState);
+  const styleHooks = React.useMemo(() => createStyleHooks(ownerState), [ownerState]);
+
+  const buttonProps = {
+    className,
+    ref: forwardedRef,
+    value: 'off',
+    ...styleHooks,
+    ...other,
+  };
+
+  return (
+    <CheckboxContext.Provider value={ownerState}>
+      {render(getButtonProps(buttonProps), ownerState)}
+      <input {...getInputProps()} />
+    </CheckboxContext.Provider>
+  );
+});
+
+Checkbox.propTypes /* remove-proptypes */ = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * If `true`, the checkbox is focused on mount.
+   */
+  autoFocus: PropTypes.bool,
+  /**
+   * If `true`, the component is checked.
+   */
+  checked: PropTypes.bool,
+  /**
+   * @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]),
+  /**
+   * The default checked state. Use when the component is not controlled.
+   */
+  defaultChecked: PropTypes.bool,
+  /**
+   * If `true`, the component is disabled.
+   *
+   * @default false
+   */
+  disabled: PropTypes.bool,
+  /**
+   * If `true`, the checkbox will be indeterminate.
+   */
+  indeterminate: PropTypes.bool,
+  /**
+   * Name of the underlying input element.
+   */
+  name: PropTypes.string,
+  /**
+   * Callback fired when the state is changed.
+   *
+   * @param {React.ChangeEvent<HTMLInputElement>} event The event source of the callback.
+   * You can pull out the new value by accessing `event.target.value` (string).
+   * You can pull out the new checked state by accessing `event.target.checked` (boolean).
+   */
+  onChange: PropTypes.func,
+  /**
+   * If `true`, the component is read only.
+   *
+   * @default false
+   */
+  readOnly: PropTypes.bool,
+  /**
+   * A function to customize rendering of the component.
+   */
+  render: PropTypes.func,
+  /**
+   * If `true`, the `input` element is required.
+   *
+   * @default false
+   */
+  required: PropTypes.bool,
+} as any;
+
+export { Checkbox };
diff --git a/packages/mui-base/src/Checkbox/Checkbox.types.ts b/packages/mui-base/src/Checkbox/Checkbox.types.ts
new file mode 100644
index 0000000000..cda740d2e1
--- /dev/null
+++ b/packages/mui-base/src/Checkbox/Checkbox.types.ts
@@ -0,0 +1,79 @@
+import * as React from 'react';
+
+// TODO: move to utils
+type ComponentRenderFn<Props, State> = (props: Props, state: State) => React.ReactElement;
+
+type BaseUiComponentCommonProps<ElementType extends React.ElementType, OwnerState> = Omit<
+  React.ComponentPropsWithoutRef<ElementType>,
+  'className'
+> & {
+  /**
+   * Class names applied to the element or a function that returns them based on the component's state.
+   */
+  className?: string | ((state: OwnerState) => string);
+  /**
+   * A function to customize rendering of the component.
+   */
+  render?: ComponentRenderFn<React.ComponentPropsWithRef<ElementType>, OwnerState>;
+};
+
+export type CheckboxOwnerState = {
+  checked: boolean;
+  disabled: boolean;
+  readOnly: boolean;
+  required: boolean;
+  indeterminate: boolean;
+};
+
+export interface CheckboxProps
+  extends Omit<BaseUiComponentCommonProps<'button', CheckboxOwnerState>, 'onChange'> {
+  /**
+   * Name of the underlying input element.
+   */
+  name?: string;
+  /**
+   * If `true`, the component is checked.
+   */
+  checked?: boolean;
+  /**
+   * The default checked state. Use when the component is not controlled.
+   */
+  defaultChecked?: boolean;
+  /**
+   * If `true`, the component is disabled.
+   *
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * Callback fired when the state is changed.
+   *
+   * @param {React.ChangeEvent<HTMLInputElement>} event The event source of the callback.
+   * You can pull out the new value by accessing `event.target.value` (string).
+   * You can pull out the new checked state by accessing `event.target.checked` (boolean).
+   */
+  onChange?: React.ChangeEventHandler<HTMLInputElement>;
+  /**
+   * If `true`, the component is read only.
+   *
+   * @default false
+   */
+  readOnly?: boolean;
+  /**
+   * If `true`, the `input` element is required.
+   *
+   * @default false
+   */
+  required?: boolean;
+  /**
+   * If `true`, the checkbox is focused on mount.
+   */
+  autoFocus?: boolean;
+  /**
+   * If `true`, the checkbox will be indeterminate.
+   */
+  indeterminate?: boolean;
+}
+
+export interface CheckboxIndicatorProps
+  extends BaseUiComponentCommonProps<'span', CheckboxOwnerState> {}
diff --git a/packages/mui-base/src/Checkbox/CheckboxContext.ts b/packages/mui-base/src/Checkbox/CheckboxContext.ts
new file mode 100644
index 0000000000..2b73bb848f
--- /dev/null
+++ b/packages/mui-base/src/Checkbox/CheckboxContext.ts
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import type { CheckboxOwnerState } from './Checkbox.types';
+
+export type CheckboxContextValue = CheckboxOwnerState;
+
+export const CheckboxContext = React.createContext<CheckboxContextValue | null>(null);
diff --git a/packages/mui-base/src/Checkbox/CheckboxIndicator.tsx b/packages/mui-base/src/Checkbox/CheckboxIndicator.tsx
new file mode 100644
index 0000000000..c12e6bf7dc
--- /dev/null
+++ b/packages/mui-base/src/Checkbox/CheckboxIndicator.tsx
@@ -0,0 +1,35 @@
+import * as React from 'react';
+import type { CheckboxIndicatorProps } from './Checkbox.types';
+import { CheckboxContext } from './CheckboxContext';
+import { resolveClassName } from '../utils/resolveClassName';
+import { createStyleHooks } from './utils';
+
+function defaultRender(props: React.ComponentPropsWithRef<'span'>) {
+  return <span {...props} />;
+}
+
+const CheckboxIndicator = React.forwardRef(function CheckboxIndicator(
+  props: CheckboxIndicatorProps,
+  forwardedRef: React.ForwardedRef<HTMLSpanElement>,
+) {
+  const { render = defaultRender, className: classNameProp, ...other } = props;
+
+  const ownerState = React.useContext(CheckboxContext);
+  if (ownerState === null) {
+    throw new Error('Base UI: Checkbox.Indicator is not placed inside the Checkbox component.');
+  }
+
+  const className = resolveClassName(classNameProp, ownerState);
+  const styleHooks = React.useMemo(() => createStyleHooks(ownerState), [ownerState]);
+
+  const elementProps = {
+    className,
+    ref: forwardedRef,
+    ...styleHooks,
+    ...other,
+  };
+
+  return render(elementProps, ownerState);
+});
+
+export { CheckboxIndicator };
diff --git a/packages/mui-base/src/Checkbox/index.ts b/packages/mui-base/src/Checkbox/index.ts
new file mode 100644
index 0000000000..66e7a057b6
--- /dev/null
+++ b/packages/mui-base/src/Checkbox/index.ts
@@ -0,0 +1,10 @@
+'use client';
+import { Checkbox as CheckboxRoot } from './Checkbox';
+import { CheckboxIndicator } from './CheckboxIndicator';
+import { combineComponentExports } from '../utils/combineComponentExports';
+
+export * from './Checkbox.types';
+
+export const Checkbox = combineComponentExports(CheckboxRoot, {
+  Indicator: CheckboxIndicator,
+});
diff --git a/packages/mui-base/src/Checkbox/utils.ts b/packages/mui-base/src/Checkbox/utils.ts
new file mode 100644
index 0000000000..af61854d00
--- /dev/null
+++ b/packages/mui-base/src/Checkbox/utils.ts
@@ -0,0 +1,17 @@
+import { getStyleHookProps } from '../utils/getStyleHookProps';
+import type { CheckboxOwnerState } from './Checkbox.types';
+
+export function createStyleHooks(ownerState: CheckboxOwnerState) {
+  return getStyleHookProps(ownerState, {
+    checked(value) {
+      let state = value ? 'checked' : 'unchecked';
+      if (ownerState.indeterminate) {
+        state = 'mixed';
+      }
+
+      return {
+        'data-state': state,
+      };
+    },
+  });
+}
diff --git a/packages/mui-base/src/useCheckbox/useCheckbox.ts b/packages/mui-base/src/useCheckbox/useCheckbox.ts
new file mode 100644
index 0000000000..394ec38fb4
--- /dev/null
+++ b/packages/mui-base/src/useCheckbox/useCheckbox.ts
@@ -0,0 +1,96 @@
+'use client';
+import * as React from 'react';
+import { useControlled } from '../utils/useControlled';
+import { UseCheckboxParameters, UseCheckboxReturnValue } from './useCheckbox.types';
+import { useForkRef } from '../utils/useForkRef';
+import { VISUALLY_HIDDEN_STYLES } from '../utils/constants';
+
+/**
+ * The basic building block for creating custom checkboxes.
+ *
+ * API:
+ *
+ * - [useCheckbox API](https://mui.com/base-ui/api/use-checkbox/)
+ */
+export function useCheckbox(params: UseCheckboxParameters): UseCheckboxReturnValue {
+  const {
+    checked: checkedProp,
+    defaultChecked,
+    disabled,
+    name,
+    onChange,
+    readOnly,
+    required,
+    autoFocus,
+    indeterminate,
+    inputRef: externalInputRef,
+  } = params;
+
+  const inputRef = React.useRef<HTMLInputElement | null>(null);
+  const mergedInputRef = useForkRef(inputRef, externalInputRef);
+
+  const [checked, setCheckedState] = useControlled({
+    controlled: checkedProp,
+    default: Boolean(defaultChecked),
+    name: 'Checkbox',
+    state: 'checked',
+  });
+
+  const createHandleInputChange =
+    (otherProps: React.InputHTMLAttributes<HTMLInputElement>) =>
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      // Workaround for https://github.com/facebook/react/issues/9023
+      if (event.nativeEvent.defaultPrevented) {
+        return;
+      }
+
+      setCheckedState(event.target.checked);
+      onChange?.(event);
+      otherProps.onChange?.(event);
+    };
+
+  const createHandleClick =
+    (otherProps: React.ButtonHTMLAttributes<HTMLButtonElement>) =>
+    (event: React.MouseEvent<HTMLButtonElement>) => {
+      otherProps.onClick?.(event);
+      if (event.defaultPrevented || readOnly) {
+        return;
+      }
+
+      inputRef.current?.click();
+    };
+
+  const getButtonProps: UseCheckboxReturnValue['getButtonProps'] = (otherProps = {}) => ({
+    ...otherProps,
+    type: 'button',
+    role: 'checkbox',
+    'aria-checked': indeterminate ? 'mixed' : checked,
+    'aria-disabled': disabled,
+    'aria-readonly': readOnly,
+    onClick: createHandleClick(otherProps),
+  });
+
+  const getInputProps: UseCheckboxReturnValue['getInputProps'] = (otherProps = {}) => ({
+    checked,
+    disabled,
+    name,
+    required,
+    autoFocus,
+    style: VISUALLY_HIDDEN_STYLES,
+    tabIndex: -1,
+    type: 'checkbox',
+    'aria-hidden': true,
+    ...otherProps,
+    ref: mergedInputRef,
+    onChange: createHandleInputChange(otherProps),
+  });
+
+  return {
+    checked,
+    getButtonProps,
+    getInputProps,
+    disabled: Boolean(disabled),
+    readOnly: Boolean(readOnly),
+    indeterminate: Boolean(indeterminate),
+  };
+}
diff --git a/packages/mui-base/src/useCheckbox/useCheckbox.types.ts b/packages/mui-base/src/useCheckbox/useCheckbox.types.ts
new file mode 100644
index 0000000000..99c79feaf3
--- /dev/null
+++ b/packages/mui-base/src/useCheckbox/useCheckbox.types.ts
@@ -0,0 +1,111 @@
+import * as React from 'react';
+
+export interface UseCheckboxParameters {
+  /**
+   * If `true`, the component is checked.
+   */
+  checked?: boolean;
+  /**
+   * The default checked state. Use when the component is not controlled.
+   */
+  defaultChecked?: boolean;
+  /**
+   * If `true`, the component is disabled.
+   */
+  disabled?: boolean;
+  /**
+   * Ref to the underlying input element.
+   */
+  inputRef?: React.Ref<HTMLInputElement>;
+  /**
+   * Name of the underlying input element.
+   */
+  name?: string;
+  /**
+   * Callback fired when the state is changed.
+   *
+   * @param {React.ChangeEvent<HTMLInputElement>} event The event source of the callback.
+   * You can pull out the new value by accessing `event.target.value` (string).
+   * You can pull out the new checked state by accessing `event.target.checked` (boolean).
+   */
+  onChange?: React.ChangeEventHandler<HTMLInputElement>;
+  /**
+   * If `true`, the component is read only.
+   */
+  readOnly?: boolean;
+  /**
+   * If `true`, the `input` element is required.
+   */
+  required?: boolean;
+  /**
+   * If `true`, the checkbox will be focused on mount.
+   */
+  autoFocus?: boolean;
+  /**
+   * If `true`, the checkbox will be indeterminate.
+   */
+  indeterminate?: boolean;
+}
+
+interface UseCheckboxInputSlotOwnProps {
+  checked: boolean;
+  disabled?: boolean;
+  name?: string;
+  required?: boolean;
+  style: React.CSSProperties;
+  type: 'checkbox';
+  'aria-hidden': React.AriaAttributes['aria-hidden'];
+  ref: React.RefCallback<HTMLInputElement> | null;
+  onChange: React.ChangeEventHandler<HTMLInputElement>;
+}
+
+export type UseCheckboxInputSlotProps<TOther = {}> = Omit<
+  TOther,
+  keyof UseCheckboxInputSlotOwnProps
+> &
+  UseCheckboxInputSlotOwnProps;
+
+interface UseSwitchButtonSlotOwnProps {
+  onClick: React.MouseEventHandler<HTMLButtonElement>;
+  type: 'button';
+  role: 'checkbox';
+  'aria-disabled': React.AriaAttributes['aria-disabled'];
+  'aria-checked': React.AriaAttributes['aria-checked'];
+  'aria-readonly': React.AriaAttributes['aria-readonly'];
+}
+
+export type UseSwitchButtonSlotProps<TOther = {}> = Omit<
+  TOther,
+  keyof UseSwitchButtonSlotOwnProps
+> &
+  UseSwitchButtonSlotOwnProps;
+
+export interface UseCheckboxReturnValue {
+  /**
+   * If `true`, the component will be checked.
+   */
+  checked: boolean;
+  /**
+   * If `true`, the component will be disabled.
+   */
+  disabled: boolean;
+  /**
+   * If `true`, the component will be read only.
+   */
+  readOnly: boolean;
+  /**
+   * If `true`, the checkbox will be indeterminate.
+   */
+  indeterminate: boolean;
+  /**
+   * Resolver for the input slot's props.
+   * @param externalProps props for the input slot
+   * @returns props that should be spread on the input slot
+   */
+  getInputProps: (
+    externalProps?: React.HTMLAttributes<HTMLInputElement>,
+  ) => UseCheckboxInputSlotProps;
+  getButtonProps: (
+    externalProps?: React.HTMLAttributes<HTMLButtonElement>,
+  ) => UseSwitchButtonSlotProps;
+}
diff --git a/packages/mui-base/src/utils/combineComponentExports.ts b/packages/mui-base/src/utils/combineComponentExports.ts
new file mode 100644
index 0000000000..33aa21d4a0
--- /dev/null
+++ b/packages/mui-base/src/utils/combineComponentExports.ts
@@ -0,0 +1,11 @@
+export function combineComponentExports<Root, Subcomponents extends {}>(
+  rootComponent: Root,
+  subcomponents: Subcomponents,
+) {
+  Object.entries(subcomponents).forEach(([subcomponentName, subcomponent]) => {
+    // @ts-expect-error
+    rootComponent[subcomponentName] = subcomponent;
+  });
+
+  return rootComponent as Root & Subcomponents;
+}
diff --git a/packages/mui-base/src/utils/constants.ts b/packages/mui-base/src/utils/constants.ts
new file mode 100644
index 0000000000..1d31e220da
--- /dev/null
+++ b/packages/mui-base/src/utils/constants.ts
@@ -0,0 +1,13 @@
+export const VISUALLY_HIDDEN_STYLES: React.CSSProperties = {
+  border: 0,
+  clip: 'rect(0 0 0 0)',
+  height: 1,
+  margin: -1,
+  overflow: 'hidden',
+  padding: 0,
+  position: 'fixed',
+  whiteSpace: 'nowrap',
+  width: 1,
+  top: 0,
+  left: 0,
+};
diff --git a/packages/mui-base/src/utils/getStyleHookProps.ts b/packages/mui-base/src/utils/getStyleHookProps.ts
new file mode 100644
index 0000000000..fa0bdd3ce7
--- /dev/null
+++ b/packages/mui-base/src/utils/getStyleHookProps.ts
@@ -0,0 +1,27 @@
+interface Stringifyable {
+  toString(): string;
+}
+
+export function getStyleHookProps(
+  state: Record<string, Stringifyable>,
+  customMapping?: Record<string, (s: Stringifyable) => Record<string, string> | null>,
+) {
+  let props: Record<string, string> = {};
+
+  Object.entries(state).forEach(([key, value]) => {
+    if (customMapping?.hasOwnProperty(key)) {
+      const customProps = customMapping[key](value);
+      if (customProps != null) {
+        props = { ...props, ...customProps };
+      }
+
+      return;
+    }
+
+    if (value !== false) {
+      props[`data-${key.toLowerCase()}`] = value.toString();
+    }
+  });
+
+  return props;
+}
diff --git a/packages/mui-base/src/utils/resolveClassName.ts b/packages/mui-base/src/utils/resolveClassName.ts
new file mode 100644
index 0000000000..2f297225ee
--- /dev/null
+++ b/packages/mui-base/src/utils/resolveClassName.ts
@@ -0,0 +1,13 @@
+/**
+ * If the provided className is a string, it will be returned as is.
+ * Otherwise, the function will call the className function with the ownerState as the first argument.
+ *
+ * @param className
+ * @param ownerState
+ */
+export function resolveClassName<OwnerState>(
+  className: string | ((state: OwnerState) => string) | undefined,
+  ownerState: OwnerState,
+) {
+  return typeof className === 'function' ? className(ownerState) : className;
+}
diff --git a/packages/mui-base/src/utils/useControlled.ts b/packages/mui-base/src/utils/useControlled.ts
new file mode 100644
index 0000000000..075a6d4d9c
--- /dev/null
+++ b/packages/mui-base/src/utils/useControlled.ts
@@ -0,0 +1 @@
+export { default as useControlled } from '@mui/utils/useControlled';
diff --git a/packages/mui-base/src/utils/useForkRef.ts b/packages/mui-base/src/utils/useForkRef.ts
new file mode 100644
index 0000000000..ef39f7f3dd
--- /dev/null
+++ b/packages/mui-base/src/utils/useForkRef.ts
@@ -0,0 +1 @@
+export { default as useForkRef } from '@mui/utils/useForkRef';