diff --git a/docs/data/material/components/text-fields/InputSuffixShrink.js b/docs/data/material/components/text-fields/InputSuffixShrink.js
new file mode 100644
index 00000000000000..6cdb5887c0aae2
--- /dev/null
+++ b/docs/data/material/components/text-fields/InputSuffixShrink.js
@@ -0,0 +1,97 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import { filledInputClasses } from '@mui/material/FilledInput';
+import { inputBaseClasses } from '@mui/material/InputBase';
+import TextField from '@mui/material/TextField';
+import InputAdornment from '@mui/material/InputAdornment';
+
+export default function InputSuffixShrink() {
+  return (
+    <Box
+      component="form"
+      sx={{ '& > :not(style)': { m: 1, width: '25ch' } }}
+      noValidate
+      autoComplete="off"
+    >
+      <TextField
+        id="outlined-suffix-shrink"
+        label="Outlined"
+        variant="outlined"
+        slotProps={{
+          input: {
+            endAdornment: (
+              <InputAdornment
+                position="end"
+                sx={{
+                  opacity: 0,
+                  pointerEvents: 'none',
+                  [`[data-shrink=true] ~ .${inputBaseClasses.root} > &`]: {
+                    opacity: 1,
+                  },
+                }}
+              >
+                lbs
+              </InputAdornment>
+            ),
+          },
+        }}
+      />
+      <TextField
+        id="filled-suffix-shrink"
+        label="Filled"
+        variant="filled"
+        slotProps={{
+          input: {
+            endAdornment: (
+              <InputAdornment
+                position="end"
+                sx={{
+                  alignSelf: 'flex-end',
+                  opacity: 0,
+                  pointerEvents: 'none',
+                  [`.${filledInputClasses.root} &`]: {
+                    marginBottom: '7.5px',
+                  },
+                  [`[data-shrink=true] ~ .${inputBaseClasses.root} > &`]: {
+                    opacity: 1,
+                  },
+                }}
+              >
+                days
+              </InputAdornment>
+            ),
+          },
+        }}
+      />
+      <TextField
+        id="standard-suffix-shrink"
+        label="Standard"
+        variant="standard"
+        slotProps={{
+          htmlInput: {
+            sx: { textAlign: 'right' },
+          },
+          input: {
+            endAdornment: (
+              <InputAdornment
+                position="end"
+                sx={{
+                  alignSelf: 'flex-end',
+                  margin: 0,
+                  marginBottom: '5px',
+                  opacity: 0,
+                  pointerEvents: 'none',
+                  [`[data-shrink=true] ~ .${inputBaseClasses.root} > &`]: {
+                    opacity: 1,
+                  },
+                }}
+              >
+                @gmail.com
+              </InputAdornment>
+            ),
+          },
+        }}
+      />
+    </Box>
+  );
+}
diff --git a/docs/data/material/components/text-fields/InputSuffixShrink.tsx b/docs/data/material/components/text-fields/InputSuffixShrink.tsx
new file mode 100644
index 00000000000000..6cdb5887c0aae2
--- /dev/null
+++ b/docs/data/material/components/text-fields/InputSuffixShrink.tsx
@@ -0,0 +1,97 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import { filledInputClasses } from '@mui/material/FilledInput';
+import { inputBaseClasses } from '@mui/material/InputBase';
+import TextField from '@mui/material/TextField';
+import InputAdornment from '@mui/material/InputAdornment';
+
+export default function InputSuffixShrink() {
+  return (
+    <Box
+      component="form"
+      sx={{ '& > :not(style)': { m: 1, width: '25ch' } }}
+      noValidate
+      autoComplete="off"
+    >
+      <TextField
+        id="outlined-suffix-shrink"
+        label="Outlined"
+        variant="outlined"
+        slotProps={{
+          input: {
+            endAdornment: (
+              <InputAdornment
+                position="end"
+                sx={{
+                  opacity: 0,
+                  pointerEvents: 'none',
+                  [`[data-shrink=true] ~ .${inputBaseClasses.root} > &`]: {
+                    opacity: 1,
+                  },
+                }}
+              >
+                lbs
+              </InputAdornment>
+            ),
+          },
+        }}
+      />
+      <TextField
+        id="filled-suffix-shrink"
+        label="Filled"
+        variant="filled"
+        slotProps={{
+          input: {
+            endAdornment: (
+              <InputAdornment
+                position="end"
+                sx={{
+                  alignSelf: 'flex-end',
+                  opacity: 0,
+                  pointerEvents: 'none',
+                  [`.${filledInputClasses.root} &`]: {
+                    marginBottom: '7.5px',
+                  },
+                  [`[data-shrink=true] ~ .${inputBaseClasses.root} > &`]: {
+                    opacity: 1,
+                  },
+                }}
+              >
+                days
+              </InputAdornment>
+            ),
+          },
+        }}
+      />
+      <TextField
+        id="standard-suffix-shrink"
+        label="Standard"
+        variant="standard"
+        slotProps={{
+          htmlInput: {
+            sx: { textAlign: 'right' },
+          },
+          input: {
+            endAdornment: (
+              <InputAdornment
+                position="end"
+                sx={{
+                  alignSelf: 'flex-end',
+                  margin: 0,
+                  marginBottom: '5px',
+                  opacity: 0,
+                  pointerEvents: 'none',
+                  [`[data-shrink=true] ~ .${inputBaseClasses.root} > &`]: {
+                    opacity: 1,
+                  },
+                }}
+              >
+                @gmail.com
+              </InputAdornment>
+            ),
+          },
+        }}
+      />
+    </Box>
+  );
+}
diff --git a/docs/data/material/components/text-fields/text-fields.md b/docs/data/material/components/text-fields/text-fields.md
index 8142a867b4b700..74205facd6ae01 100644
--- a/docs/data/material/components/text-fields/text-fields.md
+++ b/docs/data/material/components/text-fields/text-fields.md
@@ -70,6 +70,13 @@ For instance, you can use an icon button to hide or reveal the password.
 
 {{"demo": "InputAdornments.js"}}
 
+#### Customizing adornments
+
+You can apply custom styles to adornments, and trigger changes to one based on attributes from another.
+For example, the demo below uses the label's `[data-shrink=true]` attribute to make the suffix visible (via opacity) when the label is in its shrunken state.
+
+{{"demo": "InputSuffixShrink.js"}}
+
 ## Sizes
 
 Fancy smaller inputs? Use the `size` prop.