From 1cded850d1998d3b6d0ac7d9c860c43d4af55f5b Mon Sep 17 00:00:00 2001
From: Albert Yu <albert@albertyu.co>
Date: Thu, 12 Mar 2026 22:49:26 +0800
Subject: [PATCH 1/6] Use non-native label for TextField.select

---
 packages/mui-material/src/Input/Input.js      |  3 +-
 .../mui-material/src/Select/SelectInput.js    |  2 +
 .../mui-material/src/TextField/TextField.js   | 23 +++++---
 .../src/TextField/TextField.test.js           | 59 ++++++++++++++++++-
 4 files changed, 76 insertions(+), 11 deletions(-)

diff --git a/packages/mui-material/src/Input/Input.js b/packages/mui-material/src/Input/Input.js
index 3839679f3c1321..6091df22b6b1cb 100644
--- a/packages/mui-material/src/Input/Input.js
+++ b/packages/mui-material/src/Input/Input.js
@@ -10,6 +10,7 @@ import { styled } from '../zero-styled';
 import memoTheme from '../utils/memoTheme';
 import createSimplePaletteValueFilter from '../utils/createSimplePaletteValueFilter';
 import { useDefaultProps } from '../DefaultPropsProvider';
+import inputLabelClasses from '../InputLabel/inputLabelClasses';
 import inputClasses, { getInputUtilityClass } from './inputClasses';
 import {
   rootOverridesResolver as inputBaseRootOverridesResolver,
@@ -62,7 +63,7 @@ const InputRoot = styled(InputBaseRoot, {
         {
           props: ({ ownerState }) => ownerState.formControl,
           style: {
-            'label + &': {
+            [`.${inputLabelClasses.root} + &`]: {
               marginTop: 16,
             },
           },
diff --git a/packages/mui-material/src/Select/SelectInput.js b/packages/mui-material/src/Select/SelectInput.js
index f3265fba214764..c0128c13a904ec 100644
--- a/packages/mui-material/src/Select/SelectInput.js
+++ b/packages/mui-material/src/Select/SelectInput.js
@@ -524,6 +524,7 @@ const SelectInput = React.forwardRef(function SelectInput(props, ref) {
   };
 
   const listboxId = useId();
+  const nativeInputId = useId();
 
   return (
     <React.Fragment>
@@ -574,6 +575,7 @@ const SelectInput = React.forwardRef(function SelectInput(props, ref) {
         autoFocus={autoFocus}
         required={required}
         {...other}
+        id={other.id ?? nativeInputId}
         ownerState={ownerState}
       />
       <SelectIcon as={IconComponent} className={classes.icon} ownerState={ownerState} />
diff --git a/packages/mui-material/src/TextField/TextField.js b/packages/mui-material/src/TextField/TextField.js
index 6992ae1f9cb042..889d824b24dc5e 100644
--- a/packages/mui-material/src/TextField/TextField.js
+++ b/packages/mui-material/src/TextField/TextField.js
@@ -140,6 +140,14 @@ const TextField = React.forwardRef(function TextField(inProps, ref) {
     slotProps,
   };
 
+  const [SelectSlot, selectProps] = useSlot('select', {
+    elementType: Select,
+    externalForwardedProps,
+    ownerState,
+  });
+
+  const nativeSelect = select && selectProps.native;
+
   const inputAdditionalProps = {};
   const inputLabelSlotProps = externalForwardedProps.slotProps.inputLabel;
 
@@ -151,7 +159,7 @@ const TextField = React.forwardRef(function TextField(inProps, ref) {
   }
   if (select) {
     // unset defaults from textbox inputs
-    if (!slotProps.select || !slotProps.select.native) {
+    if (!nativeSelect) {
       inputAdditionalProps.id = undefined;
     }
     inputAdditionalProps['aria-describedby'] = undefined;
@@ -202,12 +210,6 @@ const TextField = React.forwardRef(function TextField(inProps, ref) {
     ownerState,
   });
 
-  const [SelectSlot, selectProps] = useSlot('select', {
-    elementType: Select,
-    externalForwardedProps,
-    ownerState,
-  });
-
   const InputElement = (
     <InputSlot
       aria-describedby={helperTextId}
@@ -239,7 +241,12 @@ const TextField = React.forwardRef(function TextField(inProps, ref) {
   return (
     <RootSlot {...rootProps}>
       {label != null && label !== '' && (
-        <InputLabelSlot htmlFor={id} id={inputLabelId} {...inputLabelProps}>
+        <InputLabelSlot
+          htmlFor={select && !nativeSelect ? undefined : id}
+          id={inputLabelId}
+          {...(select && !nativeSelect && { component: 'div' })}
+          {...inputLabelProps}
+        >
           {label}
         </InputLabelSlot>
       )}
diff --git a/packages/mui-material/src/TextField/TextField.test.js b/packages/mui-material/src/TextField/TextField.test.js
index 4d65cd07b1c95b..89eee88180ec69 100644
--- a/packages/mui-material/src/TextField/TextField.test.js
+++ b/packages/mui-material/src/TextField/TextField.test.js
@@ -283,7 +283,62 @@ describe('<TextField />', () => {
       expect(screen.getByRole('combobox')).toHaveAccessibleName('Release:');
     });
 
-    it('creates an input[hidden] that has no accessible properties', () => {
+    it('renders the label as a <div> without htmlFor when select', () => {
+      render(
+        <TextField select label="Release" value="stable" variant="standard">
+          <MenuItem value="stable">Stable</MenuItem>
+        </TextField>,
+      );
+
+      const labelElement = screen.getByText('Release');
+      expect(labelElement.tagName).to.equal('DIV');
+      expect(labelElement).not.to.have.attribute('for');
+
+      const combobox = screen.getByRole('combobox');
+      expect(combobox).to.have.attribute('aria-labelledby');
+      expect(combobox.getAttribute('aria-labelledby')).to.include(labelElement.id);
+    });
+
+    it('renders the label as a <div> when native is set via slotProps', () => {
+      render(
+        <TextField
+          select
+          label="Release"
+          value="stable"
+          variant="standard"
+          slotProps={{ select: { native: false } }}
+        >
+          <MenuItem value="stable">Stable</MenuItem>
+        </TextField>,
+      );
+
+      const labelElement = screen.getByText('Release');
+      expect(labelElement.tagName).to.equal('DIV');
+      expect(labelElement).not.to.have.attribute('for');
+
+      const combobox = screen.getByRole('combobox');
+      expect(combobox.getAttribute('aria-labelledby')).to.include(labelElement.id);
+    });
+
+    it('renders the label as a <label> with htmlFor for native select via slotProps', () => {
+      render(
+        <TextField
+          select
+          label="Release"
+          value="stable"
+          variant="standard"
+          slotProps={{ select: { native: true } }}
+        >
+          <option value="stable">Stable</option>
+        </TextField>,
+      );
+
+      const labelElement = screen.getByText('Release');
+      expect(labelElement.tagName).to.equal('LABEL');
+      expect(labelElement).to.have.attribute('for');
+    });
+
+    it('creates an input[hidden] that has no accessible properties besides id', () => {
       const { container } = render(
         <TextField select label="Release: " value="stable" variant="standard">
           <MenuItem value="stable">Stable</MenuItem>
@@ -291,7 +346,7 @@ describe('<TextField />', () => {
       );
 
       const input = container.querySelector('input[aria-hidden]');
-      expect(input).not.to.have.attribute('id');
+      expect(input).to.have.attribute('id');
       expect(input).not.to.have.attribute('aria-describedby');
     });
 

From 70c998154438459b186f3215116ff18ec5f6e3d2 Mon Sep 17 00:00:00 2001
From: Albert Yu <albert@albertyu.co>
Date: Fri, 13 Mar 2026 13:33:45 +0800
Subject: [PATCH 2/6] fix CSS selector

---
 packages/mui-material/src/Input/Input.js | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/mui-material/src/Input/Input.js b/packages/mui-material/src/Input/Input.js
index 6091df22b6b1cb..983c9c864d78d6 100644
--- a/packages/mui-material/src/Input/Input.js
+++ b/packages/mui-material/src/Input/Input.js
@@ -63,9 +63,10 @@ const InputRoot = styled(InputBaseRoot, {
         {
           props: ({ ownerState }) => ownerState.formControl,
           style: {
-            [`.${inputLabelClasses.root} + &`]: {
-              marginTop: 16,
-            },
+            [`label + &, :where(.${inputLabelClasses.root}) + &, div:where(.${inputLabelClasses.root}) + &`]:
+              {
+                marginTop: 16,
+              },
           },
         },
         {

From 215c53e8a4493236a870dfdfdc2f34030130554a Mon Sep 17 00:00:00 2001
From: Albert Yu <albert@albertyu.co>
Date: Wed, 18 Mar 2026 19:17:17 +0800
Subject: [PATCH 3/6] drop where

---
 packages/mui-material/src/Input/Input.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/mui-material/src/Input/Input.js b/packages/mui-material/src/Input/Input.js
index 983c9c864d78d6..98a14c1ec118f1 100644
--- a/packages/mui-material/src/Input/Input.js
+++ b/packages/mui-material/src/Input/Input.js
@@ -63,7 +63,7 @@ const InputRoot = styled(InputBaseRoot, {
         {
           props: ({ ownerState }) => ownerState.formControl,
           style: {
-            [`label + &, :where(.${inputLabelClasses.root}) + &, div:where(.${inputLabelClasses.root}) + &`]:
+            [`label + &, .${inputLabelClasses.root} + &`]:
               {
                 marginTop: 16,
               },

From bb65493a92b6b66396ac15bb80abfbff331dca24 Mon Sep 17 00:00:00 2001
From: Albert Yu <albert@albertyu.co>
Date: Wed, 18 Mar 2026 19:27:48 +0800
Subject: [PATCH 4/6] add docs

---
 docs/data/material/migration/upgrade-to-v9/upgrade-to-v9.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/docs/data/material/migration/upgrade-to-v9/upgrade-to-v9.md b/docs/data/material/migration/upgrade-to-v9/upgrade-to-v9.md
index 9bf6c248b1e774..13ace8a3766827 100644
--- a/docs/data/material/migration/upgrade-to-v9/upgrade-to-v9.md
+++ b/docs/data/material/migration/upgrade-to-v9/upgrade-to-v9.md
@@ -187,6 +187,10 @@ const theme = createTheme(
 );
 ```
 
+### TextField
+
+When using the `select` prop to render a `<Select>` with `<TextField>`, the underlying `<InputLabel>` renders a `<div>` instead of a native `<label>` element. This does not affect `<InputLabel>` on its own.
+
 ### Theme
 
 `MuiTouchRipple` has been removed from the theme `components` types (`ComponentsProps`, `ComponentsOverrides`, and `ComponentsVariants`).

From 46365d703fdd321d5adfebac0fe7416109cb13c5 Mon Sep 17 00:00:00 2001
From: Albert Yu <albert@albertyu.co>
Date: Wed, 18 Mar 2026 19:30:52 +0800
Subject: [PATCH 5/6] prettier

---
 packages/mui-material/src/Input/Input.js | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/packages/mui-material/src/Input/Input.js b/packages/mui-material/src/Input/Input.js
index 98a14c1ec118f1..df2a8179d91c81 100644
--- a/packages/mui-material/src/Input/Input.js
+++ b/packages/mui-material/src/Input/Input.js
@@ -63,10 +63,9 @@ const InputRoot = styled(InputBaseRoot, {
         {
           props: ({ ownerState }) => ownerState.formControl,
           style: {
-            [`label + &, .${inputLabelClasses.root} + &`]:
-              {
-                marginTop: 16,
-              },
+            [`label + &, .${inputLabelClasses.root} + &`]: {
+              marginTop: 16,
+            },
           },
         },
         {

From b14eeea06b4832f5ed7d397fd3d4a71c806f9f73 Mon Sep 17 00:00:00 2001
From: Albert Yu <albert@albertyu.co>
Date: Thu, 19 Mar 2026 15:20:47 +0800
Subject: [PATCH 6/6] tweak doc

---
 docs/data/material/migration/upgrade-to-v9/upgrade-to-v9.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/data/material/migration/upgrade-to-v9/upgrade-to-v9.md b/docs/data/material/migration/upgrade-to-v9/upgrade-to-v9.md
index 13ace8a3766827..ea02e3458a5750 100644
--- a/docs/data/material/migration/upgrade-to-v9/upgrade-to-v9.md
+++ b/docs/data/material/migration/upgrade-to-v9/upgrade-to-v9.md
@@ -189,7 +189,7 @@ const theme = createTheme(
 
 ### TextField
 
-When using the `select` prop to render a `<Select>` with `<TextField>`, the underlying `<InputLabel>` renders a `<div>` instead of a native `<label>` element. This does not affect `<InputLabel>` on its own.
+When specifying `<TextField select />` to render a `<Select>`, the underlying `<InputLabel>` renders a `<div>` instead of a native `<label>` element. This does not affect `<InputLabel>` on its own.
 
 ### Theme