diff --git a/.gitignore b/.gitignore
index 9af505a5ed3c2c..9eff13488417df 100644
--- a/.gitignore
+++ b/.gitignore
@@ -47,6 +47,7 @@ screenshots
 packed
 test-results
 .env
+.claude/worktrees
 
 # typescript
 *.tsbuildinfo
diff --git a/docs/data/material/components/accordion/AccordionExpandDefault.js b/docs/data/material/components/accordion/AccordionExpandDefault.js
index 1365ba63a3fc86..c045b66a3ed68d 100644
--- a/docs/data/material/components/accordion/AccordionExpandDefault.js
+++ b/docs/data/material/components/accordion/AccordionExpandDefault.js
@@ -1,3 +1,4 @@
+import * as React from 'react';
 import Accordion from '@mui/material/Accordion';
 import AccordionSummary from '@mui/material/AccordionSummary';
 import AccordionDetails from '@mui/material/AccordionDetails';
@@ -5,13 +6,14 @@ import Typography from '@mui/material/Typography';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 
 export default function AccordionExpandDefault() {
+  const id = React.useId();
   return (
     <div>
       <Accordion defaultExpanded>
         <AccordionSummary
           expandIcon={<ExpandMoreIcon />}
-          aria-controls="panel1-content"
-          id="panel1-header"
+          aria-controls={`${id}-panel1-content`}
+          id={`${id}-panel1-header`}
         >
           <Typography component="span">Expanded by default</Typography>
         </AccordionSummary>
@@ -25,8 +27,8 @@ export default function AccordionExpandDefault() {
       <Accordion>
         <AccordionSummary
           expandIcon={<ExpandMoreIcon />}
-          aria-controls="panel2-content"
-          id="panel2-header"
+          aria-controls={`${id}-panel2-content`}
+          id={`${id}-panel2-header`}
         >
           <Typography component="span">Header</Typography>
         </AccordionSummary>
diff --git a/docs/data/material/components/accordion/AccordionExpandDefault.tsx b/docs/data/material/components/accordion/AccordionExpandDefault.tsx
index 1365ba63a3fc86..c045b66a3ed68d 100644
--- a/docs/data/material/components/accordion/AccordionExpandDefault.tsx
+++ b/docs/data/material/components/accordion/AccordionExpandDefault.tsx
@@ -1,3 +1,4 @@
+import * as React from 'react';
 import Accordion from '@mui/material/Accordion';
 import AccordionSummary from '@mui/material/AccordionSummary';
 import AccordionDetails from '@mui/material/AccordionDetails';
@@ -5,13 +6,14 @@ import Typography from '@mui/material/Typography';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 
 export default function AccordionExpandDefault() {
+  const id = React.useId();
   return (
     <div>
       <Accordion defaultExpanded>
         <AccordionSummary
           expandIcon={<ExpandMoreIcon />}
-          aria-controls="panel1-content"
-          id="panel1-header"
+          aria-controls={`${id}-panel1-content`}
+          id={`${id}-panel1-header`}
         >
           <Typography component="span">Expanded by default</Typography>
         </AccordionSummary>
@@ -25,8 +27,8 @@ export default function AccordionExpandDefault() {
       <Accordion>
         <AccordionSummary
           expandIcon={<ExpandMoreIcon />}
-          aria-controls="panel2-content"
-          id="panel2-header"
+          aria-controls={`${id}-panel2-content`}
+          id={`${id}-panel2-header`}
         >
           <Typography component="span">Header</Typography>
         </AccordionSummary>
diff --git a/docs/data/material/components/accordion/AccordionExpandIcon.js b/docs/data/material/components/accordion/AccordionExpandIcon.js
index b9cc822bf50327..459816b921a056 100644
--- a/docs/data/material/components/accordion/AccordionExpandIcon.js
+++ b/docs/data/material/components/accordion/AccordionExpandIcon.js
@@ -1,3 +1,4 @@
+import * as React from 'react';
 import Accordion from '@mui/material/Accordion';
 import AccordionSummary from '@mui/material/AccordionSummary';
 import AccordionDetails from '@mui/material/AccordionDetails';
@@ -6,13 +7,14 @@ import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';
 import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
 
 export default function AccordionExpandIcon() {
+  const id = React.useId();
   return (
     <div>
       <Accordion>
         <AccordionSummary
           expandIcon={<ArrowDownwardIcon />}
-          aria-controls="panel1-content"
-          id="panel1-header"
+          aria-controls={`${id}-panel1-content`}
+          id={`${id}-panel1-header`}
         >
           <Typography component="span">Accordion 1</Typography>
         </AccordionSummary>
@@ -26,8 +28,8 @@ export default function AccordionExpandIcon() {
       <Accordion>
         <AccordionSummary
           expandIcon={<ArrowDropDownIcon />}
-          aria-controls="panel2-content"
-          id="panel2-header"
+          aria-controls={`${id}-panel2-content`}
+          id={`${id}-panel2-header`}
         >
           <Typography component="span">Accordion 2</Typography>
         </AccordionSummary>
diff --git a/docs/data/material/components/accordion/AccordionExpandIcon.tsx b/docs/data/material/components/accordion/AccordionExpandIcon.tsx
index b9cc822bf50327..459816b921a056 100644
--- a/docs/data/material/components/accordion/AccordionExpandIcon.tsx
+++ b/docs/data/material/components/accordion/AccordionExpandIcon.tsx
@@ -1,3 +1,4 @@
+import * as React from 'react';
 import Accordion from '@mui/material/Accordion';
 import AccordionSummary from '@mui/material/AccordionSummary';
 import AccordionDetails from '@mui/material/AccordionDetails';
@@ -6,13 +7,14 @@ import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';
 import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
 
 export default function AccordionExpandIcon() {
+  const id = React.useId();
   return (
     <div>
       <Accordion>
         <AccordionSummary
           expandIcon={<ArrowDownwardIcon />}
-          aria-controls="panel1-content"
-          id="panel1-header"
+          aria-controls={`${id}-panel1-content`}
+          id={`${id}-panel1-header`}
         >
           <Typography component="span">Accordion 1</Typography>
         </AccordionSummary>
@@ -26,8 +28,8 @@ export default function AccordionExpandIcon() {
       <Accordion>
         <AccordionSummary
           expandIcon={<ArrowDropDownIcon />}
-          aria-controls="panel2-content"
-          id="panel2-header"
+          aria-controls={`${id}-panel2-content`}
+          id={`${id}-panel2-header`}
         >
           <Typography component="span">Accordion 2</Typography>
         </AccordionSummary>
diff --git a/docs/data/material/components/accordion/AccordionTransition.js b/docs/data/material/components/accordion/AccordionTransition.js
index b0a39321fdbb8e..3dd5ca18842b80 100644
--- a/docs/data/material/components/accordion/AccordionTransition.js
+++ b/docs/data/material/components/accordion/AccordionTransition.js
@@ -9,6 +9,7 @@ import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import Fade from '@mui/material/Fade';
 
 export default function AccordionTransition() {
+  const id = React.useId();
   const [expanded, setExpanded] = React.useState(false);
 
   const handleExpansion = () => {
@@ -44,8 +45,8 @@ export default function AccordionTransition() {
       >
         <AccordionSummary
           expandIcon={<ExpandMoreIcon />}
-          aria-controls="panel1-content"
-          id="panel1-header"
+          aria-controls={`${id}-panel1-content`}
+          id={`${id}-panel1-header`}
         >
           <Typography component="span">Custom transition using Fade</Typography>
         </AccordionSummary>
@@ -59,8 +60,8 @@ export default function AccordionTransition() {
       <Accordion>
         <AccordionSummary
           expandIcon={<ExpandMoreIcon />}
-          aria-controls="panel2-content"
-          id="panel2-header"
+          aria-controls={`${id}-panel2-content`}
+          id={`${id}-panel2-header`}
         >
           <Typography component="span">Default transition using Collapse</Typography>
         </AccordionSummary>
diff --git a/docs/data/material/components/accordion/AccordionTransition.tsx b/docs/data/material/components/accordion/AccordionTransition.tsx
index 85620309beecd9..3c3ebce28e5d97 100644
--- a/docs/data/material/components/accordion/AccordionTransition.tsx
+++ b/docs/data/material/components/accordion/AccordionTransition.tsx
@@ -12,6 +12,7 @@ import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import Fade from '@mui/material/Fade';
 
 export default function AccordionTransition() {
+  const id = React.useId();
   const [expanded, setExpanded] = React.useState(false);
 
   const handleExpansion = () => {
@@ -47,8 +48,8 @@ export default function AccordionTransition() {
       >
         <AccordionSummary
           expandIcon={<ExpandMoreIcon />}
-          aria-controls="panel1-content"
-          id="panel1-header"
+          aria-controls={`${id}-panel1-content`}
+          id={`${id}-panel1-header`}
         >
           <Typography component="span">Custom transition using Fade</Typography>
         </AccordionSummary>
@@ -62,8 +63,8 @@ export default function AccordionTransition() {
       <Accordion>
         <AccordionSummary
           expandIcon={<ExpandMoreIcon />}
-          aria-controls="panel2-content"
-          id="panel2-header"
+          aria-controls={`${id}-panel2-content`}
+          id={`${id}-panel2-header`}
         >
           <Typography component="span">Default transition using Collapse</Typography>
         </AccordionSummary>
diff --git a/docs/data/material/components/accordion/AccordionUsage.js b/docs/data/material/components/accordion/AccordionUsage.js
index c467be54359ec7..26deb503ece3f5 100644
--- a/docs/data/material/components/accordion/AccordionUsage.js
+++ b/docs/data/material/components/accordion/AccordionUsage.js
@@ -1,3 +1,4 @@
+import * as React from 'react';
 import Accordion from '@mui/material/Accordion';
 import AccordionActions from '@mui/material/AccordionActions';
 import AccordionSummary from '@mui/material/AccordionSummary';
@@ -7,13 +8,14 @@ import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import Button from '@mui/material/Button';
 
 export default function AccordionUsage() {
+  const id = React.useId();
   return (
     <div>
       <Accordion>
         <AccordionSummary
           expandIcon={<ExpandMoreIcon />}
-          aria-controls="panel1-content"
-          id="panel1-header"
+          aria-controls={`${id}-panel1-content`}
+          id={`${id}-panel1-header`}
         >
           <Typography component="span">Accordion 1</Typography>
         </AccordionSummary>
@@ -25,8 +27,8 @@ export default function AccordionUsage() {
       <Accordion>
         <AccordionSummary
           expandIcon={<ExpandMoreIcon />}
-          aria-controls="panel2-content"
-          id="panel2-header"
+          aria-controls={`${id}-panel2-content`}
+          id={`${id}-panel2-header`}
         >
           <Typography component="span">Accordion 2</Typography>
         </AccordionSummary>
@@ -38,8 +40,8 @@ export default function AccordionUsage() {
       <Accordion defaultExpanded>
         <AccordionSummary
           expandIcon={<ExpandMoreIcon />}
-          aria-controls="panel3-content"
-          id="panel3-header"
+          aria-controls={`${id}-panel3-content`}
+          id={`${id}-panel3-header`}
         >
           <Typography component="span">Accordion Actions</Typography>
         </AccordionSummary>
diff --git a/docs/data/material/components/accordion/AccordionUsage.tsx b/docs/data/material/components/accordion/AccordionUsage.tsx
index c467be54359ec7..26deb503ece3f5 100644
--- a/docs/data/material/components/accordion/AccordionUsage.tsx
+++ b/docs/data/material/components/accordion/AccordionUsage.tsx
@@ -1,3 +1,4 @@
+import * as React from 'react';
 import Accordion from '@mui/material/Accordion';
 import AccordionActions from '@mui/material/AccordionActions';
 import AccordionSummary from '@mui/material/AccordionSummary';
@@ -7,13 +8,14 @@ import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import Button from '@mui/material/Button';
 
 export default function AccordionUsage() {
+  const id = React.useId();
   return (
     <div>
       <Accordion>
         <AccordionSummary
           expandIcon={<ExpandMoreIcon />}
-          aria-controls="panel1-content"
-          id="panel1-header"
+          aria-controls={`${id}-panel1-content`}
+          id={`${id}-panel1-header`}
         >
           <Typography component="span">Accordion 1</Typography>
         </AccordionSummary>
@@ -25,8 +27,8 @@ export default function AccordionUsage() {
       <Accordion>
         <AccordionSummary
           expandIcon={<ExpandMoreIcon />}
-          aria-controls="panel2-content"
-          id="panel2-header"
+          aria-controls={`${id}-panel2-content`}
+          id={`${id}-panel2-header`}
         >
           <Typography component="span">Accordion 2</Typography>
         </AccordionSummary>
@@ -38,8 +40,8 @@ export default function AccordionUsage() {
       <Accordion defaultExpanded>
         <AccordionSummary
           expandIcon={<ExpandMoreIcon />}
-          aria-controls="panel3-content"
-          id="panel3-header"
+          aria-controls={`${id}-panel3-content`}
+          id={`${id}-panel3-header`}
         >
           <Typography component="span">Accordion Actions</Typography>
         </AccordionSummary>
diff --git a/docs/data/material/components/accordion/DisabledAccordion.js b/docs/data/material/components/accordion/DisabledAccordion.js
index 3ed005eac738de..ef1cf954db88f2 100644
--- a/docs/data/material/components/accordion/DisabledAccordion.js
+++ b/docs/data/material/components/accordion/DisabledAccordion.js
@@ -1,3 +1,4 @@
+import * as React from 'react';
 import Accordion from '@mui/material/Accordion';
 import AccordionSummary from '@mui/material/AccordionSummary';
 import AccordionDetails from '@mui/material/AccordionDetails';
@@ -5,13 +6,14 @@ import Typography from '@mui/material/Typography';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 
 export default function DisabledAccordion() {
+  const id = React.useId();
   return (
     <div>
       <Accordion>
         <AccordionSummary
           expandIcon={<ExpandMoreIcon />}
-          aria-controls="panel1-content"
-          id="panel1-header"
+          aria-controls={`${id}-panel1-content`}
+          id={`${id}-panel1-header`}
         >
           <Typography component="span">Accordion 1</Typography>
         </AccordionSummary>
@@ -25,8 +27,8 @@ export default function DisabledAccordion() {
       <Accordion>
         <AccordionSummary
           expandIcon={<ExpandMoreIcon />}
-          aria-controls="panel2-content"
-          id="panel2-header"
+          aria-controls={`${id}-panel2-content`}
+          id={`${id}-panel2-header`}
         >
           <Typography component="span">Accordion 2</Typography>
         </AccordionSummary>
@@ -40,8 +42,8 @@ export default function DisabledAccordion() {
       <Accordion disabled>
         <AccordionSummary
           expandIcon={<ExpandMoreIcon />}
-          aria-controls="panel3-content"
-          id="panel3-header"
+          aria-controls={`${id}-panel3-content`}
+          id={`${id}-panel3-header`}
         >
           <Typography component="span">Disabled Accordion</Typography>
         </AccordionSummary>
diff --git a/docs/data/material/components/accordion/DisabledAccordion.tsx b/docs/data/material/components/accordion/DisabledAccordion.tsx
index 3ed005eac738de..ef1cf954db88f2 100644
--- a/docs/data/material/components/accordion/DisabledAccordion.tsx
+++ b/docs/data/material/components/accordion/DisabledAccordion.tsx
@@ -1,3 +1,4 @@
+import * as React from 'react';
 import Accordion from '@mui/material/Accordion';
 import AccordionSummary from '@mui/material/AccordionSummary';
 import AccordionDetails from '@mui/material/AccordionDetails';
@@ -5,13 +6,14 @@ import Typography from '@mui/material/Typography';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 
 export default function DisabledAccordion() {
+  const id = React.useId();
   return (
     <div>
       <Accordion>
         <AccordionSummary
           expandIcon={<ExpandMoreIcon />}
-          aria-controls="panel1-content"
-          id="panel1-header"
+          aria-controls={`${id}-panel1-content`}
+          id={`${id}-panel1-header`}
         >
           <Typography component="span">Accordion 1</Typography>
         </AccordionSummary>
@@ -25,8 +27,8 @@ export default function DisabledAccordion() {
       <Accordion>
         <AccordionSummary
           expandIcon={<ExpandMoreIcon />}
-          aria-controls="panel2-content"
-          id="panel2-header"
+          aria-controls={`${id}-panel2-content`}
+          id={`${id}-panel2-header`}
         >
           <Typography component="span">Accordion 2</Typography>
         </AccordionSummary>
@@ -40,8 +42,8 @@ export default function DisabledAccordion() {
       <Accordion disabled>
         <AccordionSummary
           expandIcon={<ExpandMoreIcon />}
-          aria-controls="panel3-content"
-          id="panel3-header"
+          aria-controls={`${id}-panel3-content`}
+          id={`${id}-panel3-header`}
         >
           <Typography component="span">Disabled Accordion</Typography>
         </AccordionSummary>
diff --git a/docs/data/material/components/menus/BasicMenu.js b/docs/data/material/components/menus/BasicMenu.js
index d76a67c0f37968..68eeab246a6949 100644
--- a/docs/data/material/components/menus/BasicMenu.js
+++ b/docs/data/material/components/menus/BasicMenu.js
@@ -4,6 +4,9 @@ import Menu from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
 
 export default function BasicMenu() {
+  const id = React.useId();
+  const buttonId = `${id}-button`;
+  const menuId = `${id}-menu`;
   const [anchorEl, setAnchorEl] = React.useState(null);
   const open = Boolean(anchorEl);
   const handleClick = (event) => {
@@ -16,8 +19,8 @@ export default function BasicMenu() {
   return (
     <div>
       <Button
-        id="basic-button"
-        aria-controls={open ? 'basic-menu' : undefined}
+        id={buttonId}
+        aria-controls={open ? menuId : undefined}
         aria-haspopup="true"
         aria-expanded={open}
         onClick={handleClick}
@@ -25,13 +28,13 @@ export default function BasicMenu() {
         Dashboard
       </Button>
       <Menu
-        id="basic-menu"
+        id={menuId}
         anchorEl={anchorEl}
         open={open}
         onClose={handleClose}
         slotProps={{
           list: {
-            'aria-labelledby': 'basic-button',
+            'aria-labelledby': buttonId,
           },
         }}
       >
diff --git a/docs/data/material/components/menus/BasicMenu.tsx b/docs/data/material/components/menus/BasicMenu.tsx
index 39bc89d11e696e..ea70ef23026202 100644
--- a/docs/data/material/components/menus/BasicMenu.tsx
+++ b/docs/data/material/components/menus/BasicMenu.tsx
@@ -4,6 +4,9 @@ import Menu from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
 
 export default function BasicMenu() {
+  const id = React.useId();
+  const buttonId = `${id}-button`;
+  const menuId = `${id}-menu`;
   const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
   const open = Boolean(anchorEl);
   const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
@@ -16,8 +19,8 @@ export default function BasicMenu() {
   return (
     <div>
       <Button
-        id="basic-button"
-        aria-controls={open ? 'basic-menu' : undefined}
+        id={buttonId}
+        aria-controls={open ? menuId : undefined}
         aria-haspopup="true"
         aria-expanded={open}
         onClick={handleClick}
@@ -25,13 +28,13 @@ export default function BasicMenu() {
         Dashboard
       </Button>
       <Menu
-        id="basic-menu"
+        id={menuId}
         anchorEl={anchorEl}
         open={open}
         onClose={handleClose}
         slotProps={{
           list: {
-            'aria-labelledby': 'basic-button',
+            'aria-labelledby': buttonId,
           },
         }}
       >
diff --git a/docs/data/material/components/menus/GroupedMenu.js b/docs/data/material/components/menus/GroupedMenu.js
index 1c71a0cf8ca86a..fc3dc3ad5c9665 100644
--- a/docs/data/material/components/menus/GroupedMenu.js
+++ b/docs/data/material/components/menus/GroupedMenu.js
@@ -10,6 +10,9 @@ const StyledListHeader = styled(ListSubheader)({
 });
 
 export default function GroupedMenu() {
+  const id = React.useId();
+  const buttonId = `${id}-button`;
+  const menuId = `${id}-menu`;
   const [anchorEl, setAnchorEl] = React.useState(null);
   const open = Boolean(anchorEl);
   const handleClick = (event) => {
@@ -22,8 +25,8 @@ export default function GroupedMenu() {
   return (
     <div>
       <Button
-        id="basic-button"
-        aria-controls={open ? 'grouped-menu' : undefined}
+        id={buttonId}
+        aria-controls={open ? menuId : undefined}
         aria-haspopup="true"
         aria-expanded={open}
         onClick={handleClick}
@@ -31,13 +34,13 @@ export default function GroupedMenu() {
         Dashboard
       </Button>
       <Menu
-        id="grouped-menu"
+        id={menuId}
         anchorEl={anchorEl}
         open={open}
         onClose={handleClose}
         slotProps={{
           list: {
-            'aria-labelledby': 'basic-button',
+            'aria-labelledby': buttonId,
             sx: {
               py: 0,
             },
diff --git a/docs/data/material/components/menus/GroupedMenu.tsx b/docs/data/material/components/menus/GroupedMenu.tsx
index 3ea0df64f1ede7..cb32bdad2b0256 100644
--- a/docs/data/material/components/menus/GroupedMenu.tsx
+++ b/docs/data/material/components/menus/GroupedMenu.tsx
@@ -10,6 +10,9 @@ const StyledListHeader = styled(ListSubheader)({
 });
 
 export default function GroupedMenu() {
+  const id = React.useId();
+  const buttonId = `${id}-button`;
+  const menuId = `${id}-menu`;
   const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
   const open = Boolean(anchorEl);
   const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
@@ -22,8 +25,8 @@ export default function GroupedMenu() {
   return (
     <div>
       <Button
-        id="basic-button"
-        aria-controls={open ? 'grouped-menu' : undefined}
+        id={buttonId}
+        aria-controls={open ? menuId : undefined}
         aria-haspopup="true"
         aria-expanded={open}
         onClick={handleClick}
@@ -31,13 +34,13 @@ export default function GroupedMenu() {
         Dashboard
       </Button>
       <Menu
-        id="grouped-menu"
+        id={menuId}
         anchorEl={anchorEl}
         open={open}
         onClose={handleClose}
         slotProps={{
           list: {
-            'aria-labelledby': 'basic-button',
+            'aria-labelledby': buttonId,
             sx: {
               py: 0,
             },
diff --git a/docs/data/material/components/radio-buttons/ControlledRadioButtonsGroup.js b/docs/data/material/components/radio-buttons/ControlledRadioButtonsGroup.js
index 95193ced07aa54..fd589fe57156c8 100644
--- a/docs/data/material/components/radio-buttons/ControlledRadioButtonsGroup.js
+++ b/docs/data/material/components/radio-buttons/ControlledRadioButtonsGroup.js
@@ -6,6 +6,7 @@ import FormControl from '@mui/material/FormControl';
 import FormLabel from '@mui/material/FormLabel';
 
 export default function ControlledRadioButtonsGroup() {
+  const id = React.useId();
   const [value, setValue] = React.useState('female');
 
   const handleChange = (event) => {
@@ -14,9 +15,9 @@ export default function ControlledRadioButtonsGroup() {
 
   return (
     <FormControl>
-      <FormLabel id="demo-controlled-radio-buttons-group">Gender</FormLabel>
+      <FormLabel id={`${id}-label`}>Gender</FormLabel>
       <RadioGroup
-        aria-labelledby="demo-controlled-radio-buttons-group"
+        aria-labelledby={`${id}-label`}
         name="controlled-radio-buttons-group"
         value={value}
         onChange={handleChange}
diff --git a/docs/data/material/components/radio-buttons/ControlledRadioButtonsGroup.tsx b/docs/data/material/components/radio-buttons/ControlledRadioButtonsGroup.tsx
index d317eb6d9f3ae3..7845fb14516c9b 100644
--- a/docs/data/material/components/radio-buttons/ControlledRadioButtonsGroup.tsx
+++ b/docs/data/material/components/radio-buttons/ControlledRadioButtonsGroup.tsx
@@ -6,6 +6,7 @@ import FormControl from '@mui/material/FormControl';
 import FormLabel from '@mui/material/FormLabel';
 
 export default function ControlledRadioButtonsGroup() {
+  const id = React.useId();
   const [value, setValue] = React.useState('female');
 
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -14,9 +15,9 @@ export default function ControlledRadioButtonsGroup() {
 
   return (
     <FormControl>
-      <FormLabel id="demo-controlled-radio-buttons-group">Gender</FormLabel>
+      <FormLabel id={`${id}-label`}>Gender</FormLabel>
       <RadioGroup
-        aria-labelledby="demo-controlled-radio-buttons-group"
+        aria-labelledby={`${id}-label`}
         name="controlled-radio-buttons-group"
         value={value}
         onChange={handleChange}
diff --git a/docs/data/material/components/radio-buttons/ControlledRadioButtonsGroup.tsx.preview b/docs/data/material/components/radio-buttons/ControlledRadioButtonsGroup.tsx.preview
index 31a16b8998adb5..a55cc2986e65c0 100644
--- a/docs/data/material/components/radio-buttons/ControlledRadioButtonsGroup.tsx.preview
+++ b/docs/data/material/components/radio-buttons/ControlledRadioButtonsGroup.tsx.preview
@@ -1,7 +1,7 @@
 <FormControl>
-  <FormLabel id="demo-controlled-radio-buttons-group">Gender</FormLabel>
+  <FormLabel id={`${id}-label`}>Gender</FormLabel>
   <RadioGroup
-    aria-labelledby="demo-controlled-radio-buttons-group"
+    aria-labelledby={`${id}-label`}
     name="controlled-radio-buttons-group"
     value={value}
     onChange={handleChange}
diff --git a/docs/data/material/components/radio-buttons/CustomizedRadios.js b/docs/data/material/components/radio-buttons/CustomizedRadios.js
index ecfdbe00e346c4..0233ed93718035 100644
--- a/docs/data/material/components/radio-buttons/CustomizedRadios.js
+++ b/docs/data/material/components/radio-buttons/CustomizedRadios.js
@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { styled } from '@mui/material/styles';
 import Radio from '@mui/material/Radio';
 import RadioGroup from '@mui/material/RadioGroup';
@@ -65,12 +66,13 @@ function BpRadio(props) {
 }
 
 export default function CustomizedRadios() {
+  const id = React.useId();
   return (
     <FormControl>
-      <FormLabel id="demo-customized-radios">Gender</FormLabel>
+      <FormLabel id={`${id}-label`}>Gender</FormLabel>
       <RadioGroup
         defaultValue="female"
-        aria-labelledby="demo-customized-radios"
+        aria-labelledby={`${id}-label`}
         name="customized-radios"
       >
         <FormControlLabel value="female" control={<BpRadio />} label="Female" />
diff --git a/docs/data/material/components/radio-buttons/CustomizedRadios.tsx b/docs/data/material/components/radio-buttons/CustomizedRadios.tsx
index 64537d1bd6117e..7a5a497c24d27b 100644
--- a/docs/data/material/components/radio-buttons/CustomizedRadios.tsx
+++ b/docs/data/material/components/radio-buttons/CustomizedRadios.tsx
@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { styled } from '@mui/material/styles';
 import Radio, { RadioProps } from '@mui/material/Radio';
 import RadioGroup from '@mui/material/RadioGroup';
@@ -65,12 +66,13 @@ function BpRadio(props: RadioProps) {
 }
 
 export default function CustomizedRadios() {
+  const id = React.useId();
   return (
     <FormControl>
-      <FormLabel id="demo-customized-radios">Gender</FormLabel>
+      <FormLabel id={`${id}-label`}>Gender</FormLabel>
       <RadioGroup
         defaultValue="female"
-        aria-labelledby="demo-customized-radios"
+        aria-labelledby={`${id}-label`}
         name="customized-radios"
       >
         <FormControlLabel value="female" control={<BpRadio />} label="Female" />
diff --git a/docs/data/material/components/radio-buttons/ErrorRadios.js b/docs/data/material/components/radio-buttons/ErrorRadios.js
index 71858f3c3a68fc..ccedc9983fd2a3 100644
--- a/docs/data/material/components/radio-buttons/ErrorRadios.js
+++ b/docs/data/material/components/radio-buttons/ErrorRadios.js
@@ -8,6 +8,7 @@ import FormLabel from '@mui/material/FormLabel';
 import Button from '@mui/material/Button';
 
 export default function ErrorRadios() {
+  const id = React.useId();
   const [value, setValue] = React.useState('');
   const [error, setError] = React.useState(false);
   const [helperText, setHelperText] = React.useState('Choose wisely');
@@ -36,9 +37,9 @@ export default function ErrorRadios() {
   return (
     <form onSubmit={handleSubmit}>
       <FormControl sx={{ m: 3 }} error={error} variant="standard">
-        <FormLabel id="demo-error-radios">Pop quiz: MUI is...</FormLabel>
+        <FormLabel id={`${id}-label`}>Pop quiz: MUI is...</FormLabel>
         <RadioGroup
-          aria-labelledby="demo-error-radios"
+          aria-labelledby={`${id}-label`}
           name="quiz"
           value={value}
           onChange={handleRadioChange}
diff --git a/docs/data/material/components/radio-buttons/ErrorRadios.tsx b/docs/data/material/components/radio-buttons/ErrorRadios.tsx
index 17cd1e2202f0d3..68d52e9828ea21 100644
--- a/docs/data/material/components/radio-buttons/ErrorRadios.tsx
+++ b/docs/data/material/components/radio-buttons/ErrorRadios.tsx
@@ -8,6 +8,7 @@ import FormLabel from '@mui/material/FormLabel';
 import Button from '@mui/material/Button';
 
 export default function ErrorRadios() {
+  const id = React.useId();
   const [value, setValue] = React.useState('');
   const [error, setError] = React.useState(false);
   const [helperText, setHelperText] = React.useState('Choose wisely');
@@ -36,9 +37,9 @@ export default function ErrorRadios() {
   return (
     <form onSubmit={handleSubmit}>
       <FormControl sx={{ m: 3 }} error={error} variant="standard">
-        <FormLabel id="demo-error-radios">Pop quiz: MUI is...</FormLabel>
+        <FormLabel id={`${id}-label`}>Pop quiz: MUI is...</FormLabel>
         <RadioGroup
-          aria-labelledby="demo-error-radios"
+          aria-labelledby={`${id}-label`}
           name="quiz"
           value={value}
           onChange={handleRadioChange}
diff --git a/docs/data/material/components/radio-buttons/FormControlLabelPlacement.js b/docs/data/material/components/radio-buttons/FormControlLabelPlacement.js
index 57990b51e7bcab..16cfec6691e334 100644
--- a/docs/data/material/components/radio-buttons/FormControlLabelPlacement.js
+++ b/docs/data/material/components/radio-buttons/FormControlLabelPlacement.js
@@ -1,3 +1,4 @@
+import * as React from 'react';
 import Radio from '@mui/material/Radio';
 import RadioGroup from '@mui/material/RadioGroup';
 import FormControlLabel from '@mui/material/FormControlLabel';
@@ -5,12 +6,13 @@ import FormControl from '@mui/material/FormControl';
 import FormLabel from '@mui/material/FormLabel';
 
 export default function FormControlLabelPlacement() {
+  const id = React.useId();
   return (
     <FormControl>
-      <FormLabel id="demo-form-control-label-placement">Label placement</FormLabel>
+      <FormLabel id={`${id}-label`}>Label placement</FormLabel>
       <RadioGroup
         row
-        aria-labelledby="demo-form-control-label-placement"
+        aria-labelledby={`${id}-label`}
         name="position"
         defaultValue="top"
       >
diff --git a/docs/data/material/components/radio-buttons/FormControlLabelPlacement.tsx b/docs/data/material/components/radio-buttons/FormControlLabelPlacement.tsx
index 57990b51e7bcab..16cfec6691e334 100644
--- a/docs/data/material/components/radio-buttons/FormControlLabelPlacement.tsx
+++ b/docs/data/material/components/radio-buttons/FormControlLabelPlacement.tsx
@@ -1,3 +1,4 @@
+import * as React from 'react';
 import Radio from '@mui/material/Radio';
 import RadioGroup from '@mui/material/RadioGroup';
 import FormControlLabel from '@mui/material/FormControlLabel';
@@ -5,12 +6,13 @@ import FormControl from '@mui/material/FormControl';
 import FormLabel from '@mui/material/FormLabel';
 
 export default function FormControlLabelPlacement() {
+  const id = React.useId();
   return (
     <FormControl>
-      <FormLabel id="demo-form-control-label-placement">Label placement</FormLabel>
+      <FormLabel id={`${id}-label`}>Label placement</FormLabel>
       <RadioGroup
         row
-        aria-labelledby="demo-form-control-label-placement"
+        aria-labelledby={`${id}-label`}
         name="position"
         defaultValue="top"
       >
diff --git a/docs/data/material/components/radio-buttons/RadioButtonsGroup.js b/docs/data/material/components/radio-buttons/RadioButtonsGroup.js
index bf3f83dd591ff2..f79ba69a7a6176 100644
--- a/docs/data/material/components/radio-buttons/RadioButtonsGroup.js
+++ b/docs/data/material/components/radio-buttons/RadioButtonsGroup.js
@@ -1,3 +1,4 @@
+import * as React from 'react';
 import Radio from '@mui/material/Radio';
 import RadioGroup from '@mui/material/RadioGroup';
 import FormControlLabel from '@mui/material/FormControlLabel';
@@ -5,11 +6,12 @@ import FormControl from '@mui/material/FormControl';
 import FormLabel from '@mui/material/FormLabel';
 
 export default function RadioButtonsGroup() {
+  const id = React.useId();
   return (
     <FormControl>
-      <FormLabel id="demo-radio-buttons-group-label">Gender</FormLabel>
+      <FormLabel id={`${id}-label`}>Gender</FormLabel>
       <RadioGroup
-        aria-labelledby="demo-radio-buttons-group-label"
+        aria-labelledby={`${id}-label`}
         defaultValue="female"
         name="radio-buttons-group"
       >
diff --git a/docs/data/material/components/radio-buttons/RadioButtonsGroup.tsx b/docs/data/material/components/radio-buttons/RadioButtonsGroup.tsx
index bf3f83dd591ff2..f79ba69a7a6176 100644
--- a/docs/data/material/components/radio-buttons/RadioButtonsGroup.tsx
+++ b/docs/data/material/components/radio-buttons/RadioButtonsGroup.tsx
@@ -1,3 +1,4 @@
+import * as React from 'react';
 import Radio from '@mui/material/Radio';
 import RadioGroup from '@mui/material/RadioGroup';
 import FormControlLabel from '@mui/material/FormControlLabel';
@@ -5,11 +6,12 @@ import FormControl from '@mui/material/FormControl';
 import FormLabel from '@mui/material/FormLabel';
 
 export default function RadioButtonsGroup() {
+  const id = React.useId();
   return (
     <FormControl>
-      <FormLabel id="demo-radio-buttons-group-label">Gender</FormLabel>
+      <FormLabel id={`${id}-label`}>Gender</FormLabel>
       <RadioGroup
-        aria-labelledby="demo-radio-buttons-group-label"
+        aria-labelledby={`${id}-label`}
         defaultValue="female"
         name="radio-buttons-group"
       >
diff --git a/docs/data/material/components/radio-buttons/RadioButtonsGroup.tsx.preview b/docs/data/material/components/radio-buttons/RadioButtonsGroup.tsx.preview
index 957b704f328985..4a3e55b4d7fd41 100644
--- a/docs/data/material/components/radio-buttons/RadioButtonsGroup.tsx.preview
+++ b/docs/data/material/components/radio-buttons/RadioButtonsGroup.tsx.preview
@@ -1,7 +1,7 @@
 <FormControl>
-  <FormLabel id="demo-radio-buttons-group-label">Gender</FormLabel>
+  <FormLabel id={`${id}-label`}>Gender</FormLabel>
   <RadioGroup
-    aria-labelledby="demo-radio-buttons-group-label"
+    aria-labelledby={`${id}-label`}
     defaultValue="female"
     name="radio-buttons-group"
   >
diff --git a/docs/data/material/components/radio-buttons/RowRadioButtonsGroup.js b/docs/data/material/components/radio-buttons/RowRadioButtonsGroup.js
index 535a6f12079f86..17a38345157dc1 100644
--- a/docs/data/material/components/radio-buttons/RowRadioButtonsGroup.js
+++ b/docs/data/material/components/radio-buttons/RowRadioButtonsGroup.js
@@ -1,3 +1,4 @@
+import * as React from 'react';
 import Radio from '@mui/material/Radio';
 import RadioGroup from '@mui/material/RadioGroup';
 import FormControlLabel from '@mui/material/FormControlLabel';
@@ -5,14 +6,11 @@ import FormControl from '@mui/material/FormControl';
 import FormLabel from '@mui/material/FormLabel';
 
 export default function RowRadioButtonsGroup() {
+  const id = React.useId();
   return (
     <FormControl>
-      <FormLabel id="demo-row-radio-buttons-group-label">Gender</FormLabel>
-      <RadioGroup
-        row
-        aria-labelledby="demo-row-radio-buttons-group-label"
-        name="row-radio-buttons-group"
-      >
+      <FormLabel id={`${id}-label`}>Gender</FormLabel>
+      <RadioGroup row aria-labelledby={`${id}-label`} name="row-radio-buttons-group">
         <FormControlLabel value="female" control={<Radio />} label="Female" />
         <FormControlLabel value="male" control={<Radio />} label="Male" />
         <FormControlLabel value="other" control={<Radio />} label="Other" />
diff --git a/docs/data/material/components/radio-buttons/RowRadioButtonsGroup.tsx b/docs/data/material/components/radio-buttons/RowRadioButtonsGroup.tsx
index 535a6f12079f86..17a38345157dc1 100644
--- a/docs/data/material/components/radio-buttons/RowRadioButtonsGroup.tsx
+++ b/docs/data/material/components/radio-buttons/RowRadioButtonsGroup.tsx
@@ -1,3 +1,4 @@
+import * as React from 'react';
 import Radio from '@mui/material/Radio';
 import RadioGroup from '@mui/material/RadioGroup';
 import FormControlLabel from '@mui/material/FormControlLabel';
@@ -5,14 +6,11 @@ import FormControl from '@mui/material/FormControl';
 import FormLabel from '@mui/material/FormLabel';
 
 export default function RowRadioButtonsGroup() {
+  const id = React.useId();
   return (
     <FormControl>
-      <FormLabel id="demo-row-radio-buttons-group-label">Gender</FormLabel>
-      <RadioGroup
-        row
-        aria-labelledby="demo-row-radio-buttons-group-label"
-        name="row-radio-buttons-group"
-      >
+      <FormLabel id={`${id}-label`}>Gender</FormLabel>
+      <RadioGroup row aria-labelledby={`${id}-label`} name="row-radio-buttons-group">
         <FormControlLabel value="female" control={<Radio />} label="Female" />
         <FormControlLabel value="male" control={<Radio />} label="Male" />
         <FormControlLabel value="other" control={<Radio />} label="Other" />
diff --git a/docs/data/material/components/radio-buttons/RowRadioButtonsGroup.tsx.preview b/docs/data/material/components/radio-buttons/RowRadioButtonsGroup.tsx.preview
new file mode 100644
index 00000000000000..02735d38677625
--- /dev/null
+++ b/docs/data/material/components/radio-buttons/RowRadioButtonsGroup.tsx.preview
@@ -0,0 +1,14 @@
+<FormControl>
+  <FormLabel id={`${id}-label`}>Gender</FormLabel>
+  <RadioGroup row aria-labelledby={`${id}-label`} name="row-radio-buttons-group">
+    <FormControlLabel value="female" control={<Radio />} label="Female" />
+    <FormControlLabel value="male" control={<Radio />} label="Male" />
+    <FormControlLabel value="other" control={<Radio />} label="Other" />
+    <FormControlLabel
+      value="disabled"
+      disabled
+      control={<Radio />}
+      label="other"
+    />
+  </RadioGroup>
+</FormControl>
\ No newline at end of file
diff --git a/docs/data/material/components/selects/CustomizedSelects.js b/docs/data/material/components/selects/CustomizedSelects.js
index 05bed40e20121e..8e75004d9ebab7 100644
--- a/docs/data/material/components/selects/CustomizedSelects.js
+++ b/docs/data/material/components/selects/CustomizedSelects.js
@@ -41,6 +41,9 @@ const BootstrapInput = styled(InputBase)(({ theme }) => ({
 }));
 
 export default function CustomizedSelects() {
+  const textboxId = React.useId();
+  const selectId = React.useId();
+  const nativeId = React.useId();
   const [age, setAge] = React.useState('');
   const handleChange = (event) => {
     setAge(event.target.value);
@@ -48,14 +51,14 @@ export default function CustomizedSelects() {
   return (
     <div>
       <FormControl sx={{ m: 1 }} variant="standard">
-        <InputLabel htmlFor="demo-customized-textbox">Age</InputLabel>
-        <BootstrapInput id="demo-customized-textbox" />
+        <InputLabel htmlFor={`${textboxId}-input`}>Age</InputLabel>
+        <BootstrapInput id={`${textboxId}-input`} />
       </FormControl>
       <FormControl sx={{ m: 1 }} variant="standard">
-        <InputLabel id="demo-customized-select-label">Age</InputLabel>
+        <InputLabel id={`${selectId}-label`}>Age</InputLabel>
         <Select
-          labelId="demo-customized-select-label"
-          id="demo-customized-select"
+          labelId={`${selectId}-label`}
+          id={`${selectId}-select`}
           value={age}
           onChange={handleChange}
           input={<BootstrapInput />}
@@ -69,9 +72,9 @@ export default function CustomizedSelects() {
         </Select>
       </FormControl>
       <FormControl sx={{ m: 1 }} variant="standard">
-        <InputLabel htmlFor="demo-customized-select-native">Age</InputLabel>
+        <InputLabel htmlFor={`${nativeId}-select`}>Age</InputLabel>
         <NativeSelect
-          id="demo-customized-select-native"
+          id={`${nativeId}-select`}
           value={age}
           onChange={handleChange}
           input={<BootstrapInput />}
diff --git a/docs/data/material/components/selects/CustomizedSelects.tsx b/docs/data/material/components/selects/CustomizedSelects.tsx
index 452053d2baa637..b184257ca42b24 100644
--- a/docs/data/material/components/selects/CustomizedSelects.tsx
+++ b/docs/data/material/components/selects/CustomizedSelects.tsx
@@ -41,6 +41,9 @@ const BootstrapInput = styled(InputBase)(({ theme }) => ({
 }));
 
 export default function CustomizedSelects() {
+  const textboxId = React.useId();
+  const selectId = React.useId();
+  const nativeId = React.useId();
   const [age, setAge] = React.useState('');
   const handleChange = (event: { target: { value: string } }) => {
     setAge(event.target.value);
@@ -48,14 +51,14 @@ export default function CustomizedSelects() {
   return (
     <div>
       <FormControl sx={{ m: 1 }} variant="standard">
-        <InputLabel htmlFor="demo-customized-textbox">Age</InputLabel>
-        <BootstrapInput id="demo-customized-textbox" />
+        <InputLabel htmlFor={`${textboxId}-input`}>Age</InputLabel>
+        <BootstrapInput id={`${textboxId}-input`} />
       </FormControl>
       <FormControl sx={{ m: 1 }} variant="standard">
-        <InputLabel id="demo-customized-select-label">Age</InputLabel>
+        <InputLabel id={`${selectId}-label`}>Age</InputLabel>
         <Select
-          labelId="demo-customized-select-label"
-          id="demo-customized-select"
+          labelId={`${selectId}-label`}
+          id={`${selectId}-select`}
           value={age}
           onChange={handleChange}
           input={<BootstrapInput />}
@@ -69,9 +72,9 @@ export default function CustomizedSelects() {
         </Select>
       </FormControl>
       <FormControl sx={{ m: 1 }} variant="standard">
-        <InputLabel htmlFor="demo-customized-select-native">Age</InputLabel>
+        <InputLabel htmlFor={`${nativeId}-select`}>Age</InputLabel>
         <NativeSelect
-          id="demo-customized-select-native"
+          id={`${nativeId}-select`}
           value={age}
           onChange={handleChange}
           input={<BootstrapInput />}
diff --git a/docs/data/material/components/selects/DialogSelect.js b/docs/data/material/components/selects/DialogSelect.js
index 5d08e345eb225a..5387e53d5c16bc 100644
--- a/docs/data/material/components/selects/DialogSelect.js
+++ b/docs/data/material/components/selects/DialogSelect.js
@@ -12,6 +12,8 @@ import FormControl from '@mui/material/FormControl';
 import Select from '@mui/material/Select';
 
 export default function DialogSelect() {
+  const nativeId = React.useId();
+  const selectId = React.useId();
   const [open, setOpen] = React.useState(false);
   const [age, setAge] = React.useState('');
 
@@ -41,12 +43,12 @@ export default function DialogSelect() {
         <DialogContent>
           <Box component="form" sx={{ display: 'flex', flexWrap: 'wrap' }}>
             <FormControl sx={{ m: 1, minWidth: 120 }}>
-              <InputLabel htmlFor="demo-dialog-native">Age</InputLabel>
+              <InputLabel htmlFor={`${nativeId}-select`}>Age</InputLabel>
               <Select
                 native
                 value={age}
                 onChange={handleChange}
-                input={<OutlinedInput label="Age" id="demo-dialog-native" />}
+                input={<OutlinedInput label="Age" id={`${nativeId}-select`} />}
               >
                 <option aria-label="None" value="" />
                 <option value={10}>Ten</option>
@@ -55,10 +57,10 @@ export default function DialogSelect() {
               </Select>
             </FormControl>
             <FormControl sx={{ m: 1, minWidth: 120 }}>
-              <InputLabel id="demo-dialog-select-label">Age</InputLabel>
+              <InputLabel id={`${selectId}-label`}>Age</InputLabel>
               <Select
-                labelId="demo-dialog-select-label"
-                id="demo-dialog-select"
+                labelId={`${selectId}-label`}
+                id={`${selectId}-select`}
                 value={age}
                 onChange={handleChange}
                 input={<OutlinedInput label="Age" />}
diff --git a/docs/data/material/components/selects/DialogSelect.tsx b/docs/data/material/components/selects/DialogSelect.tsx
index d69668317ceb98..1b28ae0d519277 100644
--- a/docs/data/material/components/selects/DialogSelect.tsx
+++ b/docs/data/material/components/selects/DialogSelect.tsx
@@ -12,6 +12,8 @@ import FormControl from '@mui/material/FormControl';
 import Select, { SelectChangeEvent } from '@mui/material/Select';
 
 export default function DialogSelect() {
+  const nativeId = React.useId();
+  const selectId = React.useId();
   const [open, setOpen] = React.useState(false);
   const [age, setAge] = React.useState<number | string>('');
 
@@ -44,12 +46,12 @@ export default function DialogSelect() {
         <DialogContent>
           <Box component="form" sx={{ display: 'flex', flexWrap: 'wrap' }}>
             <FormControl sx={{ m: 1, minWidth: 120 }}>
-              <InputLabel htmlFor="demo-dialog-native">Age</InputLabel>
+              <InputLabel htmlFor={`${nativeId}-select`}>Age</InputLabel>
               <Select
                 native
                 value={age}
                 onChange={handleChange}
-                input={<OutlinedInput label="Age" id="demo-dialog-native" />}
+                input={<OutlinedInput label="Age" id={`${nativeId}-select`} />}
               >
                 <option aria-label="None" value="" />
                 <option value={10}>Ten</option>
@@ -58,10 +60,10 @@ export default function DialogSelect() {
               </Select>
             </FormControl>
             <FormControl sx={{ m: 1, minWidth: 120 }}>
-              <InputLabel id="demo-dialog-select-label">Age</InputLabel>
+              <InputLabel id={`${selectId}-label`}>Age</InputLabel>
               <Select
-                labelId="demo-dialog-select-label"
-                id="demo-dialog-select"
+                labelId={`${selectId}-label`}
+                id={`${selectId}-select`}
                 value={age}
                 onChange={handleChange}
                 input={<OutlinedInput label="Age" />}
diff --git a/docs/data/material/components/selects/GroupedSelect.js b/docs/data/material/components/selects/GroupedSelect.js
index 8b30bed2ce59cf..3bab115a72ce57 100644
--- a/docs/data/material/components/selects/GroupedSelect.js
+++ b/docs/data/material/components/selects/GroupedSelect.js
@@ -1,3 +1,4 @@
+import * as React from 'react';
 import InputLabel from '@mui/material/InputLabel';
 import MenuItem from '@mui/material/MenuItem';
 import ListSubheader from '@mui/material/ListSubheader';
@@ -5,11 +6,13 @@ import FormControl from '@mui/material/FormControl';
 import Select from '@mui/material/Select';
 
 export default function GroupedSelect() {
+  const nativeId = React.useId();
+  const id = React.useId();
   return (
     <div>
       <FormControl sx={{ m: 1, minWidth: 120 }}>
-        <InputLabel htmlFor="grouped-native-select">Grouping</InputLabel>
-        <Select native defaultValue="" id="grouped-native-select" label="Grouping">
+        <InputLabel htmlFor={`${nativeId}-select`}>Grouping</InputLabel>
+        <Select native defaultValue="" id={`${nativeId}-select`} label="Grouping">
           <option aria-label="None" value="" />
           <optgroup label="Category 1">
             <option value={1}>Option 1</option>
@@ -22,15 +25,15 @@ export default function GroupedSelect() {
         </Select>
       </FormControl>
       <FormControl sx={{ m: 1, minWidth: 120 }}>
-        <InputLabel id="grouped-select-label" htmlFor="grouped-select">
+        <InputLabel id={`${id}-label`} htmlFor={`${id}-select`}>
           Grouping
         </InputLabel>
         <Select
           defaultValue=""
-          id="grouped-select"
+          id={`${id}-select`}
           label="Grouping"
           SelectDisplayProps={{
-            'aria-labelledby': 'grouped-select-label',
+            'aria-labelledby': `${id}-label`,
           }}
         >
           <MenuItem value="">
diff --git a/docs/data/material/components/selects/GroupedSelect.tsx b/docs/data/material/components/selects/GroupedSelect.tsx
index 8b30bed2ce59cf..3bab115a72ce57 100644
--- a/docs/data/material/components/selects/GroupedSelect.tsx
+++ b/docs/data/material/components/selects/GroupedSelect.tsx
@@ -1,3 +1,4 @@
+import * as React from 'react';
 import InputLabel from '@mui/material/InputLabel';
 import MenuItem from '@mui/material/MenuItem';
 import ListSubheader from '@mui/material/ListSubheader';
@@ -5,11 +6,13 @@ import FormControl from '@mui/material/FormControl';
 import Select from '@mui/material/Select';
 
 export default function GroupedSelect() {
+  const nativeId = React.useId();
+  const id = React.useId();
   return (
     <div>
       <FormControl sx={{ m: 1, minWidth: 120 }}>
-        <InputLabel htmlFor="grouped-native-select">Grouping</InputLabel>
-        <Select native defaultValue="" id="grouped-native-select" label="Grouping">
+        <InputLabel htmlFor={`${nativeId}-select`}>Grouping</InputLabel>
+        <Select native defaultValue="" id={`${nativeId}-select`} label="Grouping">
           <option aria-label="None" value="" />
           <optgroup label="Category 1">
             <option value={1}>Option 1</option>
@@ -22,15 +25,15 @@ export default function GroupedSelect() {
         </Select>
       </FormControl>
       <FormControl sx={{ m: 1, minWidth: 120 }}>
-        <InputLabel id="grouped-select-label" htmlFor="grouped-select">
+        <InputLabel id={`${id}-label`} htmlFor={`${id}-select`}>
           Grouping
         </InputLabel>
         <Select
           defaultValue=""
-          id="grouped-select"
+          id={`${id}-select`}
           label="Grouping"
           SelectDisplayProps={{
-            'aria-labelledby': 'grouped-select-label',
+            'aria-labelledby': `${id}-label`,
           }}
         >
           <MenuItem value="">
diff --git a/docs/data/material/components/selects/MultipleSelectNative.js b/docs/data/material/components/selects/MultipleSelectNative.js
index 8fbdc15dc5502d..f89e64d6d3942c 100644
--- a/docs/data/material/components/selects/MultipleSelectNative.js
+++ b/docs/data/material/components/selects/MultipleSelectNative.js
@@ -17,6 +17,7 @@ const names = [
 ];
 
 export default function MultipleSelectNative() {
+  const id = React.useId();
   const [personName, setPersonName] = React.useState([]);
   const handleChangeMultiple = (event) => {
     const { options } = event.target;
@@ -32,7 +33,7 @@ export default function MultipleSelectNative() {
   return (
     <div>
       <FormControl sx={{ m: 1, minWidth: 120, maxWidth: 300 }}>
-        <InputLabel shrink htmlFor="select-multiple-native">
+        <InputLabel shrink htmlFor={`${id}-select`}>
           Native
         </InputLabel>
         <Select
@@ -42,7 +43,7 @@ export default function MultipleSelectNative() {
           onChange={handleChangeMultiple}
           label="Native"
           inputProps={{
-            id: 'select-multiple-native',
+            id: `${id}-select`,
           }}
         >
           {names.map((name) => (
diff --git a/docs/data/material/components/selects/MultipleSelectNative.tsx b/docs/data/material/components/selects/MultipleSelectNative.tsx
index 6960536ac9cbe6..c3d217b37d5f94 100644
--- a/docs/data/material/components/selects/MultipleSelectNative.tsx
+++ b/docs/data/material/components/selects/MultipleSelectNative.tsx
@@ -17,6 +17,7 @@ const names = [
 ];
 
 export default function MultipleSelectNative() {
+  const id = React.useId();
   const [personName, setPersonName] = React.useState<string[]>([]);
   const handleChangeMultiple = (event: React.ChangeEvent<HTMLSelectElement>) => {
     const { options } = event.target;
@@ -32,7 +33,7 @@ export default function MultipleSelectNative() {
   return (
     <div>
       <FormControl sx={{ m: 1, minWidth: 120, maxWidth: 300 }}>
-        <InputLabel shrink htmlFor="select-multiple-native">
+        <InputLabel shrink htmlFor={`${id}-select`}>
           Native
         </InputLabel>
         <Select<string[]>
@@ -43,7 +44,7 @@ export default function MultipleSelectNative() {
           onChange={handleChangeMultiple}
           label="Native"
           inputProps={{
-            id: 'select-multiple-native',
+            id: `${id}-select`,
           }}
         >
           {names.map((name) => (
diff --git a/docs/data/material/components/selects/NativeSelectDemo.js b/docs/data/material/components/selects/NativeSelectDemo.js
index 987d5331191aec..8ffbec6206cc5b 100644
--- a/docs/data/material/components/selects/NativeSelectDemo.js
+++ b/docs/data/material/components/selects/NativeSelectDemo.js
@@ -1,20 +1,22 @@
+import * as React from 'react';
 import Box from '@mui/material/Box';
 import InputLabel from '@mui/material/InputLabel';
 import FormControl from '@mui/material/FormControl';
 import NativeSelect from '@mui/material/NativeSelect';
 
 export default function NativeSelectDemo() {
+  const id = React.useId();
   return (
     <Box sx={{ minWidth: 120 }}>
       <FormControl fullWidth>
-        <InputLabel variant="standard" htmlFor="uncontrolled-native">
+        <InputLabel variant="standard" htmlFor={`${id}-select`}>
           Age
         </InputLabel>
         <NativeSelect
           defaultValue={30}
           inputProps={{
             name: 'age',
-            id: 'uncontrolled-native',
+            id: `${id}-select`,
           }}
         >
           <option value={10}>Ten</option>
diff --git a/docs/data/material/components/selects/NativeSelectDemo.tsx b/docs/data/material/components/selects/NativeSelectDemo.tsx
index 987d5331191aec..8ffbec6206cc5b 100644
--- a/docs/data/material/components/selects/NativeSelectDemo.tsx
+++ b/docs/data/material/components/selects/NativeSelectDemo.tsx
@@ -1,20 +1,22 @@
+import * as React from 'react';
 import Box from '@mui/material/Box';
 import InputLabel from '@mui/material/InputLabel';
 import FormControl from '@mui/material/FormControl';
 import NativeSelect from '@mui/material/NativeSelect';
 
 export default function NativeSelectDemo() {
+  const id = React.useId();
   return (
     <Box sx={{ minWidth: 120 }}>
       <FormControl fullWidth>
-        <InputLabel variant="standard" htmlFor="uncontrolled-native">
+        <InputLabel variant="standard" htmlFor={`${id}-select`}>
           Age
         </InputLabel>
         <NativeSelect
           defaultValue={30}
           inputProps={{
             name: 'age',
-            id: 'uncontrolled-native',
+            id: `${id}-select`,
           }}
         >
           <option value={10}>Ten</option>
diff --git a/docs/data/material/components/selects/NativeSelectDemo.tsx.preview b/docs/data/material/components/selects/NativeSelectDemo.tsx.preview
index 06e9c633c337fa..c6ef912aff766b 100644
--- a/docs/data/material/components/selects/NativeSelectDemo.tsx.preview
+++ b/docs/data/material/components/selects/NativeSelectDemo.tsx.preview
@@ -1,12 +1,12 @@
 <FormControl fullWidth>
-  <InputLabel variant="standard" htmlFor="uncontrolled-native">
+  <InputLabel variant="standard" htmlFor={`${id}-select`}>
     Age
   </InputLabel>
   <NativeSelect
     defaultValue={30}
     inputProps={{
       name: 'age',
-      id: 'uncontrolled-native',
+      id: `${id}-select`,
     }}
   >
     <option value={10}>Ten</option>
diff --git a/docs/data/material/components/selects/SelectLabels.js b/docs/data/material/components/selects/SelectLabels.js
index 23b2aa0a3c76d4..8078421b06cca1 100644
--- a/docs/data/material/components/selects/SelectLabels.js
+++ b/docs/data/material/components/selects/SelectLabels.js
@@ -6,6 +6,8 @@ import FormControl from '@mui/material/FormControl';
 import Select from '@mui/material/Select';
 
 export default function SelectLabels() {
+  const id = React.useId();
+  const noLabelId = React.useId();
   const [age, setAge] = React.useState('');
 
   const handleChange = (event) => {
@@ -15,11 +17,11 @@ export default function SelectLabels() {
   return (
     <div>
       <FormControl sx={{ m: 1, minWidth: 120 }}>
-        <InputLabel id="demo-simple-select-helper-label">Age</InputLabel>
+        <InputLabel id={`${id}-label`}>Age</InputLabel>
         <Select
-          aria-describedby="demo-simple-select-helper-text"
-          labelId="demo-simple-select-helper-label"
-          id="demo-simple-select-helper"
+          aria-describedby={`${id}-helper-text`}
+          labelId={`${id}-label`}
+          id={id}
           value={age}
           label="Age"
           onChange={handleChange}
@@ -31,13 +33,13 @@ export default function SelectLabels() {
           <MenuItem value={20}>Twenty</MenuItem>
           <MenuItem value={30}>Thirty</MenuItem>
         </Select>
-        <FormHelperText id="demo-simple-select-helper-text">
+        <FormHelperText id={`${id}-helper-text`}>
           Visible label and helper text
         </FormHelperText>
       </FormControl>
       <FormControl sx={{ m: 1, minWidth: 120 }}>
         <Select
-          aria-describedby="demo-no-label-select-helper-text"
+          aria-describedby={`${noLabelId}-helper-text`}
           value={age}
           onChange={handleChange}
           displayEmpty
@@ -50,7 +52,7 @@ export default function SelectLabels() {
           <MenuItem value={20}>Twenty</MenuItem>
           <MenuItem value={30}>Thirty</MenuItem>
         </Select>
-        <FormHelperText id="demo-no-label-select-helper-text">
+        <FormHelperText id={`${noLabelId}-helper-text`}>
           aria-label and helper text
         </FormHelperText>
       </FormControl>
diff --git a/docs/data/material/components/selects/SelectLabels.tsx b/docs/data/material/components/selects/SelectLabels.tsx
index 8601c4455ece90..e5ca89ea7dd93d 100644
--- a/docs/data/material/components/selects/SelectLabels.tsx
+++ b/docs/data/material/components/selects/SelectLabels.tsx
@@ -6,6 +6,8 @@ import FormControl from '@mui/material/FormControl';
 import Select, { SelectChangeEvent } from '@mui/material/Select';
 
 export default function SelectLabels() {
+  const id = React.useId();
+  const noLabelId = React.useId();
   const [age, setAge] = React.useState('');
 
   const handleChange = (event: SelectChangeEvent) => {
@@ -15,11 +17,11 @@ export default function SelectLabels() {
   return (
     <div>
       <FormControl sx={{ m: 1, minWidth: 120 }}>
-        <InputLabel id="demo-simple-select-helper-label">Age</InputLabel>
+        <InputLabel id={`${id}-label`}>Age</InputLabel>
         <Select
-          aria-describedby="demo-simple-select-helper-text"
-          labelId="demo-simple-select-helper-label"
-          id="demo-simple-select-helper"
+          aria-describedby={`${id}-helper-text`}
+          labelId={`${id}-label`}
+          id={id}
           value={age}
           label="Age"
           onChange={handleChange}
@@ -31,13 +33,13 @@ export default function SelectLabels() {
           <MenuItem value={20}>Twenty</MenuItem>
           <MenuItem value={30}>Thirty</MenuItem>
         </Select>
-        <FormHelperText id="demo-simple-select-helper-text">
+        <FormHelperText id={`${id}-helper-text`}>
           Visible label and helper text
         </FormHelperText>
       </FormControl>
       <FormControl sx={{ m: 1, minWidth: 120 }}>
         <Select
-          aria-describedby="demo-no-label-select-helper-text"
+          aria-describedby={`${noLabelId}-helper-text`}
           value={age}
           onChange={handleChange}
           displayEmpty
@@ -50,7 +52,7 @@ export default function SelectLabels() {
           <MenuItem value={20}>Twenty</MenuItem>
           <MenuItem value={30}>Thirty</MenuItem>
         </Select>
-        <FormHelperText id="demo-no-label-select-helper-text">
+        <FormHelperText id={`${noLabelId}-helper-text`}>
           aria-label and helper text
         </FormHelperText>
       </FormControl>
diff --git a/docs/data/material/components/slider/TrackFalseSlider.js b/docs/data/material/components/slider/TrackFalseSlider.js
index bcd06c4f8183e4..d9923a1adcb930 100644
--- a/docs/data/material/components/slider/TrackFalseSlider.js
+++ b/docs/data/material/components/slider/TrackFalseSlider.js
@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { styled } from '@mui/material/styles';
 import Box from '@mui/material/Box';
 import Typography from '@mui/material/Typography';
@@ -33,25 +34,27 @@ function valuetext(value) {
 }
 
 export default function TrackFalseSlider() {
+  const id = React.useId();
+  const rangeId = React.useId();
   return (
     <Box sx={{ width: 250 }}>
-      <Typography id="track-false-slider" gutterBottom>
+      <Typography id={`${id}-label`} gutterBottom>
         Removed track
       </Typography>
       <Slider
         track={false}
-        aria-labelledby="track-false-slider"
+        aria-labelledby={`${id}-label`}
         getAriaValueText={valuetext}
         defaultValue={30}
         marks={marks}
       />
       <Separator />
-      <Typography id="track-false-range-slider" gutterBottom>
+      <Typography id={`${rangeId}-label`} gutterBottom>
         Removed track range slider
       </Typography>
       <Slider
         track={false}
-        aria-labelledby="track-false-range-slider"
+        aria-labelledby={`${rangeId}-label`}
         getAriaValueText={valuetext}
         defaultValue={[20, 37, 50]}
         marks={marks}
diff --git a/docs/data/material/components/slider/TrackFalseSlider.tsx b/docs/data/material/components/slider/TrackFalseSlider.tsx
index cb7c685b6824a0..06ccb2f9cd7a49 100644
--- a/docs/data/material/components/slider/TrackFalseSlider.tsx
+++ b/docs/data/material/components/slider/TrackFalseSlider.tsx
@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { styled } from '@mui/material/styles';
 import Box from '@mui/material/Box';
 import Typography from '@mui/material/Typography';
@@ -33,25 +34,27 @@ function valuetext(value: number) {
 }
 
 export default function TrackFalseSlider() {
+  const id = React.useId();
+  const rangeId = React.useId();
   return (
     <Box sx={{ width: 250 }}>
-      <Typography id="track-false-slider" gutterBottom>
+      <Typography id={`${id}-label`} gutterBottom>
         Removed track
       </Typography>
       <Slider
         track={false}
-        aria-labelledby="track-false-slider"
+        aria-labelledby={`${id}-label`}
         getAriaValueText={valuetext}
         defaultValue={30}
         marks={marks}
       />
       <Separator />
-      <Typography id="track-false-range-slider" gutterBottom>
+      <Typography id={`${rangeId}-label`} gutterBottom>
         Removed track range slider
       </Typography>
       <Slider
         track={false}
-        aria-labelledby="track-false-range-slider"
+        aria-labelledby={`${rangeId}-label`}
         getAriaValueText={valuetext}
         defaultValue={[20, 37, 50]}
         marks={marks}
diff --git a/docs/data/material/components/text-fields/ComposedTextField.js b/docs/data/material/components/text-fields/ComposedTextField.js
index 98c9838efdc141..aebda7e1aaa5db 100644
--- a/docs/data/material/components/text-fields/ComposedTextField.js
+++ b/docs/data/material/components/text-fields/ComposedTextField.js
@@ -1,3 +1,4 @@
+import * as React from 'react';
 import Box from '@mui/material/Box';
 import FilledInput from '@mui/material/FilledInput';
 import FormControl from '@mui/material/FormControl';
@@ -7,6 +8,12 @@ import InputLabel from '@mui/material/InputLabel';
 import OutlinedInput from '@mui/material/OutlinedInput';
 
 export default function ComposedTextField() {
+  const simpleId = React.useId();
+  const helperId = React.useId();
+  const disabledId = React.useId();
+  const errorId = React.useId();
+  const outlinedId = React.useId();
+  const filledId = React.useId();
   return (
     <Box
       component="form"
@@ -15,45 +22,45 @@ export default function ComposedTextField() {
       autoComplete="off"
     >
       <FormControl variant="standard">
-        <InputLabel htmlFor="component-simple">Name</InputLabel>
-        <Input id="component-simple" defaultValue="Composed TextField" />
+        <InputLabel htmlFor={`${simpleId}-input`}>Name</InputLabel>
+        <Input id={`${simpleId}-input`} defaultValue="Composed TextField" />
       </FormControl>
       <FormControl variant="standard">
-        <InputLabel htmlFor="component-helper">Name</InputLabel>
+        <InputLabel htmlFor={`${helperId}-input`}>Name</InputLabel>
         <Input
-          id="component-helper"
+          id={`${helperId}-input`}
           defaultValue="Composed TextField"
-          aria-describedby="component-helper-text"
+          aria-describedby={`${helperId}-helper-text`}
         />
-        <FormHelperText id="component-helper-text">
+        <FormHelperText id={`${helperId}-helper-text`}>
           Some important helper text
         </FormHelperText>
       </FormControl>
       <FormControl disabled variant="standard">
-        <InputLabel htmlFor="component-disabled">Name</InputLabel>
-        <Input id="component-disabled" defaultValue="Composed TextField" />
+        <InputLabel htmlFor={`${disabledId}-input`}>Name</InputLabel>
+        <Input id={`${disabledId}-input`} defaultValue="Composed TextField" />
         <FormHelperText>Disabled</FormHelperText>
       </FormControl>
       <FormControl error variant="standard">
-        <InputLabel htmlFor="component-error">Name</InputLabel>
+        <InputLabel htmlFor={`${errorId}-input`}>Name</InputLabel>
         <Input
-          id="component-error"
+          id={`${errorId}-input`}
           defaultValue="Composed TextField"
-          aria-describedby="component-error-text"
+          aria-describedby={`${errorId}-error-text`}
         />
-        <FormHelperText id="component-error-text">Error</FormHelperText>
+        <FormHelperText id={`${errorId}-error-text`}>Error</FormHelperText>
       </FormControl>
       <FormControl>
-        <InputLabel htmlFor="component-outlined">Name</InputLabel>
+        <InputLabel htmlFor={`${outlinedId}-input`}>Name</InputLabel>
         <OutlinedInput
-          id="component-outlined"
+          id={`${outlinedId}-input`}
           defaultValue="Composed TextField"
           label="Name"
         />
       </FormControl>
       <FormControl variant="filled">
-        <InputLabel htmlFor="component-filled">Name</InputLabel>
-        <FilledInput id="component-filled" defaultValue="Composed TextField" />
+        <InputLabel htmlFor={`${filledId}-input`}>Name</InputLabel>
+        <FilledInput id={`${filledId}-input`} defaultValue="Composed TextField" />
       </FormControl>
     </Box>
   );
diff --git a/docs/data/material/components/text-fields/ComposedTextField.tsx b/docs/data/material/components/text-fields/ComposedTextField.tsx
index 98c9838efdc141..aebda7e1aaa5db 100644
--- a/docs/data/material/components/text-fields/ComposedTextField.tsx
+++ b/docs/data/material/components/text-fields/ComposedTextField.tsx
@@ -1,3 +1,4 @@
+import * as React from 'react';
 import Box from '@mui/material/Box';
 import FilledInput from '@mui/material/FilledInput';
 import FormControl from '@mui/material/FormControl';
@@ -7,6 +8,12 @@ import InputLabel from '@mui/material/InputLabel';
 import OutlinedInput from '@mui/material/OutlinedInput';
 
 export default function ComposedTextField() {
+  const simpleId = React.useId();
+  const helperId = React.useId();
+  const disabledId = React.useId();
+  const errorId = React.useId();
+  const outlinedId = React.useId();
+  const filledId = React.useId();
   return (
     <Box
       component="form"
@@ -15,45 +22,45 @@ export default function ComposedTextField() {
       autoComplete="off"
     >
       <FormControl variant="standard">
-        <InputLabel htmlFor="component-simple">Name</InputLabel>
-        <Input id="component-simple" defaultValue="Composed TextField" />
+        <InputLabel htmlFor={`${simpleId}-input`}>Name</InputLabel>
+        <Input id={`${simpleId}-input`} defaultValue="Composed TextField" />
       </FormControl>
       <FormControl variant="standard">
-        <InputLabel htmlFor="component-helper">Name</InputLabel>
+        <InputLabel htmlFor={`${helperId}-input`}>Name</InputLabel>
         <Input
-          id="component-helper"
+          id={`${helperId}-input`}
           defaultValue="Composed TextField"
-          aria-describedby="component-helper-text"
+          aria-describedby={`${helperId}-helper-text`}
         />
-        <FormHelperText id="component-helper-text">
+        <FormHelperText id={`${helperId}-helper-text`}>
           Some important helper text
         </FormHelperText>
       </FormControl>
       <FormControl disabled variant="standard">
-        <InputLabel htmlFor="component-disabled">Name</InputLabel>
-        <Input id="component-disabled" defaultValue="Composed TextField" />
+        <InputLabel htmlFor={`${disabledId}-input`}>Name</InputLabel>
+        <Input id={`${disabledId}-input`} defaultValue="Composed TextField" />
         <FormHelperText>Disabled</FormHelperText>
       </FormControl>
       <FormControl error variant="standard">
-        <InputLabel htmlFor="component-error">Name</InputLabel>
+        <InputLabel htmlFor={`${errorId}-input`}>Name</InputLabel>
         <Input
-          id="component-error"
+          id={`${errorId}-input`}
           defaultValue="Composed TextField"
-          aria-describedby="component-error-text"
+          aria-describedby={`${errorId}-error-text`}
         />
-        <FormHelperText id="component-error-text">Error</FormHelperText>
+        <FormHelperText id={`${errorId}-error-text`}>Error</FormHelperText>
       </FormControl>
       <FormControl>
-        <InputLabel htmlFor="component-outlined">Name</InputLabel>
+        <InputLabel htmlFor={`${outlinedId}-input`}>Name</InputLabel>
         <OutlinedInput
-          id="component-outlined"
+          id={`${outlinedId}-input`}
           defaultValue="Composed TextField"
           label="Name"
         />
       </FormControl>
       <FormControl variant="filled">
-        <InputLabel htmlFor="component-filled">Name</InputLabel>
-        <FilledInput id="component-filled" defaultValue="Composed TextField" />
+        <InputLabel htmlFor={`${filledId}-input`}>Name</InputLabel>
+        <FilledInput id={`${filledId}-input`} defaultValue="Composed TextField" />
       </FormControl>
     </Box>
   );
diff --git a/docs/data/material/components/text-fields/CustomizedInputsStyled.js b/docs/data/material/components/text-fields/CustomizedInputsStyled.js
index c4dc7d74aa0892..f28c3712d10245 100644
--- a/docs/data/material/components/text-fields/CustomizedInputsStyled.js
+++ b/docs/data/material/components/text-fields/CustomizedInputsStyled.js
@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { alpha, styled } from '@mui/material/styles';
 import InputBase from '@mui/material/InputBase';
 import Box from '@mui/material/Box';
@@ -117,6 +118,10 @@ const ValidationTextField = styled(TextField)({
 });
 
 export default function CustomizedInputsStyled() {
+  const bootstrapId = React.useId();
+  const redditId = React.useId();
+  const cssId = React.useId();
+  const validationId = React.useId();
   return (
     <Box
       component="form"
@@ -124,25 +129,25 @@ export default function CustomizedInputsStyled() {
       sx={{ display: 'grid', gridTemplateColumns: { sm: '1fr 1fr' }, gap: 2 }}
     >
       <FormControl variant="standard">
-        <InputLabel shrink htmlFor="bootstrap-input">
+        <InputLabel shrink htmlFor={`${bootstrapId}-input`}>
           Bootstrap
         </InputLabel>
-        <BootstrapInput defaultValue="react-bootstrap" id="bootstrap-input" />
+        <BootstrapInput defaultValue="react-bootstrap" id={`${bootstrapId}-input`} />
       </FormControl>
       <RedditTextField
         label="Reddit"
         defaultValue="react-reddit"
-        id="reddit-input"
+        id={`${redditId}-input`}
         variant="filled"
         style={{ marginTop: 11 }}
       />
-      <CssTextField label="Custom CSS" id="custom-css-outlined-input" />
+      <CssTextField label="Custom CSS" id={`${cssId}-input`} />
       <ValidationTextField
         label="CSS validation style"
         required
         variant="outlined"
         defaultValue="Success"
-        id="validation-outlined-input"
+        id={`${validationId}-input`}
       />
     </Box>
   );
diff --git a/docs/data/material/components/text-fields/CustomizedInputsStyled.tsx b/docs/data/material/components/text-fields/CustomizedInputsStyled.tsx
index 4b89813643147e..2975d2e5732163 100644
--- a/docs/data/material/components/text-fields/CustomizedInputsStyled.tsx
+++ b/docs/data/material/components/text-fields/CustomizedInputsStyled.tsx
@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { alpha, styled } from '@mui/material/styles';
 import InputBase from '@mui/material/InputBase';
 import Box from '@mui/material/Box';
@@ -118,6 +119,10 @@ const ValidationTextField = styled(TextField)({
 });
 
 export default function CustomizedInputsStyled() {
+  const bootstrapId = React.useId();
+  const redditId = React.useId();
+  const cssId = React.useId();
+  const validationId = React.useId();
   return (
     <Box
       component="form"
@@ -125,25 +130,25 @@ export default function CustomizedInputsStyled() {
       sx={{ display: 'grid', gridTemplateColumns: { sm: '1fr 1fr' }, gap: 2 }}
     >
       <FormControl variant="standard">
-        <InputLabel shrink htmlFor="bootstrap-input">
+        <InputLabel shrink htmlFor={`${bootstrapId}-input`}>
           Bootstrap
         </InputLabel>
-        <BootstrapInput defaultValue="react-bootstrap" id="bootstrap-input" />
+        <BootstrapInput defaultValue="react-bootstrap" id={`${bootstrapId}-input`} />
       </FormControl>
       <RedditTextField
         label="Reddit"
         defaultValue="react-reddit"
-        id="reddit-input"
+        id={`${redditId}-input`}
         variant="filled"
         style={{ marginTop: 11 }}
       />
-      <CssTextField label="Custom CSS" id="custom-css-outlined-input" />
+      <CssTextField label="Custom CSS" id={`${cssId}-input`} />
       <ValidationTextField
         label="CSS validation style"
         required
         variant="outlined"
         defaultValue="Success"
-        id="validation-outlined-input"
+        id={`${validationId}-input`}
       />
     </Box>
   );
diff --git a/docs/data/material/components/text-fields/FormattedInputs.js b/docs/data/material/components/text-fields/FormattedInputs.js
index ec38e31c7675b5..10303fbb6905e9 100644
--- a/docs/data/material/components/text-fields/FormattedInputs.js
+++ b/docs/data/material/components/text-fields/FormattedInputs.js
@@ -30,6 +30,7 @@ TextMaskCustom.propTypes = {
 };
 
 export default function FormattedInputs() {
+  const id = React.useId();
   const [values, setValues] = React.useState({
     textmask: '(100) 000-0000',
     numberformat: '1320',
@@ -45,12 +46,12 @@ export default function FormattedInputs() {
   return (
     <Stack direction="row" spacing={2}>
       <FormControl variant="standard">
-        <InputLabel htmlFor="formatted-text-mask-input">react-imask</InputLabel>
+        <InputLabel htmlFor={`${id}-input`}>react-imask</InputLabel>
         <Input
           value={values.textmask}
           onChange={handleChange}
           name="textmask"
-          id="formatted-text-mask-input"
+          id={`${id}-input`}
           inputComponent={TextMaskCustom}
         />
       </FormControl>
diff --git a/docs/data/material/components/text-fields/FormattedInputs.tsx b/docs/data/material/components/text-fields/FormattedInputs.tsx
index 21ff7f5172e530..e57b0141244f52 100644
--- a/docs/data/material/components/text-fields/FormattedInputs.tsx
+++ b/docs/data/material/components/text-fields/FormattedInputs.tsx
@@ -31,6 +31,7 @@ const TextMaskCustom = React.forwardRef<HTMLInputElement, CustomProps>(
 );
 
 export default function FormattedInputs() {
+  const id = React.useId();
   const [values, setValues] = React.useState({
     textmask: '(100) 000-0000',
     numberformat: '1320',
@@ -46,12 +47,12 @@ export default function FormattedInputs() {
   return (
     <Stack direction="row" spacing={2}>
       <FormControl variant="standard">
-        <InputLabel htmlFor="formatted-text-mask-input">react-imask</InputLabel>
+        <InputLabel htmlFor={`${id}-input`}>react-imask</InputLabel>
         <Input
           value={values.textmask}
           onChange={handleChange}
           name="textmask"
-          id="formatted-text-mask-input"
+          id={`${id}-input`}
           inputComponent={TextMaskCustom as any}
         />
       </FormControl>
diff --git a/docs/data/material/components/text-fields/InputAdornments.js b/docs/data/material/components/text-fields/InputAdornments.js
index 6827769521ffae..e773612be5d91e 100644
--- a/docs/data/material/components/text-fields/InputAdornments.js
+++ b/docs/data/material/components/text-fields/InputAdornments.js
@@ -13,6 +13,18 @@ import Visibility from '@mui/icons-material/Visibility';
 import VisibilityOff from '@mui/icons-material/VisibilityOff';
 
 export default function InputAdornments() {
+  const outlinedStartId = React.useId();
+  const outlinedWeightId = React.useId();
+  const outlinedPasswordId = React.useId();
+  const outlinedAmountId = React.useId();
+  const filledStartId = React.useId();
+  const filledWeightId = React.useId();
+  const filledPasswordId = React.useId();
+  const filledAmountId = React.useId();
+  const standardStartId = React.useId();
+  const standardWeightId = React.useId();
+  const standardPasswordId = React.useId();
+  const standardAmountId = React.useId();
   const [showPassword, setShowPassword] = React.useState(false);
 
   const handleClickShowPassword = () => setShowPassword((show) => !show);
@@ -30,7 +42,7 @@ export default function InputAdornments() {
       <div>
         <TextField
           label="With normal TextField"
-          id="outlined-start-adornment"
+          id={`${outlinedStartId}-input`}
           sx={{ m: 1, width: '25ch' }}
           slotProps={{
             input: {
@@ -40,19 +52,21 @@ export default function InputAdornments() {
         />
         <FormControl sx={{ m: 1, width: '25ch' }} variant="outlined">
           <OutlinedInput
-            id="outlined-adornment-weight"
+            id={`${outlinedWeightId}-input`}
             endAdornment={<InputAdornment position="end">kg</InputAdornment>}
-            aria-describedby="outlined-weight-helper-text"
+            aria-describedby={`${outlinedWeightId}-helper-text`}
             inputProps={{
               'aria-label': 'weight',
             }}
           />
-          <FormHelperText id="outlined-weight-helper-text">Weight</FormHelperText>
+          <FormHelperText id={`${outlinedWeightId}-helper-text`}>
+            Weight
+          </FormHelperText>
         </FormControl>
         <FormControl sx={{ m: 1, width: '25ch' }} variant="outlined">
-          <InputLabel htmlFor="outlined-adornment-password">Password</InputLabel>
+          <InputLabel htmlFor={`${outlinedPasswordId}-input`}>Password</InputLabel>
           <OutlinedInput
-            id="outlined-adornment-password"
+            id={`${outlinedPasswordId}-input`}
             type={showPassword ? 'text' : 'password'}
             endAdornment={
               <InputAdornment position="end">
@@ -73,9 +87,9 @@ export default function InputAdornments() {
           />
         </FormControl>
         <FormControl fullWidth sx={{ m: 1 }}>
-          <InputLabel htmlFor="outlined-adornment-amount">Amount</InputLabel>
+          <InputLabel htmlFor={`${outlinedAmountId}-input`}>Amount</InputLabel>
           <OutlinedInput
-            id="outlined-adornment-amount"
+            id={`${outlinedAmountId}-input`}
             startAdornment={<InputAdornment position="start">$</InputAdornment>}
             label="Amount"
           />
@@ -84,7 +98,7 @@ export default function InputAdornments() {
       <div>
         <TextField
           label="With normal TextField"
-          id="filled-start-adornment"
+          id={`${filledStartId}-input`}
           sx={{ m: 1, width: '25ch' }}
           slotProps={{
             input: {
@@ -95,19 +109,21 @@ export default function InputAdornments() {
         />
         <FormControl sx={{ m: 1, width: '25ch' }} variant="filled">
           <FilledInput
-            id="filled-adornment-weight"
+            id={`${filledWeightId}-input`}
             endAdornment={<InputAdornment position="end">kg</InputAdornment>}
-            aria-describedby="filled-weight-helper-text"
+            aria-describedby={`${filledWeightId}-helper-text`}
             inputProps={{
               'aria-label': 'weight',
             }}
           />
-          <FormHelperText id="filled-weight-helper-text">Weight</FormHelperText>
+          <FormHelperText id={`${filledWeightId}-helper-text`}>
+            Weight
+          </FormHelperText>
         </FormControl>
         <FormControl sx={{ m: 1, width: '25ch' }} variant="filled">
-          <InputLabel htmlFor="filled-adornment-password">Password</InputLabel>
+          <InputLabel htmlFor={`${filledPasswordId}-input`}>Password</InputLabel>
           <FilledInput
-            id="filled-adornment-password"
+            id={`${filledPasswordId}-input`}
             type={showPassword ? 'text' : 'password'}
             endAdornment={
               <InputAdornment position="end">
@@ -127,9 +143,9 @@ export default function InputAdornments() {
           />
         </FormControl>
         <FormControl fullWidth sx={{ m: 1 }} variant="filled">
-          <InputLabel htmlFor="filled-adornment-amount">Amount</InputLabel>
+          <InputLabel htmlFor={`${filledAmountId}-input`}>Amount</InputLabel>
           <FilledInput
-            id="filled-adornment-amount"
+            id={`${filledAmountId}-input`}
             startAdornment={<InputAdornment position="start">$</InputAdornment>}
           />
         </FormControl>
@@ -137,7 +153,7 @@ export default function InputAdornments() {
       <div>
         <TextField
           label="With normal TextField"
-          id="standard-start-adornment"
+          id={`${standardStartId}-input`}
           sx={{ m: 1, width: '25ch' }}
           slotProps={{
             input: {
@@ -148,19 +164,21 @@ export default function InputAdornments() {
         />
         <FormControl variant="standard" sx={{ m: 1, mt: 3, width: '25ch' }}>
           <Input
-            id="standard-adornment-weight"
+            id={`${standardWeightId}-input`}
             endAdornment={<InputAdornment position="end">kg</InputAdornment>}
-            aria-describedby="standard-weight-helper-text"
+            aria-describedby={`${standardWeightId}-helper-text`}
             inputProps={{
               'aria-label': 'weight',
             }}
           />
-          <FormHelperText id="standard-weight-helper-text">Weight</FormHelperText>
+          <FormHelperText id={`${standardWeightId}-helper-text`}>
+            Weight
+          </FormHelperText>
         </FormControl>
         <FormControl sx={{ m: 1, width: '25ch' }} variant="standard">
-          <InputLabel htmlFor="standard-adornment-password">Password</InputLabel>
+          <InputLabel htmlFor={`${standardPasswordId}-input`}>Password</InputLabel>
           <Input
-            id="standard-adornment-password"
+            id={`${standardPasswordId}-input`}
             type={showPassword ? 'text' : 'password'}
             endAdornment={
               <InputAdornment position="end">
@@ -179,9 +197,9 @@ export default function InputAdornments() {
           />
         </FormControl>
         <FormControl fullWidth sx={{ m: 1 }} variant="standard">
-          <InputLabel htmlFor="standard-adornment-amount">Amount</InputLabel>
+          <InputLabel htmlFor={`${standardAmountId}-input`}>Amount</InputLabel>
           <Input
-            id="standard-adornment-amount"
+            id={`${standardAmountId}-input`}
             startAdornment={<InputAdornment position="start">$</InputAdornment>}
           />
         </FormControl>
diff --git a/docs/data/material/components/text-fields/InputAdornments.tsx b/docs/data/material/components/text-fields/InputAdornments.tsx
index 64cbceb4b63176..deb539b0708e8b 100644
--- a/docs/data/material/components/text-fields/InputAdornments.tsx
+++ b/docs/data/material/components/text-fields/InputAdornments.tsx
@@ -13,6 +13,18 @@ import Visibility from '@mui/icons-material/Visibility';
 import VisibilityOff from '@mui/icons-material/VisibilityOff';
 
 export default function InputAdornments() {
+  const outlinedStartId = React.useId();
+  const outlinedWeightId = React.useId();
+  const outlinedPasswordId = React.useId();
+  const outlinedAmountId = React.useId();
+  const filledStartId = React.useId();
+  const filledWeightId = React.useId();
+  const filledPasswordId = React.useId();
+  const filledAmountId = React.useId();
+  const standardStartId = React.useId();
+  const standardWeightId = React.useId();
+  const standardPasswordId = React.useId();
+  const standardAmountId = React.useId();
   const [showPassword, setShowPassword] = React.useState(false);
 
   const handleClickShowPassword = () => setShowPassword((show) => !show);
@@ -30,7 +42,7 @@ export default function InputAdornments() {
       <div>
         <TextField
           label="With normal TextField"
-          id="outlined-start-adornment"
+          id={`${outlinedStartId}-input`}
           sx={{ m: 1, width: '25ch' }}
           slotProps={{
             input: {
@@ -40,19 +52,21 @@ export default function InputAdornments() {
         />
         <FormControl sx={{ m: 1, width: '25ch' }} variant="outlined">
           <OutlinedInput
-            id="outlined-adornment-weight"
+            id={`${outlinedWeightId}-input`}
             endAdornment={<InputAdornment position="end">kg</InputAdornment>}
-            aria-describedby="outlined-weight-helper-text"
+            aria-describedby={`${outlinedWeightId}-helper-text`}
             inputProps={{
               'aria-label': 'weight',
             }}
           />
-          <FormHelperText id="outlined-weight-helper-text">Weight</FormHelperText>
+          <FormHelperText id={`${outlinedWeightId}-helper-text`}>
+            Weight
+          </FormHelperText>
         </FormControl>
         <FormControl sx={{ m: 1, width: '25ch' }} variant="outlined">
-          <InputLabel htmlFor="outlined-adornment-password">Password</InputLabel>
+          <InputLabel htmlFor={`${outlinedPasswordId}-input`}>Password</InputLabel>
           <OutlinedInput
-            id="outlined-adornment-password"
+            id={`${outlinedPasswordId}-input`}
             type={showPassword ? 'text' : 'password'}
             endAdornment={
               <InputAdornment position="end">
@@ -73,9 +87,9 @@ export default function InputAdornments() {
           />
         </FormControl>
         <FormControl fullWidth sx={{ m: 1 }}>
-          <InputLabel htmlFor="outlined-adornment-amount">Amount</InputLabel>
+          <InputLabel htmlFor={`${outlinedAmountId}-input`}>Amount</InputLabel>
           <OutlinedInput
-            id="outlined-adornment-amount"
+            id={`${outlinedAmountId}-input`}
             startAdornment={<InputAdornment position="start">$</InputAdornment>}
             label="Amount"
           />
@@ -84,7 +98,7 @@ export default function InputAdornments() {
       <div>
         <TextField
           label="With normal TextField"
-          id="filled-start-adornment"
+          id={`${filledStartId}-input`}
           sx={{ m: 1, width: '25ch' }}
           slotProps={{
             input: {
@@ -95,19 +109,21 @@ export default function InputAdornments() {
         />
         <FormControl sx={{ m: 1, width: '25ch' }} variant="filled">
           <FilledInput
-            id="filled-adornment-weight"
+            id={`${filledWeightId}-input`}
             endAdornment={<InputAdornment position="end">kg</InputAdornment>}
-            aria-describedby="filled-weight-helper-text"
+            aria-describedby={`${filledWeightId}-helper-text`}
             inputProps={{
               'aria-label': 'weight',
             }}
           />
-          <FormHelperText id="filled-weight-helper-text">Weight</FormHelperText>
+          <FormHelperText id={`${filledWeightId}-helper-text`}>
+            Weight
+          </FormHelperText>
         </FormControl>
         <FormControl sx={{ m: 1, width: '25ch' }} variant="filled">
-          <InputLabel htmlFor="filled-adornment-password">Password</InputLabel>
+          <InputLabel htmlFor={`${filledPasswordId}-input`}>Password</InputLabel>
           <FilledInput
-            id="filled-adornment-password"
+            id={`${filledPasswordId}-input`}
             type={showPassword ? 'text' : 'password'}
             endAdornment={
               <InputAdornment position="end">
@@ -127,9 +143,9 @@ export default function InputAdornments() {
           />
         </FormControl>
         <FormControl fullWidth sx={{ m: 1 }} variant="filled">
-          <InputLabel htmlFor="filled-adornment-amount">Amount</InputLabel>
+          <InputLabel htmlFor={`${filledAmountId}-input`}>Amount</InputLabel>
           <FilledInput
-            id="filled-adornment-amount"
+            id={`${filledAmountId}-input`}
             startAdornment={<InputAdornment position="start">$</InputAdornment>}
           />
         </FormControl>
@@ -137,7 +153,7 @@ export default function InputAdornments() {
       <div>
         <TextField
           label="With normal TextField"
-          id="standard-start-adornment"
+          id={`${standardStartId}-input`}
           sx={{ m: 1, width: '25ch' }}
           slotProps={{
             input: {
@@ -148,19 +164,21 @@ export default function InputAdornments() {
         />
         <FormControl variant="standard" sx={{ m: 1, mt: 3, width: '25ch' }}>
           <Input
-            id="standard-adornment-weight"
+            id={`${standardWeightId}-input`}
             endAdornment={<InputAdornment position="end">kg</InputAdornment>}
-            aria-describedby="standard-weight-helper-text"
+            aria-describedby={`${standardWeightId}-helper-text`}
             inputProps={{
               'aria-label': 'weight',
             }}
           />
-          <FormHelperText id="standard-weight-helper-text">Weight</FormHelperText>
+          <FormHelperText id={`${standardWeightId}-helper-text`}>
+            Weight
+          </FormHelperText>
         </FormControl>
         <FormControl sx={{ m: 1, width: '25ch' }} variant="standard">
-          <InputLabel htmlFor="standard-adornment-password">Password</InputLabel>
+          <InputLabel htmlFor={`${standardPasswordId}-input`}>Password</InputLabel>
           <Input
-            id="standard-adornment-password"
+            id={`${standardPasswordId}-input`}
             type={showPassword ? 'text' : 'password'}
             endAdornment={
               <InputAdornment position="end">
@@ -179,9 +197,9 @@ export default function InputAdornments() {
           />
         </FormControl>
         <FormControl fullWidth sx={{ m: 1 }} variant="standard">
-          <InputLabel htmlFor="standard-adornment-amount">Amount</InputLabel>
+          <InputLabel htmlFor={`${standardAmountId}-input`}>Amount</InputLabel>
           <Input
-            id="standard-adornment-amount"
+            id={`${standardAmountId}-input`}
             startAdornment={<InputAdornment position="start">$</InputAdornment>}
           />
         </FormControl>
diff --git a/docs/data/material/components/text-fields/InputWithIcon.js b/docs/data/material/components/text-fields/InputWithIcon.js
index f3b4e420f5b80e..7e51551b6cc057 100644
--- a/docs/data/material/components/text-fields/InputWithIcon.js
+++ b/docs/data/material/components/text-fields/InputWithIcon.js
@@ -1,3 +1,4 @@
+import * as React from 'react';
 import Box from '@mui/material/Box';
 import Input from '@mui/material/Input';
 import InputLabel from '@mui/material/InputLabel';
@@ -7,14 +8,17 @@ import TextField from '@mui/material/TextField';
 import AccountCircle from '@mui/icons-material/AccountCircle';
 
 export default function InputWithIcon() {
+  const adornmentId = React.useId();
+  const textFieldId = React.useId();
+  const sxId = React.useId();
   return (
     <Box sx={{ '& > :not(style)': { m: 1 } }}>
       <FormControl variant="standard">
-        <InputLabel htmlFor="input-with-icon-adornment">
+        <InputLabel htmlFor={`${adornmentId}-input`}>
           With a start adornment
         </InputLabel>
         <Input
-          id="input-with-icon-adornment"
+          id={`${adornmentId}-input`}
           startAdornment={
             <InputAdornment position="start">
               <AccountCircle />
@@ -23,7 +27,7 @@ export default function InputWithIcon() {
         />
       </FormControl>
       <TextField
-        id="input-with-icon-textfield"
+        id={`${textFieldId}-input`}
         label="TextField"
         slotProps={{
           input: {
@@ -38,7 +42,7 @@ export default function InputWithIcon() {
       />
       <Box sx={{ display: 'flex', alignItems: 'flex-end' }}>
         <AccountCircle sx={{ color: 'action.active', mr: 1, my: 0.5 }} />
-        <TextField id="input-with-sx" label="With sx" variant="standard" />
+        <TextField id={`${sxId}-input`} label="With sx" variant="standard" />
       </Box>
     </Box>
   );
diff --git a/docs/data/material/components/text-fields/InputWithIcon.tsx b/docs/data/material/components/text-fields/InputWithIcon.tsx
index f3b4e420f5b80e..7e51551b6cc057 100644
--- a/docs/data/material/components/text-fields/InputWithIcon.tsx
+++ b/docs/data/material/components/text-fields/InputWithIcon.tsx
@@ -1,3 +1,4 @@
+import * as React from 'react';
 import Box from '@mui/material/Box';
 import Input from '@mui/material/Input';
 import InputLabel from '@mui/material/InputLabel';
@@ -7,14 +8,17 @@ import TextField from '@mui/material/TextField';
 import AccountCircle from '@mui/icons-material/AccountCircle';
 
 export default function InputWithIcon() {
+  const adornmentId = React.useId();
+  const textFieldId = React.useId();
+  const sxId = React.useId();
   return (
     <Box sx={{ '& > :not(style)': { m: 1 } }}>
       <FormControl variant="standard">
-        <InputLabel htmlFor="input-with-icon-adornment">
+        <InputLabel htmlFor={`${adornmentId}-input`}>
           With a start adornment
         </InputLabel>
         <Input
-          id="input-with-icon-adornment"
+          id={`${adornmentId}-input`}
           startAdornment={
             <InputAdornment position="start">
               <AccountCircle />
@@ -23,7 +27,7 @@ export default function InputWithIcon() {
         />
       </FormControl>
       <TextField
-        id="input-with-icon-textfield"
+        id={`${textFieldId}-input`}
         label="TextField"
         slotProps={{
           input: {
@@ -38,7 +42,7 @@ export default function InputWithIcon() {
       />
       <Box sx={{ display: 'flex', alignItems: 'flex-end' }}>
         <AccountCircle sx={{ color: 'action.active', mr: 1, my: 0.5 }} />
-        <TextField id="input-with-sx" label="With sx" variant="standard" />
+        <TextField id={`${sxId}-input`} label="With sx" variant="standard" />
       </Box>
     </Box>
   );