From 70041ad16abc3969cb0993eec0ed1adaf756612e Mon Sep 17 00:00:00 2001
From: Diego Andai <diego@mui.com>
Date: Mon, 20 May 2024 07:17:24 -0400
Subject: [PATCH] [material-ui][TextField] Deprecate `*Props` props (#42062)

---
 .../components/autocomplete/Asynchronous.js   |  18 +--
 .../components/autocomplete/Asynchronous.tsx  |  18 +--
 .../components/autocomplete/CountrySelect.js  |   8 +-
 .../components/autocomplete/CountrySelect.tsx |   8 +-
 .../components/autocomplete/FreeSolo.js       |   8 +-
 .../components/autocomplete/FreeSolo.tsx      |   8 +-
 .../components/popper/ScrollPlayground.js     |  65 +++++----
 .../text-fields/CustomizedInputsStyled.js     |   7 +-
 .../text-fields/CustomizedInputsStyled.tsx    |   4 +-
 .../text-fields/FormPropsTextFields.js        |  44 +++---
 .../text-fields/FormPropsTextFields.tsx       |  44 +++---
 .../components/text-fields/FormattedInputs.js |   6 +-
 .../text-fields/FormattedInputs.tsx           |   6 +-
 .../components/text-fields/InputAdornments.js |  18 ++-
 .../text-fields/InputAdornments.tsx           |  18 ++-
 .../components/text-fields/InputWithIcon.js   |  14 +-
 .../components/text-fields/InputWithIcon.tsx  |  14 +-
 .../text-fields/SelectTextFields.js           |  18 ++-
 .../text-fields/SelectTextFields.tsx          |  18 ++-
 .../landing-page/components/Footer.js         |   8 +-
 .../landing-page/components/Footer.tsx        |   8 +-
 .../templates/landing-page/components/Hero.js |   8 +-
 .../landing-page/components/Hero.tsx          |   8 +-
 .../migrating-from-deprecated-apis.md         |  29 ++++
 docs/pages/material-ui/api/text-field.json    |  77 +++++++++-
 .../onepirate/modules/components/TextField.js |   3 +
 .../onepirate/modules/form/RFTextField.js     |   1 +
 .../api-docs/text-field/text-field.json       |  11 +-
 packages/mui-codemod/CONTRIBUTING.md          |   1 +
 packages/mui-codemod/README.md                |  23 +++
 .../src/deprecations/all/deprecations-all.js  |   2 +
 .../deprecations/text-field-props/index.js    |   1 +
 .../text-field-props/test-cases/actual.js     |  24 ++++
 .../text-field-props/test-cases/expected.js   |  26 ++++
 .../test-cases/theme.actual.js                |  11 ++
 .../test-cases/theme.expected.js              |  13 ++
 .../text-field-props/text-field-props.js      |  48 +++++++
 .../text-field-props/text-field-props.test.js |  16 +++
 packages/mui-codemod/testUtils/index.js       |  29 +++-
 .../src/FormHelperText/FormHelperText.js      |   5 +-
 .../mui-material/src/InputBase/InputBase.js   |   7 +-
 .../mui-material/src/InputLabel/InputLabel.js |   2 +-
 .../mui-material/src/Select/SelectInput.js    |   2 +-
 .../mui-material/src/TextField/TextField.d.ts |  61 +++++++-
 .../mui-material/src/TextField/TextField.js   | 131 ++++++++++++++----
 .../src/TextField/TextField.test.js           |  68 +++++++--
 46 files changed, 771 insertions(+), 196 deletions(-)
 create mode 100644 packages/mui-codemod/src/deprecations/text-field-props/index.js
 create mode 100644 packages/mui-codemod/src/deprecations/text-field-props/test-cases/actual.js
 create mode 100644 packages/mui-codemod/src/deprecations/text-field-props/test-cases/expected.js
 create mode 100644 packages/mui-codemod/src/deprecations/text-field-props/test-cases/theme.actual.js
 create mode 100644 packages/mui-codemod/src/deprecations/text-field-props/test-cases/theme.expected.js
 create mode 100644 packages/mui-codemod/src/deprecations/text-field-props/text-field-props.js
 create mode 100644 packages/mui-codemod/src/deprecations/text-field-props/text-field-props.test.js

diff --git a/docs/data/material/components/autocomplete/Asynchronous.js b/docs/data/material/components/autocomplete/Asynchronous.js
index 9244ba11f5b8ef..969f62e5cd28ae 100644
--- a/docs/data/material/components/autocomplete/Asynchronous.js
+++ b/docs/data/material/components/autocomplete/Asynchronous.js
@@ -60,14 +60,16 @@ export default function Asynchronous() {
         <TextField
           {...params}
           label="Asynchronous"
-          InputProps={{
-            ...params.InputProps,
-            endAdornment: (
-              <React.Fragment>
-                {loading ? <CircularProgress color="inherit" size={20} /> : null}
-                {params.InputProps.endAdornment}
-              </React.Fragment>
-            ),
+          slotProps={{
+            input: {
+              ...params.InputProps,
+              endAdornment: (
+                <React.Fragment>
+                  {loading ? <CircularProgress color="inherit" size={20} /> : null}
+                  {params.InputProps.endAdornment}
+                </React.Fragment>
+              ),
+            },
           }}
         />
       )}
diff --git a/docs/data/material/components/autocomplete/Asynchronous.tsx b/docs/data/material/components/autocomplete/Asynchronous.tsx
index 382bcc2b1dcb97..82c009c528ba2d 100644
--- a/docs/data/material/components/autocomplete/Asynchronous.tsx
+++ b/docs/data/material/components/autocomplete/Asynchronous.tsx
@@ -65,14 +65,16 @@ export default function Asynchronous() {
         <TextField
           {...params}
           label="Asynchronous"
-          InputProps={{
-            ...params.InputProps,
-            endAdornment: (
-              <React.Fragment>
-                {loading ? <CircularProgress color="inherit" size={20} /> : null}
-                {params.InputProps.endAdornment}
-              </React.Fragment>
-            ),
+          slotProps={{
+            input: {
+              ...params.InputProps,
+              endAdornment: (
+                <React.Fragment>
+                  {loading ? <CircularProgress color="inherit" size={20} /> : null}
+                  {params.InputProps.endAdornment}
+                </React.Fragment>
+              ),
+            },
           }}
         />
       )}
diff --git a/docs/data/material/components/autocomplete/CountrySelect.js b/docs/data/material/components/autocomplete/CountrySelect.js
index da2dfec88e27cd..d9b9dc9a348435 100644
--- a/docs/data/material/components/autocomplete/CountrySelect.js
+++ b/docs/data/material/components/autocomplete/CountrySelect.js
@@ -27,9 +27,11 @@ export default function CountrySelect() {
         <TextField
           {...params}
           label="Choose a country"
-          inputProps={{
-            ...params.inputProps,
-            autoComplete: 'new-password', // disable autocomplete and autofill
+          slotProps={{
+            htmlInput: {
+              ...params.inputProps,
+              autoComplete: 'new-password', // disable autocomplete and autofill
+            },
           }}
         />
       )}
diff --git a/docs/data/material/components/autocomplete/CountrySelect.tsx b/docs/data/material/components/autocomplete/CountrySelect.tsx
index 4c26d29c2c04ce..897c3c197476ce 100644
--- a/docs/data/material/components/autocomplete/CountrySelect.tsx
+++ b/docs/data/material/components/autocomplete/CountrySelect.tsx
@@ -27,9 +27,11 @@ export default function CountrySelect() {
         <TextField
           {...params}
           label="Choose a country"
-          inputProps={{
-            ...params.inputProps,
-            autoComplete: 'new-password', // disable autocomplete and autofill
+          slotProps={{
+            htmlInput: {
+              ...params.inputProps,
+              autoComplete: 'new-password', // disable autocomplete and autofill
+            },
           }}
         />
       )}
diff --git a/docs/data/material/components/autocomplete/FreeSolo.js b/docs/data/material/components/autocomplete/FreeSolo.js
index d2b6b33c81680a..981c001d25ad78 100644
--- a/docs/data/material/components/autocomplete/FreeSolo.js
+++ b/docs/data/material/components/autocomplete/FreeSolo.js
@@ -21,9 +21,11 @@ export default function FreeSolo() {
           <TextField
             {...params}
             label="Search input"
-            InputProps={{
-              ...params.InputProps,
-              type: 'search',
+            slotProps={{
+              input: {
+                ...params.InputProps,
+                type: 'search',
+              },
             }}
           />
         )}
diff --git a/docs/data/material/components/autocomplete/FreeSolo.tsx b/docs/data/material/components/autocomplete/FreeSolo.tsx
index d2b6b33c81680a..981c001d25ad78 100644
--- a/docs/data/material/components/autocomplete/FreeSolo.tsx
+++ b/docs/data/material/components/autocomplete/FreeSolo.tsx
@@ -21,9 +21,11 @@ export default function FreeSolo() {
           <TextField
             {...params}
             label="Search input"
-            InputProps={{
-              ...params.InputProps,
-              type: 'search',
+            slotProps={{
+              input: {
+                ...params.InputProps,
+                type: 'search',
+              },
             }}
           />
         )}
diff --git a/docs/data/material/components/popper/ScrollPlayground.js b/docs/data/material/components/popper/ScrollPlayground.js
index 24cbe701c2f13a..faeebbc1c5e053 100644
--- a/docs/data/material/components/popper/ScrollPlayground.js
+++ b/docs/data/material/components/popper/ScrollPlayground.js
@@ -275,20 +275,23 @@ export default function ScrollPlayground() {
               sx={{ width: 200 }}
               label="Placement"
               select
-              InputLabelProps={{
-                id: 'scroll-playground-placement-label',
-              }}
-              SelectProps={{
-                native: true,
-                inputProps: {
-                  'aria-labelledby': 'scroll-playground-placement-label',
-                },
-              }}
               value={placement}
               onChange={(event) => {
                 setPlacement(event.target.value);
               }}
               variant="standard"
+              slotProps={{
+                select: {
+                  native: true,
+                  inputProps: {
+                    'aria-labelledby': 'scroll-playground-placement-label',
+                  },
+                },
+
+                inputLabel: {
+                  id: 'scroll-playground-placement-label',
+                },
+              }}
             >
               <option value="top-start">top-start</option>
               <option value="top">top</option>
@@ -396,16 +399,6 @@ export default function ScrollPlayground() {
                 size="small"
                 label="Root Boundary"
                 select
-                InputLabelProps={{
-                  id: 'scroll-playground-prevent-overflow-root-boundary',
-                }}
-                SelectProps={{
-                  native: true,
-                  inputProps: {
-                    'aria-labelledby':
-                      'scroll-playground-prevent-overflow-root-boundary',
-                  },
-                }}
                 value={preventOverflow.rootBoundary}
                 onChange={(event) => {
                   setPreventOverflow((old) => ({
@@ -414,6 +407,19 @@ export default function ScrollPlayground() {
                   }));
                 }}
                 variant="standard"
+                slotProps={{
+                  select: {
+                    native: true,
+                    inputProps: {
+                      'aria-labelledby':
+                        'scroll-playground-prevent-overflow-root-boundary',
+                    },
+                  },
+
+                  inputLabel: {
+                    id: 'scroll-playground-prevent-overflow-root-boundary',
+                  },
+                }}
               >
                 <option value="document">document</option>
                 <option value="viewport">viewport</option>
@@ -458,15 +464,6 @@ export default function ScrollPlayground() {
                 size="small"
                 label="Root Boundary"
                 select
-                InputLabelProps={{
-                  id: 'scroll-playground-flip-root-boundary',
-                }}
-                SelectProps={{
-                  native: true,
-                  inputProps: {
-                    'aria-labelledby': 'scroll-playground-flip-root-boundary',
-                  },
-                }}
                 value={flip.rootBoundary}
                 onChange={(event) => {
                   setFlip((old) => ({
@@ -475,6 +472,18 @@ export default function ScrollPlayground() {
                   }));
                 }}
                 variant="standard"
+                slotProps={{
+                  select: {
+                    native: true,
+                    inputProps: {
+                      'aria-labelledby': 'scroll-playground-flip-root-boundary',
+                    },
+                  },
+
+                  inputLabel: {
+                    id: 'scroll-playground-flip-root-boundary',
+                  },
+                }}
               >
                 <option value="document">document</option>
                 <option value="viewport">viewport</option>
diff --git a/docs/data/material/components/text-fields/CustomizedInputsStyled.js b/docs/data/material/components/text-fields/CustomizedInputsStyled.js
index 70306371e8e40e..2855127eb80f9a 100644
--- a/docs/data/material/components/text-fields/CustomizedInputsStyled.js
+++ b/docs/data/material/components/text-fields/CustomizedInputsStyled.js
@@ -65,7 +65,12 @@ const BootstrapInput = styled(InputBase)(({ theme }) => ({
 }));
 
 const RedditTextField = styled((props) => (
-  <TextField InputProps={{ disableUnderline: true }} {...props} />
+  <TextField
+    slotProps={{
+      input: { disableUnderline: true },
+    }}
+    {...props}
+  />
 ))(({ theme }) => ({
   '& .MuiFilledInput-root': {
     overflow: 'hidden',
diff --git a/docs/data/material/components/text-fields/CustomizedInputsStyled.tsx b/docs/data/material/components/text-fields/CustomizedInputsStyled.tsx
index 825a6b7cde9f77..ef7ee416c73896 100644
--- a/docs/data/material/components/text-fields/CustomizedInputsStyled.tsx
+++ b/docs/data/material/components/text-fields/CustomizedInputsStyled.tsx
@@ -67,7 +67,9 @@ const BootstrapInput = styled(InputBase)(({ theme }) => ({
 
 const RedditTextField = styled((props: TextFieldProps) => (
   <TextField
-    InputProps={{ disableUnderline: true } as Partial<OutlinedInputProps>}
+    slotProps={{
+      input: { disableUnderline: true } as Partial<OutlinedInputProps>,
+    }}
     {...props}
   />
 ))(({ theme }) => ({
diff --git a/docs/data/material/components/text-fields/FormPropsTextFields.js b/docs/data/material/components/text-fields/FormPropsTextFields.js
index 548213006a755e..33d7f6dff4b3b5 100644
--- a/docs/data/material/components/text-fields/FormPropsTextFields.js
+++ b/docs/data/material/components/text-fields/FormPropsTextFields.js
@@ -35,16 +35,20 @@ export default function FormPropsTextFields() {
           id="outlined-read-only-input"
           label="Read Only"
           defaultValue="Hello World"
-          InputProps={{
-            readOnly: true,
+          slotProps={{
+            input: {
+              readOnly: true,
+            },
           }}
         />
         <TextField
           id="outlined-number"
           label="Number"
           type="number"
-          InputLabelProps={{
-            shrink: true,
+          slotProps={{
+            inputLabel: {
+              shrink: true,
+            },
           }}
         />
         <TextField id="outlined-search" label="Search field" type="search" />
@@ -81,19 +85,23 @@ export default function FormPropsTextFields() {
           id="filled-read-only-input"
           label="Read Only"
           defaultValue="Hello World"
-          InputProps={{
-            readOnly: true,
-          }}
           variant="filled"
+          slotProps={{
+            input: {
+              readOnly: true,
+            },
+          }}
         />
         <TextField
           id="filled-number"
           label="Number"
           type="number"
-          InputLabelProps={{
-            shrink: true,
-          }}
           variant="filled"
+          slotProps={{
+            inputLabel: {
+              shrink: true,
+            },
+          }}
         />
         <TextField
           id="filled-search"
@@ -135,19 +143,23 @@ export default function FormPropsTextFields() {
           id="standard-read-only-input"
           label="Read Only"
           defaultValue="Hello World"
-          InputProps={{
-            readOnly: true,
-          }}
           variant="standard"
+          slotProps={{
+            input: {
+              readOnly: true,
+            },
+          }}
         />
         <TextField
           id="standard-number"
           label="Number"
           type="number"
-          InputLabelProps={{
-            shrink: true,
-          }}
           variant="standard"
+          slotProps={{
+            inputLabel: {
+              shrink: true,
+            },
+          }}
         />
         <TextField
           id="standard-search"
diff --git a/docs/data/material/components/text-fields/FormPropsTextFields.tsx b/docs/data/material/components/text-fields/FormPropsTextFields.tsx
index 548213006a755e..33d7f6dff4b3b5 100644
--- a/docs/data/material/components/text-fields/FormPropsTextFields.tsx
+++ b/docs/data/material/components/text-fields/FormPropsTextFields.tsx
@@ -35,16 +35,20 @@ export default function FormPropsTextFields() {
           id="outlined-read-only-input"
           label="Read Only"
           defaultValue="Hello World"
-          InputProps={{
-            readOnly: true,
+          slotProps={{
+            input: {
+              readOnly: true,
+            },
           }}
         />
         <TextField
           id="outlined-number"
           label="Number"
           type="number"
-          InputLabelProps={{
-            shrink: true,
+          slotProps={{
+            inputLabel: {
+              shrink: true,
+            },
           }}
         />
         <TextField id="outlined-search" label="Search field" type="search" />
@@ -81,19 +85,23 @@ export default function FormPropsTextFields() {
           id="filled-read-only-input"
           label="Read Only"
           defaultValue="Hello World"
-          InputProps={{
-            readOnly: true,
-          }}
           variant="filled"
+          slotProps={{
+            input: {
+              readOnly: true,
+            },
+          }}
         />
         <TextField
           id="filled-number"
           label="Number"
           type="number"
-          InputLabelProps={{
-            shrink: true,
-          }}
           variant="filled"
+          slotProps={{
+            inputLabel: {
+              shrink: true,
+            },
+          }}
         />
         <TextField
           id="filled-search"
@@ -135,19 +143,23 @@ export default function FormPropsTextFields() {
           id="standard-read-only-input"
           label="Read Only"
           defaultValue="Hello World"
-          InputProps={{
-            readOnly: true,
-          }}
           variant="standard"
+          slotProps={{
+            input: {
+              readOnly: true,
+            },
+          }}
         />
         <TextField
           id="standard-number"
           label="Number"
           type="number"
-          InputLabelProps={{
-            shrink: true,
-          }}
           variant="standard"
+          slotProps={{
+            inputLabel: {
+              shrink: true,
+            },
+          }}
         />
         <TextField
           id="standard-search"
diff --git a/docs/data/material/components/text-fields/FormattedInputs.js b/docs/data/material/components/text-fields/FormattedInputs.js
index 16cf2e843c2206..41fa0dc890b3f3 100644
--- a/docs/data/material/components/text-fields/FormattedInputs.js
+++ b/docs/data/material/components/text-fields/FormattedInputs.js
@@ -89,8 +89,10 @@ export default function FormattedInputs() {
         onChange={handleChange}
         name="numberformat"
         id="formatted-numberformat-input"
-        InputProps={{
-          inputComponent: NumericFormatCustom,
+        slotProps={{
+          input: {
+            inputComponent: NumericFormatCustom,
+          },
         }}
         variant="standard"
       />
diff --git a/docs/data/material/components/text-fields/FormattedInputs.tsx b/docs/data/material/components/text-fields/FormattedInputs.tsx
index f14a821f121e7f..86bc31d4208c5f 100644
--- a/docs/data/material/components/text-fields/FormattedInputs.tsx
+++ b/docs/data/material/components/text-fields/FormattedInputs.tsx
@@ -85,8 +85,10 @@ export default function FormattedInputs() {
         onChange={handleChange}
         name="numberformat"
         id="formatted-numberformat-input"
-        InputProps={{
-          inputComponent: NumericFormatCustom as any,
+        slotProps={{
+          input: {
+            inputComponent: NumericFormatCustom as any,
+          },
         }}
         variant="standard"
       />
diff --git a/docs/data/material/components/text-fields/InputAdornments.js b/docs/data/material/components/text-fields/InputAdornments.js
index a6e64b12a43855..39a5c219e43d2e 100644
--- a/docs/data/material/components/text-fields/InputAdornments.js
+++ b/docs/data/material/components/text-fields/InputAdornments.js
@@ -28,8 +28,10 @@ export default function InputAdornments() {
           label="With normal TextField"
           id="outlined-start-adornment"
           sx={{ m: 1, width: '25ch' }}
-          InputProps={{
-            startAdornment: <InputAdornment position="start">kg</InputAdornment>,
+          slotProps={{
+            input: {
+              startAdornment: <InputAdornment position="start">kg</InputAdornment>,
+            },
           }}
         />
         <FormControl sx={{ m: 1, width: '25ch' }} variant="outlined">
@@ -77,8 +79,10 @@ export default function InputAdornments() {
           label="With normal TextField"
           id="filled-start-adornment"
           sx={{ m: 1, width: '25ch' }}
-          InputProps={{
-            startAdornment: <InputAdornment position="start">kg</InputAdornment>,
+          slotProps={{
+            input: {
+              startAdornment: <InputAdornment position="start">kg</InputAdornment>,
+            },
           }}
           variant="filled"
         />
@@ -125,8 +129,10 @@ export default function InputAdornments() {
           label="With normal TextField"
           id="standard-start-adornment"
           sx={{ m: 1, width: '25ch' }}
-          InputProps={{
-            startAdornment: <InputAdornment position="start">kg</InputAdornment>,
+          slotProps={{
+            input: {
+              startAdornment: <InputAdornment position="start">kg</InputAdornment>,
+            },
           }}
           variant="standard"
         />
diff --git a/docs/data/material/components/text-fields/InputAdornments.tsx b/docs/data/material/components/text-fields/InputAdornments.tsx
index 0701e18cc5301e..a347354809a2fc 100644
--- a/docs/data/material/components/text-fields/InputAdornments.tsx
+++ b/docs/data/material/components/text-fields/InputAdornments.tsx
@@ -28,8 +28,10 @@ export default function InputAdornments() {
           label="With normal TextField"
           id="outlined-start-adornment"
           sx={{ m: 1, width: '25ch' }}
-          InputProps={{
-            startAdornment: <InputAdornment position="start">kg</InputAdornment>,
+          slotProps={{
+            input: {
+              startAdornment: <InputAdornment position="start">kg</InputAdornment>,
+            },
           }}
         />
         <FormControl sx={{ m: 1, width: '25ch' }} variant="outlined">
@@ -77,8 +79,10 @@ export default function InputAdornments() {
           label="With normal TextField"
           id="filled-start-adornment"
           sx={{ m: 1, width: '25ch' }}
-          InputProps={{
-            startAdornment: <InputAdornment position="start">kg</InputAdornment>,
+          slotProps={{
+            input: {
+              startAdornment: <InputAdornment position="start">kg</InputAdornment>,
+            },
           }}
           variant="filled"
         />
@@ -125,8 +129,10 @@ export default function InputAdornments() {
           label="With normal TextField"
           id="standard-start-adornment"
           sx={{ m: 1, width: '25ch' }}
-          InputProps={{
-            startAdornment: <InputAdornment position="start">kg</InputAdornment>,
+          slotProps={{
+            input: {
+              startAdornment: <InputAdornment position="start">kg</InputAdornment>,
+            },
           }}
           variant="standard"
         />
diff --git a/docs/data/material/components/text-fields/InputWithIcon.js b/docs/data/material/components/text-fields/InputWithIcon.js
index 2967d1d9432b25..95293ef333bdf9 100644
--- a/docs/data/material/components/text-fields/InputWithIcon.js
+++ b/docs/data/material/components/text-fields/InputWithIcon.js
@@ -26,12 +26,14 @@ export default function InputWithIcon() {
       <TextField
         id="input-with-icon-textfield"
         label="TextField"
-        InputProps={{
-          startAdornment: (
-            <InputAdornment position="start">
-              <AccountCircle />
-            </InputAdornment>
-          ),
+        slotProps={{
+          input: {
+            startAdornment: (
+              <InputAdornment position="start">
+                <AccountCircle />
+              </InputAdornment>
+            ),
+          },
         }}
         variant="standard"
       />
diff --git a/docs/data/material/components/text-fields/InputWithIcon.tsx b/docs/data/material/components/text-fields/InputWithIcon.tsx
index 2967d1d9432b25..95293ef333bdf9 100644
--- a/docs/data/material/components/text-fields/InputWithIcon.tsx
+++ b/docs/data/material/components/text-fields/InputWithIcon.tsx
@@ -26,12 +26,14 @@ export default function InputWithIcon() {
       <TextField
         id="input-with-icon-textfield"
         label="TextField"
-        InputProps={{
-          startAdornment: (
-            <InputAdornment position="start">
-              <AccountCircle />
-            </InputAdornment>
-          ),
+        slotProps={{
+          input: {
+            startAdornment: (
+              <InputAdornment position="start">
+                <AccountCircle />
+              </InputAdornment>
+            ),
+          },
         }}
         variant="standard"
       />
diff --git a/docs/data/material/components/text-fields/SelectTextFields.js b/docs/data/material/components/text-fields/SelectTextFields.js
index 25a8e7ec321cff..ef7c5e00378222 100644
--- a/docs/data/material/components/text-fields/SelectTextFields.js
+++ b/docs/data/material/components/text-fields/SelectTextFields.js
@@ -51,8 +51,10 @@ export default function SelectTextFields() {
           select
           label="Native select"
           defaultValue="EUR"
-          SelectProps={{
-            native: true,
+          slotProps={{
+            select: {
+              native: true,
+            },
           }}
           helperText="Please select your currency"
         >
@@ -83,8 +85,10 @@ export default function SelectTextFields() {
           select
           label="Native select"
           defaultValue="EUR"
-          SelectProps={{
-            native: true,
+          slotProps={{
+            select: {
+              native: true,
+            },
           }}
           helperText="Please select your currency"
           variant="filled"
@@ -116,8 +120,10 @@ export default function SelectTextFields() {
           select
           label="Native select"
           defaultValue="EUR"
-          SelectProps={{
-            native: true,
+          slotProps={{
+            select: {
+              native: true,
+            },
           }}
           helperText="Please select your currency"
           variant="standard"
diff --git a/docs/data/material/components/text-fields/SelectTextFields.tsx b/docs/data/material/components/text-fields/SelectTextFields.tsx
index 25a8e7ec321cff..ef7c5e00378222 100644
--- a/docs/data/material/components/text-fields/SelectTextFields.tsx
+++ b/docs/data/material/components/text-fields/SelectTextFields.tsx
@@ -51,8 +51,10 @@ export default function SelectTextFields() {
           select
           label="Native select"
           defaultValue="EUR"
-          SelectProps={{
-            native: true,
+          slotProps={{
+            select: {
+              native: true,
+            },
           }}
           helperText="Please select your currency"
         >
@@ -83,8 +85,10 @@ export default function SelectTextFields() {
           select
           label="Native select"
           defaultValue="EUR"
-          SelectProps={{
-            native: true,
+          slotProps={{
+            select: {
+              native: true,
+            },
           }}
           helperText="Please select your currency"
           variant="filled"
@@ -116,8 +120,10 @@ export default function SelectTextFields() {
           select
           label="Native select"
           defaultValue="EUR"
-          SelectProps={{
-            native: true,
+          slotProps={{
+            select: {
+              native: true,
+            },
           }}
           helperText="Please select your currency"
           variant="standard"
diff --git a/docs/data/material/getting-started/templates/landing-page/components/Footer.js b/docs/data/material/getting-started/templates/landing-page/components/Footer.js
index 43aa5115caa990..984c992cd8c98e 100644
--- a/docs/data/material/getting-started/templates/landing-page/components/Footer.js
+++ b/docs/data/material/getting-started/templates/landing-page/components/Footer.js
@@ -75,9 +75,11 @@ export default function Footer() {
                 fullWidth
                 aria-label="Enter your email address"
                 placeholder="Your email address"
-                inputProps={{
-                  autoComplete: 'off',
-                  'aria-label': 'Enter your email address',
+                slotProps={{
+                  htmlInput: {
+                    autoComplete: 'off',
+                    'aria-label': 'Enter your email address',
+                  },
                 }}
               />
               <Button variant="contained" color="primary" sx={{ flexShrink: 0 }}>
diff --git a/docs/data/material/getting-started/templates/landing-page/components/Footer.tsx b/docs/data/material/getting-started/templates/landing-page/components/Footer.tsx
index 43aa5115caa990..984c992cd8c98e 100644
--- a/docs/data/material/getting-started/templates/landing-page/components/Footer.tsx
+++ b/docs/data/material/getting-started/templates/landing-page/components/Footer.tsx
@@ -75,9 +75,11 @@ export default function Footer() {
                 fullWidth
                 aria-label="Enter your email address"
                 placeholder="Your email address"
-                inputProps={{
-                  autoComplete: 'off',
-                  'aria-label': 'Enter your email address',
+                slotProps={{
+                  htmlInput: {
+                    autoComplete: 'off',
+                    'aria-label': 'Enter your email address',
+                  },
                 }}
               />
               <Button variant="contained" color="primary" sx={{ flexShrink: 0 }}>
diff --git a/docs/data/material/getting-started/templates/landing-page/components/Hero.js b/docs/data/material/getting-started/templates/landing-page/components/Hero.js
index aa30ded5246e5d..06e3ae22817ab1 100644
--- a/docs/data/material/getting-started/templates/landing-page/components/Hero.js
+++ b/docs/data/material/getting-started/templates/landing-page/components/Hero.js
@@ -113,9 +113,11 @@ export default function Hero() {
               variant="outlined"
               aria-label="Enter your email address"
               placeholder="Your email address"
-              inputProps={{
-                autoComplete: 'off',
-                'aria-label': 'Enter your email address',
+              slotProps={{
+                htmlInput: {
+                  autoComplete: 'off',
+                  'aria-label': 'Enter your email address',
+                },
               }}
             />
             <Button variant="contained" color="primary">
diff --git a/docs/data/material/getting-started/templates/landing-page/components/Hero.tsx b/docs/data/material/getting-started/templates/landing-page/components/Hero.tsx
index aa30ded5246e5d..06e3ae22817ab1 100644
--- a/docs/data/material/getting-started/templates/landing-page/components/Hero.tsx
+++ b/docs/data/material/getting-started/templates/landing-page/components/Hero.tsx
@@ -113,9 +113,11 @@ export default function Hero() {
               variant="outlined"
               aria-label="Enter your email address"
               placeholder="Your email address"
-              inputProps={{
-                autoComplete: 'off',
-                'aria-label': 'Enter your email address',
+              slotProps={{
+                htmlInput: {
+                  autoComplete: 'off',
+                  'aria-label': 'Enter your email address',
+                },
               }}
             />
             <Button variant="contained" color="primary">
diff --git a/docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md b/docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md
index 92d83f8645ef59..1347af809feaa0 100644
--- a/docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md
+++ b/docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md
@@ -1124,6 +1124,35 @@ Here's how to migrate:
   },
 ```
 
+## TextField
+
+Use the [codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#text-field-props) below to migrate the code as described in the following sections:
+
+```bash
+npx @mui/codemod@next deprecations/text-field-props <path>
+```
+
+### \*Props props
+
+All of the TextField's slot props (`*Props`) props were deprecated in favor of equivalent `slotProps` entries:
+
+```diff
+ <TextField
+-    InputProps={CustomInputProps}
+-    inputProps={CustomHtmlInputProps}
+-    SelectProps={CustomSelectProps}
+-    InputLabelProps={CustomInputLabelProps}
+-    FormHelperTextProps={CustomFormHelperProps}
++    slotProps={{
++        input: CustomInputProps
++        htmlInput: CustomHtmlInputProps
++        select: CustomSelectProps
++        inputLabel: CustomInputLabelProps
++        formHelper: CustomFormHelperProps
++    }}
+ />
+```
+
 ## StepLabel
 
 Use the [codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#step-label-props) below to migrate the code as described in the following sections:
diff --git a/docs/pages/material-ui/api/text-field.json b/docs/pages/material-ui/api/text-field.json
index 54a93d6110a962..0bbad58b8b4746 100644
--- a/docs/pages/material-ui/api/text-field.json
+++ b/docs/pages/material-ui/api/text-field.json
@@ -13,13 +13,29 @@
     "defaultValue": { "type": { "name": "any" } },
     "disabled": { "type": { "name": "bool" }, "default": "false" },
     "error": { "type": { "name": "bool" }, "default": "false" },
-    "FormHelperTextProps": { "type": { "name": "object" } },
+    "FormHelperTextProps": {
+      "type": { "name": "object" },
+      "deprecated": true,
+      "deprecationInfo": "Use <code>slotProps.formHelperText</code> instead. This prop will be removed in v7. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
+    },
     "fullWidth": { "type": { "name": "bool" }, "default": "false" },
     "helperText": { "type": { "name": "node" } },
     "id": { "type": { "name": "string" } },
-    "InputLabelProps": { "type": { "name": "object" } },
-    "inputProps": { "type": { "name": "object" } },
-    "InputProps": { "type": { "name": "object" } },
+    "InputLabelProps": {
+      "type": { "name": "object" },
+      "deprecated": true,
+      "deprecationInfo": "Use <code>slotProps.inputLabel</code> instead. This prop will be removed in v7. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
+    },
+    "inputProps": {
+      "type": { "name": "object" },
+      "deprecated": true,
+      "deprecationInfo": "Use <code>slotProps.htmlInput</code> instead. This prop will be removed in v7. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
+    },
+    "InputProps": {
+      "type": { "name": "object" },
+      "deprecated": true,
+      "deprecationInfo": "Use <code>slotProps.input</code> instead. This prop will be removed in v7. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
+    },
     "inputRef": { "type": { "name": "custom", "description": "ref" } },
     "label": { "type": { "name": "node" } },
     "margin": {
@@ -41,13 +57,31 @@
     "required": { "type": { "name": "bool" }, "default": "false" },
     "rows": { "type": { "name": "union", "description": "number<br>&#124;&nbsp;string" } },
     "select": { "type": { "name": "bool" }, "default": "false" },
-    "SelectProps": { "type": { "name": "object" } },
+    "SelectProps": {
+      "type": { "name": "object" },
+      "deprecated": true,
+      "deprecationInfo": "Use <code>slotProps.select</code> instead. This prop will be removed in v7. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
+    },
     "size": {
       "type": {
         "name": "union",
         "description": "'medium'<br>&#124;&nbsp;'small'<br>&#124;&nbsp;string"
       }
     },
+    "slotProps": {
+      "type": {
+        "name": "shape",
+        "description": "{ formHelperText?: func<br>&#124;&nbsp;object, htmlInput?: func<br>&#124;&nbsp;object, input?: func<br>&#124;&nbsp;object, inputLabel?: func<br>&#124;&nbsp;object, select?: func<br>&#124;&nbsp;object }"
+      },
+      "default": "{}"
+    },
+    "slots": {
+      "type": {
+        "name": "shape",
+        "description": "{ formHelperText?: elementType, htmlInput?: elementType, input?: elementType, inputLabel?: elementType, select?: elementType }"
+      },
+      "default": "{}"
+    },
     "sx": {
       "type": {
         "name": "union",
@@ -70,6 +104,38 @@
     "import TextField from '@mui/material/TextField';",
     "import { TextField } from '@mui/material';"
   ],
+  "slots": [
+    {
+      "name": "input",
+      "description": "The component that renders the input.",
+      "default": "OutlinedInput",
+      "class": null
+    },
+    {
+      "name": "inputLabel",
+      "description": "The component that renders the input's label.",
+      "default": "InputLabel",
+      "class": null
+    },
+    {
+      "name": "htmlInput",
+      "description": "The html input element.",
+      "default": "'input'",
+      "class": null
+    },
+    {
+      "name": "formHelperText",
+      "description": "The component that renders the helper text.",
+      "default": "FormHelperText",
+      "class": null
+    },
+    {
+      "name": "select",
+      "description": "The component that renders the select.",
+      "default": "Select",
+      "class": null
+    }
+  ],
   "classes": [
     {
       "key": "root",
@@ -81,7 +147,6 @@
   "spread": true,
   "themeDefaultProps": true,
   "muiName": "MuiTextField",
-  "forwardsRefTo": "HTMLDivElement",
   "filename": "/packages/mui-material/src/TextField/TextField.js",
   "inheritance": { "component": "FormControl", "pathname": "/material-ui/api/form-control/" },
   "demos": "<ul><li><a href=\"/material-ui/react-autocomplete/\">Autocomplete</a></li>\n<li><a href=\"/material-ui/react-text-field/\">Text Field</a></li></ul>",
diff --git a/docs/src/pages/premium-themes/onepirate/modules/components/TextField.js b/docs/src/pages/premium-themes/onepirate/modules/components/TextField.js
index 9ddaeaeb152f4c..84708a61630ef9 100644
--- a/docs/src/pages/premium-themes/onepirate/modules/components/TextField.js
+++ b/docs/src/pages/premium-themes/onepirate/modules/components/TextField.js
@@ -119,6 +119,7 @@ TextField.propTypes = {
   /**
    * Props applied to the [`InputLabel`](/material-ui/api/input-label/) element.
    * Pointer events like `onClick` are enabled if and only if `shrink` is `true`.
+   * @deprecated Use `slotProps.inputLabel` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   InputLabelProps: PropTypes.object,
   /**
@@ -126,11 +127,13 @@ TextField.propTypes = {
    * It will be a [`FilledInput`](/material-ui/api/filled-input/),
    * [`OutlinedInput`](/material-ui/api/outlined-input/) or [`Input`](/material-ui/api/input/)
    * component depending on the `variant` prop value.
+   * @deprecated Use `slotProps.input` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   InputProps: PropTypes.object,
   noBorder: PropTypes.bool,
   /**
    * Props applied to the [`Select`](/material-ui/api/select/) element.
+   * @deprecated Use `slotProps.select` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   SelectProps: PropTypes.object,
   size: PropTypes.oneOf(['large', 'medium', 'small', 'xlarge']),
diff --git a/docs/src/pages/premium-themes/onepirate/modules/form/RFTextField.js b/docs/src/pages/premium-themes/onepirate/modules/form/RFTextField.js
index 196430fcc284a9..e7e89210d54761 100644
--- a/docs/src/pages/premium-themes/onepirate/modules/form/RFTextField.js
+++ b/docs/src/pages/premium-themes/onepirate/modules/form/RFTextField.js
@@ -51,6 +51,7 @@ RFTextField.propTypes = {
    * It will be a [`FilledInput`](/material-ui/api/filled-input/),
    * [`OutlinedInput`](/material-ui/api/outlined-input/) or [`Input`](/material-ui/api/input/)
    * component depending on the `variant` prop value.
+   * @deprecated Use `slotProps.input` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   InputProps: PropTypes.object,
   meta: PropTypes.shape({
diff --git a/docs/translations/api-docs/text-field/text-field.json b/docs/translations/api-docs/text-field/text-field.json
index 0b78d9bd65f5f7..66a06376e0e8be 100644
--- a/docs/translations/api-docs/text-field/text-field.json
+++ b/docs/translations/api-docs/text-field/text-field.json
@@ -70,6 +70,8 @@
       "description": "Props applied to the <a href=\"/material-ui/api/select/\"><code>Select</code></a> element."
     },
     "size": { "description": "The size of the component." },
+    "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."
     },
@@ -81,5 +83,12 @@
     },
     "variant": { "description": "The variant to use." }
   },
-  "classDescriptions": { "root": { "description": "Styles applied to the root element." } }
+  "classDescriptions": { "root": { "description": "Styles applied to the root element." } },
+  "slotDescriptions": {
+    "formHelperText": "The component that renders the helper text.",
+    "htmlInput": "The html input element.",
+    "input": "The component that renders the input.",
+    "inputLabel": "The component that renders the input&#39;s label.",
+    "select": "The component that renders the select."
+  }
 }
diff --git a/packages/mui-codemod/CONTRIBUTING.md b/packages/mui-codemod/CONTRIBUTING.md
index 89af440e5fef79..d726e169570627 100644
--- a/packages/mui-codemod/CONTRIBUTING.md
+++ b/packages/mui-codemod/CONTRIBUTING.md
@@ -13,6 +13,7 @@ The codemods for CSS files are based on [postcss](https://github.com/postcss/pos
 1. Create a new folder in `packages/mui-codemod/src/*/*` with the name of the codemod.
 2. The folder should include:
    - `<codemod>.js` - the transform implementation
+   - `index.js` - exports the transform function
    - `postcss-plugin.js` - the postcss plugin (optional)
    - `postcss.config.js` - the postcss config file (optional)
    - `<codemod>.test.js` - tests for the codemods (use jscodeshift from the `testUtils` folder)
diff --git a/packages/mui-codemod/README.md b/packages/mui-codemod/README.md
index 954cb42810be90..2d1c3cdf0345e5 100644
--- a/packages/mui-codemod/README.md
+++ b/packages/mui-codemod/README.md
@@ -1095,6 +1095,29 @@ npx @mui/codemod@next deprecations/pagination-item-props <path>
 npx @mui/codemod@next deprecations/slider-props <path>
 ```
 
+#### `text-field-props`
+
+```diff
+ <TextField
+-    InputProps={CustomInputProps}
+-    inputProps={CustomHtmlInputProps}
+-    SelectProps={CustomSelectProps}
+-    InputLabelProps={CustomInputLabelProps}
+-    FormHelperTextProps={CustomFormHelperProps}
++    slotProps={{
++        input: CustomInputProps
++        htmlInput: CustomHtmlInputProps
++        select: CustomSelectProps
++        inputLabel: CustomInputLabelProps
++        formHelper: CustomFormHelperProps
++    }}
+ />
+```
+
+```bash
+npx @mui/codemod@next deprecations/text-field-props <path>
+```
+
 #### `toggle-button-group-classes`
 
 JS transforms:
diff --git a/packages/mui-codemod/src/deprecations/all/deprecations-all.js b/packages/mui-codemod/src/deprecations/all/deprecations-all.js
index dc93b6af30b7fe..b061a6e09918c1 100644
--- a/packages/mui-codemod/src/deprecations/all/deprecations-all.js
+++ b/packages/mui-codemod/src/deprecations/all/deprecations-all.js
@@ -15,6 +15,7 @@ import transformBackdropProps from '../backdrop-props';
 import transformStepConnectorClasses from '../step-connector-classes';
 import transformCircularProgressClasses from '../circular-progress-classes';
 import transformSpeedDialProps from '../speed-dial-props';
+import transformTextFieldProps from '../text-field-props';
 
 /**
  * @param {import('jscodeshift').FileInfo} file
@@ -38,6 +39,7 @@ export default function deprecationsAll(file, api, options) {
   file.source = transformStepConnectorClasses(file, api, options);
   file.source = transformCircularProgressClasses(file, api, options);
   file.source = transformSpeedDialProps(file, api, options);
+  file.source = transformTextFieldProps(file, api, options);
 
   return file.source;
 }
diff --git a/packages/mui-codemod/src/deprecations/text-field-props/index.js b/packages/mui-codemod/src/deprecations/text-field-props/index.js
new file mode 100644
index 00000000000000..f9a4a593241e63
--- /dev/null
+++ b/packages/mui-codemod/src/deprecations/text-field-props/index.js
@@ -0,0 +1 @@
+export { default } from './text-field-props';
diff --git a/packages/mui-codemod/src/deprecations/text-field-props/test-cases/actual.js b/packages/mui-codemod/src/deprecations/text-field-props/test-cases/actual.js
new file mode 100644
index 00000000000000..d21f9e40dcb708
--- /dev/null
+++ b/packages/mui-codemod/src/deprecations/text-field-props/test-cases/actual.js
@@ -0,0 +1,24 @@
+import TextField from '@mui/material/TextField';
+import { TextField as MyTextField } from '@mui/material';
+
+<TextField
+  InputProps={CustomInputProps}
+  inputProps={CustomHtmlInputProps}
+  SelectProps={CustomSelectProps}
+  InputLabelProps={CustomInputLabelProps}
+  FormHelperTextProps={CustomFormHelperProps}
+/>;
+<MyTextField
+  InputProps={CustomInputProps}
+  inputProps={CustomHtmlInputProps}
+  SelectProps={CustomSelectProps}
+  InputLabelProps={CustomInputLabelProps}
+  FormHelperTextProps={CustomFormHelperProps}
+/>;
+<NonMuiTextField
+  InputProps={CustomInputProps}
+  inputProps={CustomHtmlInputProps}
+  SelectProps={CustomSelectProps}
+  InputLabelProps={CustomInputLabelProps}
+  FormHelperTextProps={CustomFormHelperProps}
+/>;
diff --git a/packages/mui-codemod/src/deprecations/text-field-props/test-cases/expected.js b/packages/mui-codemod/src/deprecations/text-field-props/test-cases/expected.js
new file mode 100644
index 00000000000000..f94175757fb31d
--- /dev/null
+++ b/packages/mui-codemod/src/deprecations/text-field-props/test-cases/expected.js
@@ -0,0 +1,26 @@
+import TextField from '@mui/material/TextField';
+import { TextField as MyTextField } from '@mui/material';
+
+<TextField
+  slotProps={{
+    input: CustomInputProps,
+    htmlInput: CustomHtmlInputProps,
+    select: CustomSelectProps,
+    inputLabel: CustomInputLabelProps,
+    formHelperText: CustomFormHelperProps
+  }} />;
+<MyTextField
+  slotProps={{
+    input: CustomInputProps,
+    htmlInput: CustomHtmlInputProps,
+    select: CustomSelectProps,
+    inputLabel: CustomInputLabelProps,
+    formHelperText: CustomFormHelperProps
+  }} />;
+<NonMuiTextField
+  InputProps={CustomInputProps}
+  inputProps={CustomHtmlInputProps}
+  SelectProps={CustomSelectProps}
+  InputLabelProps={CustomInputLabelProps}
+  FormHelperTextProps={CustomFormHelperProps}
+/>;
diff --git a/packages/mui-codemod/src/deprecations/text-field-props/test-cases/theme.actual.js b/packages/mui-codemod/src/deprecations/text-field-props/test-cases/theme.actual.js
new file mode 100644
index 00000000000000..b1cbc7125eaf9f
--- /dev/null
+++ b/packages/mui-codemod/src/deprecations/text-field-props/test-cases/theme.actual.js
@@ -0,0 +1,11 @@
+fn({
+  MuiTextField: {
+    defaultProps: {
+      InputProps: CustomInputProps,
+      inputProps: CustomHtmlInputProps,
+      SelectProps: CustomSelectProps,
+      InputLabelProps: CustomInputLabelProps,
+      FormHelperTextProps: CustomFormHelperProps
+    },
+  },
+});
diff --git a/packages/mui-codemod/src/deprecations/text-field-props/test-cases/theme.expected.js b/packages/mui-codemod/src/deprecations/text-field-props/test-cases/theme.expected.js
new file mode 100644
index 00000000000000..7d518995530fab
--- /dev/null
+++ b/packages/mui-codemod/src/deprecations/text-field-props/test-cases/theme.expected.js
@@ -0,0 +1,13 @@
+fn({
+  MuiTextField: {
+    defaultProps: {
+      slotProps: {
+        input: CustomInputProps,
+        htmlInput: CustomHtmlInputProps,
+        select: CustomSelectProps,
+        inputLabel: CustomInputLabelProps,
+        formHelperText: CustomFormHelperProps
+      }
+    },
+  },
+});
diff --git a/packages/mui-codemod/src/deprecations/text-field-props/text-field-props.js b/packages/mui-codemod/src/deprecations/text-field-props/text-field-props.js
new file mode 100644
index 00000000000000..3aba1be922a173
--- /dev/null
+++ b/packages/mui-codemod/src/deprecations/text-field-props/text-field-props.js
@@ -0,0 +1,48 @@
+import movePropIntoSlotProps from '../utils/movePropIntoSlotProps';
+
+/**
+ * @param {import('jscodeshift').FileInfo} file
+ * @param {import('jscodeshift').API} api
+ */
+export default function transformer(file, api, options) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+  const printOptions = options.printOptions;
+
+  movePropIntoSlotProps(j, {
+    root,
+    componentName: 'TextField',
+    propName: 'InputProps',
+    slotName: 'input',
+  });
+
+  movePropIntoSlotProps(j, {
+    root,
+    componentName: 'TextField',
+    propName: 'inputProps',
+    slotName: 'htmlInput',
+  });
+
+  movePropIntoSlotProps(j, {
+    root,
+    componentName: 'TextField',
+    propName: 'SelectProps',
+    slotName: 'select',
+  });
+
+  movePropIntoSlotProps(j, {
+    root,
+    componentName: 'TextField',
+    propName: 'InputLabelProps',
+    slotName: 'inputLabel',
+  });
+
+  movePropIntoSlotProps(j, {
+    root,
+    componentName: 'TextField',
+    propName: 'FormHelperTextProps',
+    slotName: 'formHelperText',
+  });
+
+  return root.toSource(printOptions);
+}
diff --git a/packages/mui-codemod/src/deprecations/text-field-props/text-field-props.test.js b/packages/mui-codemod/src/deprecations/text-field-props/text-field-props.test.js
new file mode 100644
index 00000000000000..f03c0197d8f0bc
--- /dev/null
+++ b/packages/mui-codemod/src/deprecations/text-field-props/text-field-props.test.js
@@ -0,0 +1,16 @@
+import { describeJscodeshiftTransform } from '../../../testUtils';
+import transform from './text-field-props';
+
+describe('@mui/codemod', () => {
+  describe('deprecations', () => {
+    describeJscodeshiftTransform({
+      transform,
+      transformName: 'text-field-props',
+      dirname: __dirname,
+      testCases: [
+        { actual: '/test-cases/actual.js', expected: '/test-cases/expected.js' },
+        { actual: '/test-cases/theme.actual.js', expected: '/test-cases/theme.expected.js' },
+      ],
+    });
+  });
+});
diff --git a/packages/mui-codemod/testUtils/index.js b/packages/mui-codemod/testUtils/index.js
index 038f57962c8576..771f9be3f7627f 100644
--- a/packages/mui-codemod/testUtils/index.js
+++ b/packages/mui-codemod/testUtils/index.js
@@ -1,4 +1,31 @@
-/* eslint-disable import/prefer-default-export */
+/* eslint-env mocha */
 import j from 'jscodeshift';
+import path from 'path';
+import { expect } from 'chai';
+import readFile from '../src/util/readFile';
 
 export const jscodeshift = j.withParser('tsx');
+
+function read(dirname, fileName) {
+  return readFile(path.join(dirname, fileName));
+}
+
+export function describeJscodeshiftTransform({ transformName, transform, testCases, dirname }) {
+  describe(transformName, () => {
+    testCases.forEach((testCase) => {
+      it('transforms as needed', () => {
+        const actual = transform({ source: read(dirname, testCase.actual) }, { jscodeshift }, {});
+
+        const expected = read(dirname, testCase.expected);
+        expect(actual).to.equal(expected, 'The transformed version should be correct');
+      });
+
+      it('should be idempotent', () => {
+        const actual = transform({ source: read(dirname, testCase.expected) }, { jscodeshift }, {});
+
+        const expected = read(dirname, testCase.expected);
+        expect(actual).to.equal(expected, 'The transformed version should be correct');
+      });
+    });
+  });
+}
diff --git a/packages/mui-material/src/FormHelperText/FormHelperText.js b/packages/mui-material/src/FormHelperText/FormHelperText.js
index e20bfe5649ca73..2a3a5fc7cbe5bc 100644
--- a/packages/mui-material/src/FormHelperText/FormHelperText.js
+++ b/packages/mui-material/src/FormHelperText/FormHelperText.js
@@ -111,15 +111,18 @@ const FormHelperText = React.forwardRef(function FormHelperText(inProps, ref) {
     required: fcs.required,
   };
 
+  // This issue explains why this is required: https://github.com/mui/material-ui/issues/42184
+  delete ownerState.ownerState;
+
   const classes = useUtilityClasses(ownerState);
 
   return (
     <FormHelperTextRoot
       as={component}
-      ownerState={ownerState}
       className={clsx(classes.root, className)}
       ref={ref}
       {...other}
+      ownerState={ownerState}
     >
       {children === ' ' ? (
         // notranslate needed while Google Translate will not fix zero-width space issue
diff --git a/packages/mui-material/src/InputBase/InputBase.js b/packages/mui-material/src/InputBase/InputBase.js
index 3be8ca90edafc8..dac171b0401af3 100644
--- a/packages/mui-material/src/InputBase/InputBase.js
+++ b/packages/mui-material/src/InputBase/InputBase.js
@@ -538,12 +538,12 @@ const InputBase = React.forwardRef(function InputBase(inProps, ref) {
       {!disableInjectingGlobalStyles && inputGlobalStyles}
       <Root
         {...rootProps}
-        {...(!isHostComponent(Root) && {
-          ownerState: { ...ownerState, ...rootProps.ownerState },
-        })}
         ref={ref}
         onClick={handleClick}
         {...other}
+        {...(!isHostComponent(Root) && {
+          ownerState: { ...ownerState, ...rootProps.ownerState },
+        })}
         className={clsx(
           classes.root,
           {
@@ -557,7 +557,6 @@ const InputBase = React.forwardRef(function InputBase(inProps, ref) {
         {startAdornment}
         <FormControlContext.Provider value={null}>
           <Input
-            ownerState={ownerState}
             aria-invalid={fcs.error}
             aria-describedby={ariaDescribedby}
             autoComplete={autoComplete}
diff --git a/packages/mui-material/src/InputLabel/InputLabel.js b/packages/mui-material/src/InputLabel/InputLabel.js
index b47991c21fa676..8e6665c0edbced 100644
--- a/packages/mui-material/src/InputLabel/InputLabel.js
+++ b/packages/mui-material/src/InputLabel/InputLabel.js
@@ -211,10 +211,10 @@ const InputLabel = React.forwardRef(function InputLabel(inProps, ref) {
   return (
     <InputLabelRoot
       data-shrink={shrink}
-      ownerState={ownerState}
       ref={ref}
       className={clsx(classes.root, className)}
       {...other}
+      ownerState={ownerState}
       classes={classes}
     />
   );
diff --git a/packages/mui-material/src/Select/SelectInput.js b/packages/mui-material/src/Select/SelectInput.js
index 944a7e29759277..3d6dc7ebe9b3da 100644
--- a/packages/mui-material/src/Select/SelectInput.js
+++ b/packages/mui-material/src/Select/SelectInput.js
@@ -531,8 +531,8 @@ const SelectInput = React.forwardRef(function SelectInput(props, ref) {
         disabled={disabled}
         className={classes.nativeInput}
         autoFocus={autoFocus}
-        ownerState={ownerState}
         {...other}
+        ownerState={ownerState}
       />
       <SelectIcon as={IconComponent} className={classes.icon} ownerState={ownerState} />
       <Menu
diff --git a/packages/mui-material/src/TextField/TextField.d.ts b/packages/mui-material/src/TextField/TextField.d.ts
index 727ab3094d32e1..84c910a3e11599 100644
--- a/packages/mui-material/src/TextField/TextField.d.ts
+++ b/packages/mui-material/src/TextField/TextField.d.ts
@@ -12,10 +12,50 @@ import { InputLabelProps } from '../InputLabel';
 import { SelectProps } from '../Select';
 import { Theme } from '../styles';
 import { TextFieldClasses } from './textFieldClasses';
+import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types';
 
 export interface TextFieldPropsColorOverrides {}
 export interface TextFieldPropsSizeOverrides {}
 
+export interface TextFieldSlots {
+  /**
+   * The component that renders the input.
+   * @default OutlinedInput
+   */
+  input?: React.ElementType;
+  /**
+   * The component that renders the input's label.
+   * @default InputLabel
+   */
+  inputLabel?: React.ElementType;
+  /**
+   * The html input element.
+   * @default 'input'
+   */
+  htmlInput?: React.ElementType;
+  /**
+   * The component that renders the helper text.
+   * @default FormHelperText
+   */
+  formHelperText?: React.ElementType;
+  /**
+   * The component that renders the select.
+   * @default Select
+   */
+  select?: React.ElementType;
+}
+
+export type TextFieldSlotsAndSlotProps<InputPropsType> = CreateSlotsAndSlotProps<
+  TextFieldSlots,
+  {
+    input: SlotProps<React.ElementType<InputPropsType>, {}, TextFieldOwnerState>;
+    inputLabel: SlotProps<React.ElementType<InputLabelProps>, {}, TextFieldOwnerState>;
+    htmlInput: SlotProps<React.ElementType<InputBaseProps['inputProps']>, {}, TextFieldOwnerState>;
+    formHelperText: SlotProps<React.ElementType<FormHelperTextProps>, {}, TextFieldOwnerState>;
+    select: SlotProps<React.ElementType<SelectProps>, {}, TextFieldOwnerState>;
+  }
+>;
+
 export interface BaseTextFieldProps
   extends StandardProps<
     FormControlProps,
@@ -67,6 +107,7 @@ export interface BaseTextFieldProps
   error?: boolean;
   /**
    * Props applied to the [`FormHelperText`](/material-ui/api/form-helper-text/) element.
+   * @deprecated Use `slotProps.formHelperText` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   FormHelperTextProps?: Partial<FormHelperTextProps>;
   /**
@@ -86,10 +127,12 @@ export interface BaseTextFieldProps
   /**
    * Props applied to the [`InputLabel`](/material-ui/api/input-label/) element.
    * Pointer events like `onClick` are enabled if and only if `shrink` is `true`.
+   * @deprecated Use `slotProps.inputLabel` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   InputLabelProps?: Partial<InputLabelProps>;
   /**
    * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element.
+   * @deprecated Use `slotProps.htmlInput` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   inputProps?: InputBaseProps['inputProps'];
   /**
@@ -140,6 +183,7 @@ export interface BaseTextFieldProps
   select?: boolean;
   /**
    * Props applied to the [`Select`](/material-ui/api/select/) element.
+   * @deprecated Use `slotProps.select` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   SelectProps?: Partial<SelectProps>;
   /**
@@ -160,7 +204,9 @@ export interface BaseTextFieldProps
   value?: unknown;
 }
 
-export interface StandardTextFieldProps extends BaseTextFieldProps {
+export interface StandardTextFieldProps
+  extends BaseTextFieldProps,
+    TextFieldSlotsAndSlotProps<StandardInputProps> {
   /**
    * Callback fired when the value is changed.
    *
@@ -178,11 +224,14 @@ export interface StandardTextFieldProps extends BaseTextFieldProps {
    * It will be a [`FilledInput`](/material-ui/api/filled-input/),
    * [`OutlinedInput`](/material-ui/api/outlined-input/) or [`Input`](/material-ui/api/input/)
    * component depending on the `variant` prop value.
+   * @deprecated Use `slotProps.input` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   InputProps?: Partial<StandardInputProps>;
 }
 
-export interface FilledTextFieldProps extends BaseTextFieldProps {
+export interface FilledTextFieldProps
+  extends BaseTextFieldProps,
+    TextFieldSlotsAndSlotProps<FilledInputProps> {
   /**
    * Callback fired when the value is changed.
    *
@@ -200,11 +249,14 @@ export interface FilledTextFieldProps extends BaseTextFieldProps {
    * It will be a [`FilledInput`](/material-ui/api/filled-input/),
    * [`OutlinedInput`](/material-ui/api/outlined-input/) or [`Input`](/material-ui/api/input/)
    * component depending on the `variant` prop value.
+   * @deprecated Use `slotProps.input` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   InputProps?: Partial<FilledInputProps>;
 }
 
-export interface OutlinedTextFieldProps extends BaseTextFieldProps {
+export interface OutlinedTextFieldProps
+  extends BaseTextFieldProps,
+    TextFieldSlotsAndSlotProps<OutlinedInputProps> {
   /**
    * Callback fired when the value is changed.
    *
@@ -222,6 +274,7 @@ export interface OutlinedTextFieldProps extends BaseTextFieldProps {
    * It will be a [`FilledInput`](/material-ui/api/filled-input/),
    * [`OutlinedInput`](/material-ui/api/outlined-input/) or [`Input`](/material-ui/api/input/)
    * component depending on the `variant` prop value.
+   * @deprecated Use `slotProps.input` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   InputProps?: Partial<OutlinedInputProps>;
 }
@@ -235,6 +288,8 @@ export type TextFieldProps<Variant extends TextFieldVariants = TextFieldVariants
       ? StandardTextFieldProps
       : OutlinedTextFieldProps;
 
+export type TextFieldOwnerState = BaseTextFieldProps;
+
 /**
  * The `TextField` is a convenience wrapper for the most common cases (80%).
  * It cannot be all things to all people, otherwise the API would grow out of control.
diff --git a/packages/mui-material/src/TextField/TextField.js b/packages/mui-material/src/TextField/TextField.js
index 244861c33cd277..6f0c0d14c0cade 100644
--- a/packages/mui-material/src/TextField/TextField.js
+++ b/packages/mui-material/src/TextField/TextField.js
@@ -14,6 +14,7 @@ import FormControl from '../FormControl';
 import FormHelperText from '../FormHelperText';
 import Select from '../Select';
 import { getTextFieldUtilityClass } from './textFieldClasses';
+import useSlot from '../utils/useSlot';
 
 const useThemeProps = createUseThemeProps('MuiTextField');
 
@@ -82,13 +83,13 @@ const TextField = React.forwardRef(function TextField(inProps, ref) {
     defaultValue,
     disabled = false,
     error = false,
-    FormHelperTextProps,
+    FormHelperTextProps: FormHelperTextPropsProp,
     fullWidth = false,
     helperText,
     id: idOverride,
-    InputLabelProps,
-    inputProps,
-    InputProps,
+    InputLabelProps: InputLabelPropsProp,
+    inputProps: inputPropsProp,
+    InputProps: InputPropsProp,
     inputRef,
     label,
     maxRows,
@@ -102,7 +103,9 @@ const TextField = React.forwardRef(function TextField(inProps, ref) {
     required = false,
     rows,
     select = false,
-    SelectProps,
+    SelectProps: SelectPropsProp,
+    slots = {},
+    slotProps = {},
     type,
     value,
     variant = 'outlined',
@@ -132,28 +135,73 @@ const TextField = React.forwardRef(function TextField(inProps, ref) {
     }
   }
 
-  const InputMore = {};
+  const id = useId(idOverride);
+  const helperTextId = helperText && id ? `${id}-helper-text` : undefined;
+  const inputLabelId = label && id ? `${id}-label` : undefined;
+  const InputComponent = variantComponent[variant];
+
+  const externalForwardedProps = {
+    slots,
+    slotProps: {
+      input: InputPropsProp,
+      inputLabel: InputLabelPropsProp,
+      htmlInput: inputPropsProp,
+      formHelperText: FormHelperTextPropsProp,
+      select: SelectPropsProp,
+      ...slotProps,
+    },
+  };
+
+  const inputAdditionalProps = {};
+  const inputLabelSlotProps = externalForwardedProps.slotProps.inputLabel;
 
   if (variant === 'outlined') {
-    if (InputLabelProps && typeof InputLabelProps.shrink !== 'undefined') {
-      InputMore.notched = InputLabelProps.shrink;
+    if (inputLabelSlotProps && typeof inputLabelSlotProps.shrink !== 'undefined') {
+      inputAdditionalProps.notched = inputLabelSlotProps.shrink;
     }
-    InputMore.label = label;
+    inputAdditionalProps.label = label;
   }
   if (select) {
     // unset defaults from textbox inputs
-    if (!SelectProps || !SelectProps.native) {
-      InputMore.id = undefined;
+    if (!SelectPropsProp || !SelectPropsProp.native) {
+      inputAdditionalProps.id = undefined;
     }
-    InputMore['aria-describedby'] = undefined;
+    inputAdditionalProps['aria-describedby'] = undefined;
   }
 
-  const id = useId(idOverride);
-  const helperTextId = helperText && id ? `${id}-helper-text` : undefined;
-  const inputLabelId = label && id ? `${id}-label` : undefined;
-  const InputComponent = variantComponent[variant];
+  const [InputSlot, inputProps] = useSlot('input', {
+    elementType: InputComponent,
+    externalForwardedProps,
+    additionalProps: inputAdditionalProps,
+    ownerState,
+  });
+
+  const [InputLabelSlot, inputLabelProps] = useSlot('inputLabel', {
+    elementType: InputLabel,
+    externalForwardedProps,
+    ownerState,
+  });
+
+  const [HtmlInputSlot, htmlInputProps] = useSlot('htmlInput', {
+    elementType: 'input',
+    externalForwardedProps,
+    ownerState,
+  });
+
+  const [FormHelperTextSlot, formHelperTextProps] = useSlot('formHelperText', {
+    elementType: FormHelperText,
+    externalForwardedProps,
+    ownerState,
+  });
+
+  const [SelectSlot, selectProps] = useSlot('select', {
+    elementType: Select,
+    externalForwardedProps,
+    ownerState,
+  });
+
   const InputElement = (
-    <InputComponent
+    <InputSlot
       aria-describedby={helperTextId}
       autoComplete={autoComplete}
       autoFocus={autoFocus}
@@ -172,9 +220,11 @@ const TextField = React.forwardRef(function TextField(inProps, ref) {
       onChange={onChange}
       onFocus={onFocus}
       placeholder={placeholder}
-      inputProps={inputProps}
-      {...InputMore}
-      {...InputProps}
+      inputProps={htmlInputProps}
+      slots={{
+        input: slots.htmlInput ? HtmlInputSlot : undefined,
+      }}
+      {...inputProps}
     />
   );
 
@@ -192,30 +242,30 @@ const TextField = React.forwardRef(function TextField(inProps, ref) {
       {...other}
     >
       {label != null && label !== '' && (
-        <InputLabel htmlFor={id} id={inputLabelId} {...InputLabelProps}>
+        <InputLabelSlot htmlFor={id} id={inputLabelId} {...inputLabelProps}>
           {label}
-        </InputLabel>
+        </InputLabelSlot>
       )}
 
       {select ? (
-        <Select
+        <SelectSlot
           aria-describedby={helperTextId}
           id={id}
           labelId={inputLabelId}
           value={value}
           input={InputElement}
-          {...SelectProps}
+          {...selectProps}
         >
           {children}
-        </Select>
+        </SelectSlot>
       ) : (
         InputElement
       )}
 
       {helperText && (
-        <FormHelperText id={helperTextId} {...FormHelperTextProps}>
+        <FormHelperTextSlot id={helperTextId} {...formHelperTextProps}>
           {helperText}
-        </FormHelperText>
+        </FormHelperTextSlot>
       )}
     </TextFieldRoot>
   );
@@ -275,6 +325,7 @@ TextField.propTypes /* remove-proptypes */ = {
   error: PropTypes.bool,
   /**
    * Props applied to the [`FormHelperText`](/material-ui/api/form-helper-text/) element.
+   * @deprecated Use `slotProps.formHelperText` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   FormHelperTextProps: PropTypes.object,
   /**
@@ -294,10 +345,12 @@ TextField.propTypes /* remove-proptypes */ = {
   /**
    * Props applied to the [`InputLabel`](/material-ui/api/input-label/) element.
    * Pointer events like `onClick` are enabled if and only if `shrink` is `true`.
+   * @deprecated Use `slotProps.inputLabel` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   InputLabelProps: PropTypes.object,
   /**
    * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element.
+   * @deprecated Use `slotProps.htmlInput` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   inputProps: PropTypes.object,
   /**
@@ -305,6 +358,7 @@ TextField.propTypes /* remove-proptypes */ = {
    * It will be a [`FilledInput`](/material-ui/api/filled-input/),
    * [`OutlinedInput`](/material-ui/api/outlined-input/) or [`Input`](/material-ui/api/input/)
    * component depending on the `variant` prop value.
+   * @deprecated Use `slotProps.input` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   InputProps: PropTypes.object,
   /**
@@ -373,6 +427,7 @@ TextField.propTypes /* remove-proptypes */ = {
   select: PropTypes.bool,
   /**
    * Props applied to the [`Select`](/material-ui/api/select/) element.
+   * @deprecated Use `slotProps.select` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   SelectProps: PropTypes.object,
   /**
@@ -382,6 +437,28 @@ TextField.propTypes /* remove-proptypes */ = {
     PropTypes.oneOf(['medium', 'small']),
     PropTypes.string,
   ]),
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  slotProps: PropTypes /* @typescript-to-proptypes-ignore */.shape({
+    formHelperText: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    htmlInput: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    input: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    inputLabel: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    select: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+  }),
+  /**
+   * The components used for each slot inside.
+   * @default {}
+   */
+  slots: PropTypes.shape({
+    formHelperText: PropTypes.elementType,
+    htmlInput: PropTypes.elementType,
+    input: PropTypes.elementType,
+    inputLabel: PropTypes.elementType,
+    select: PropTypes.elementType,
+  }),
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
diff --git a/packages/mui-material/src/TextField/TextField.test.js b/packages/mui-material/src/TextField/TextField.test.js
index ee77edc66b116b..2d14112c3ddbff 100644
--- a/packages/mui-material/src/TextField/TextField.test.js
+++ b/packages/mui-material/src/TextField/TextField.test.js
@@ -12,15 +12,57 @@ import describeConformance from '../../test/describeConformance';
 describe('<TextField />', () => {
   const { render } = createRenderer();
 
-  describeConformance(<TextField variant="standard" />, () => ({
-    classes,
-    inheritComponent: FormControl,
-    render,
-    muiName: 'MuiTextField',
-    refInstanceof: window.HTMLDivElement,
-    testVariantProps: { variant: 'outlined' },
-    skip: ['componentProp', 'componentsProp'],
-  }));
+  function TestComponent(props) {
+    const { children, className, 'data-testid': testId } = props;
+    return (
+      <div className={className} data-testid={testId ?? 'custom'}>
+        {typeof children === 'function' ? children({}) : children}
+      </div>
+    );
+  }
+
+  describeConformance(
+    <TextField variant="standard" helperText="Helper text" label="Label" />,
+    () => ({
+      classes,
+      inheritComponent: FormControl,
+      render,
+      muiName: 'MuiTextField',
+      refInstanceof: window.HTMLDivElement,
+      testVariantProps: { variant: 'outlined' },
+      slots: {
+        input: {
+          testWithComponent: TestComponent,
+          testWithElement: null,
+        },
+        inputLabel: {},
+        htmlInput: {
+          testWithElement: 'input',
+        },
+        formHelperText: {},
+      },
+      skip: ['componentProp', 'componentsProp'],
+    }),
+  );
+
+  describeConformance(
+    <TextField select>
+      <option>A</option>
+    </TextField>,
+    () => ({
+      classes,
+      inheritComponent: FormControl,
+      render,
+      muiName: 'MuiTextField',
+      slots: {
+        select: {
+          testWithComponent: TestComponent,
+          testWithElement: null,
+        },
+      },
+      only: ['slotsProp', 'slotPropsProp', 'slotPropsCallback'],
+    }),
+  );
 
   describe('structure', () => {
     it('should have an input as the only child', () => {
@@ -248,4 +290,12 @@ describe('<TextField />', () => {
       expect(handleClick.returned(root)).to.equal(true);
     });
   });
+
+  describe('prop: inputProps', () => {
+    it('should apply additional props to the input element', () => {
+      const { getByRole } = render(<TextField inputProps={{ 'data-testid': 'input-element' }} />);
+
+      expect(getByRole('textbox')).to.have.attribute('data-testid', 'input-element');
+    });
+  });
 });