diff --git a/docs/pages/material-ui/api/checkbox.json b/docs/pages/material-ui/api/checkbox.json
index 231480e02ad07a..b3c7c83575f0b3 100644
--- a/docs/pages/material-ui/api/checkbox.json
+++ b/docs/pages/material-ui/api/checkbox.json
@@ -34,6 +34,14 @@
},
"default": "'medium'"
},
+ "slotProps": {
+ "type": { "name": "shape", "description": "{ root?: func
| object }" },
+ "default": "{}"
+ },
+ "slots": {
+ "type": { "name": "shape", "description": "{ root?: elementType }" },
+ "default": "{}"
+ },
"sx": {
"type": {
"name": "union",
@@ -48,6 +56,14 @@
"import Checkbox from '@mui/material/Checkbox';",
"import { Checkbox } from '@mui/material';"
],
+ "slots": [
+ {
+ "name": "root",
+ "description": "The component that renders the root slot.",
+ "default": "SwitchBase",
+ "class": "MuiCheckbox-root"
+ }
+ ],
"classes": [
{
"key": "checked",
@@ -79,12 +95,6 @@
"description": "State class applied to the root element if `indeterminate={true}`.",
"isGlobal": false
},
- {
- "key": "root",
- "className": "MuiCheckbox-root",
- "description": "Class name applied to the root element.",
- "isGlobal": false
- },
{
"key": "sizeMedium",
"className": "MuiCheckbox-sizeMedium",
diff --git a/docs/translations/api-docs/checkbox/checkbox.json b/docs/translations/api-docs/checkbox/checkbox.json
index b12f47326deb34..286c2c90396203 100644
--- a/docs/translations/api-docs/checkbox/checkbox.json
+++ b/docs/translations/api-docs/checkbox/checkbox.json
@@ -36,6 +36,8 @@
"size": {
"description": "The size of the component. small
is equivalent to the dense checkbox styling."
},
+ "slotProps": { "description": "The props used for each slot inside." },
+ "slots": { "description": "The components used for each slot inside." },
"sx": {
"description": "The system prop that allows defining system overrides as well as additional CSS styles."
},
@@ -69,7 +71,6 @@
"nodeName": "the root element",
"conditions": "indeterminate={true}
"
},
- "root": { "description": "Class name applied to the root element." },
"sizeMedium": {
"description": "State class applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
@@ -80,5 +81,6 @@
"nodeName": "the root element",
"conditions": "size=\"small\"
"
}
- }
+ },
+ "slotDescriptions": { "root": "The component that renders the root slot." }
}
diff --git a/packages/mui-material/src/Checkbox/Checkbox.d.ts b/packages/mui-material/src/Checkbox/Checkbox.d.ts
index 9d9d6ffca56d24..a0af0d6b7dac26 100644
--- a/packages/mui-material/src/Checkbox/Checkbox.d.ts
+++ b/packages/mui-material/src/Checkbox/Checkbox.d.ts
@@ -1,7 +1,12 @@
import * as React from 'react';
import { SxProps } from '@mui/system';
import { OverridableStringUnion } from '@mui/types';
-import { InternalStandardProps as StandardProps, Theme } from '..';
+import {
+ CreateSlotsAndSlotProps,
+ SlotProps,
+ InternalStandardProps as StandardProps,
+ Theme,
+} from '..';
import { SwitchBaseProps } from '../internal/SwitchBase';
import { CheckboxClasses } from './checkboxClasses';
@@ -9,8 +14,36 @@ export interface CheckboxPropsSizeOverrides {}
export interface CheckboxPropsColorOverrides {}
+export interface CheckboxRootSlotPropsOverrides {}
+
+export interface CheckboxSlots {
+ /**
+ * The component that renders the root slot.
+ * @default SwitchBase
+ */
+ root: React.ElementType;
+}
+
+export type CheckboxSlotsAndSlotProps = CreateSlotsAndSlotProps<
+ CheckboxSlots,
+ {
+ /**
+ * Props forwarded to the root slot.
+ * By default, the available props are based on the SwitchBase.
+ */
+ root: SlotProps<
+ React.ElementType,
+ CheckboxRootSlotPropsOverrides,
+ CheckboxOwnerState
+ >;
+ }
+>;
+
+export interface CheckboxOwnerState extends CheckboxProps {}
+
export interface CheckboxProps
- extends StandardProps {
+ extends StandardProps,
+ CheckboxSlotsAndSlotProps {
/**
* If `true`, the component is checked.
*/
diff --git a/packages/mui-material/src/Checkbox/Checkbox.js b/packages/mui-material/src/Checkbox/Checkbox.js
index e5a19e4f1333e5..afcb8cd7736b24 100644
--- a/packages/mui-material/src/Checkbox/Checkbox.js
+++ b/packages/mui-material/src/Checkbox/Checkbox.js
@@ -17,6 +17,7 @@ import memoTheme from '../utils/memoTheme';
import createSimplePaletteValueFilter from '../utils/createSimplePaletteValueFilter';
import { useDefaultProps } from '../DefaultPropsProvider';
+import useSlot from '../utils/useSlot';
const useUtilityClasses = (ownerState) => {
const { classes, indeterminate, color, size } = ownerState;
@@ -123,6 +124,8 @@ const Checkbox = React.forwardRef(function Checkbox(inProps, ref) {
size = 'medium',
disableRipple = false,
className,
+ slots = {},
+ slotProps = {},
...other
} = props;
@@ -139,8 +142,22 @@ const Checkbox = React.forwardRef(function Checkbox(inProps, ref) {
const classes = useUtilityClasses(ownerState);
+ const externalForwardedProps = {
+ ...other,
+ slots,
+ slotProps,
+ };
+
+ const [RootSlot, rootProps] = useSlot('root', {
+ elementType: CheckboxRoot,
+ ref,
+ className: clsx(classes.root, className),
+ ownerState,
+ externalForwardedProps,
+ });
+
return (
-
);
@@ -259,6 +273,20 @@ Checkbox.propTypes /* remove-proptypes */ = {
PropTypes.oneOf(['medium', 'small']),
PropTypes.string,
]),
+ /**
+ * The props used for each slot inside.
+ * @default {}
+ */
+ slotProps: PropTypes.shape({
+ root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+ }),
+ /**
+ * The components used for each slot inside.
+ * @default {}
+ */
+ slots: PropTypes.shape({
+ root: PropTypes.elementType,
+ }),
/**
* The system prop that allows defining system overrides as well as additional CSS styles.
*/
diff --git a/packages/mui-material/src/Checkbox/Checkbox.test.js b/packages/mui-material/src/Checkbox/Checkbox.test.js
index 63d95bfe3b7438..aa88aab53437ff 100644
--- a/packages/mui-material/src/Checkbox/Checkbox.test.js
+++ b/packages/mui-material/src/Checkbox/Checkbox.test.js
@@ -21,6 +21,12 @@ describe('', () => {
testStateOverrides: { prop: 'color', value: 'secondary', styleKey: 'colorSecondary' },
refInstanceof: window.HTMLSpanElement,
skip: ['componentProp', 'componentsProp', 'rootClass'],
+ slots: {
+ root: {
+ testWithElement: null,
+ expectedClassName: classes.root,
+ },
+ },
}));
it('should have the classes required for Checkbox', () => {