[material-ui][Checkbox] Add slots and slotProps

docs/pages/material-ui/api/checkbox.json

@@ -34,6 +34,14 @@
       },
       "default": "'medium'"
     },
+    "slotProps": {
+      "type": { "name": "shape", "description": "{ root?: func<br>&#124;&nbsp;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",

docs/translations/api-docs/checkbox/checkbox.json

@@ -36,6 +36,8 @@
     "size": {
       "description": "The size of the component. <code>small</code> 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": "<code>indeterminate={true}</code>"
     },
-    "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": "<code>size=\"small\"</code>"
     }
-  }
+  },
+  "slotDescriptions": { "root": "The component that renders the root slot." }
 }

packages/mui-material/src/Checkbox/Checkbox.d.ts

@@ -1,16 +1,49 @@
 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';
 
 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<SwitchBaseProps>,
+      CheckboxRootSlotPropsOverrides,
+      CheckboxOwnerState
+    >;
+  }
+>;
+
+export interface CheckboxOwnerState extends CheckboxProps {}
+
 export interface CheckboxProps
-  extends StandardProps<SwitchBaseProps, 'checkedIcon' | 'color' | 'icon' | 'type'> {
+  extends StandardProps<SwitchBaseProps, 'checkedIcon' | 'color' | 'icon' | 'type'>,
+    CheckboxSlotsAndSlotProps {
   /**
    * If `true`, the component is checked.
    */

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 (
-    <CheckboxRoot
+    <RootSlot
       type="checkbox"
       inputProps={{
         'data-indeterminate': indeterminate,
@@ -152,11 +169,8 @@ const Checkbox = React.forwardRef(function Checkbox(inProps, ref) {
       checkedIcon={React.cloneElement(indeterminateIcon, {
         fontSize: indeterminateIcon.props.fontSize ?? size,
       })}
-      ownerState={ownerState}
-      ref={ref}
-      className={clsx(classes.root, className)}
       disableRipple={disableRipple}
-      {...other}
+      {...rootProps}
       classes={classes}
     />
   );
@@ -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.
    */

packages/mui-material/src/Checkbox/Checkbox.test.js

@@ -21,6 +21,12 @@ describe('<Checkbox />', () => {
     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', () => {