From d6ec6ef00a02d861fdd006cd72ae85d2bb26a2cf Mon Sep 17 00:00:00 2001
From: varunmulay22 <varunmulay22@gmail.com>
Date: Fri, 31 Mar 2023 18:00:17 +0530
Subject: [PATCH] unstyled input styles sent to bottom

---
 .../base/components/input/InputAdornments.js  | 158 +++++++++---------
 .../base/components/input/InputAdornments.tsx | 156 ++++++++---------
 .../base/components/input/InputMultiline.js   |  32 ++--
 .../base/components/input/InputMultiline.tsx  |  38 ++---
 .../input/InputMultilineAutosize.js           |  32 ++--
 .../input/InputMultilineAutosize.tsx          |  38 ++---
 .../components/input/UnstyledInputBasic.js    |  20 +--
 .../components/input/UnstyledInputBasic.tsx   |  26 +--
 .../input/UnstyledInputIntroduction.js        |  20 +--
 .../input/UnstyledInputIntroduction.tsx       |  26 +--
 docs/data/base/components/input/UseInput.js   |  38 ++---
 docs/data/base/components/input/UseInput.tsx  |  44 ++---
 12 files changed, 314 insertions(+), 314 deletions(-)

diff --git a/docs/data/base/components/input/InputAdornments.js b/docs/data/base/components/input/InputAdornments.js
index 65d35f210cdcbf..60be607018aac1 100644
--- a/docs/data/base/components/input/InputAdornments.js
+++ b/docs/data/base/components/input/InputAdornments.js
@@ -7,6 +7,85 @@ import Visibility from '@mui/icons-material/Visibility';
 import VisibilityOff from '@mui/icons-material/VisibilityOff';
 import { styled } from '@mui/system';
 
+const CustomInput = React.forwardRef(function CustomInput(props, ref) {
+  const { slots, ...other } = props;
+  return (
+    <InputUnstyled
+      slots={{
+        root: StyledInputRoot,
+        input: StyledInputElement,
+        ...slots,
+      }}
+      {...other}
+      ref={ref}
+    />
+  );
+});
+
+CustomInput.propTypes = {
+  /**
+   * The components used for each slot inside the InputBase.
+   * Either a string to use a HTML element or a component.
+   * @default {}
+   */
+  slots: PropTypes.shape({
+    input: PropTypes.elementType,
+    root: PropTypes.elementType,
+    textarea: PropTypes.elementType,
+  }),
+};
+
+export default function InputAdornments() {
+  const [values, setValues] = React.useState({
+    amount: '',
+    password: '',
+    weight: '',
+    weightRange: '',
+    showPassword: false,
+  });
+
+  const handleChange = (prop) => (event) => {
+    setValues({ ...values, [prop]: event.target.value });
+  };
+
+  const handleClickShowPassword = () => {
+    setValues({
+      ...values,
+      showPassword: !values.showPassword,
+    });
+  };
+
+  const handleMouseDownPassword = (event) => {
+    event.preventDefault();
+  };
+
+  return (
+    <Box sx={{ display: 'flex', '& > * + *': { ml: 1 } }}>
+      <CustomInput
+        id="outlined-start-adornment"
+        startAdornment={<InputAdornment>kg</InputAdornment>}
+      />
+      <CustomInput
+        id="outlined-adornment-password"
+        type={values.showPassword ? 'text' : 'password'}
+        value={values.password}
+        onChange={handleChange('password')}
+        endAdornment={
+          <InputAdornment>
+            <IconButton
+              aria-label="toggle password visibility"
+              onClick={handleClickShowPassword}
+              onMouseDown={handleMouseDownPassword}
+            >
+              {values.showPassword ? <VisibilityOff /> : <Visibility />}
+            </IconButton>
+          </InputAdornment>
+        }
+      />
+    </Box>
+  );
+}
+
 const blue = {
   100: '#DAECFF',
   200: '#80BFFF',
@@ -92,82 +171,3 @@ const InputAdornment = styled('div')`
   align-items: center;
   justify-content: center;
 `;
-
-const CustomInput = React.forwardRef(function CustomInput(props, ref) {
-  const { slots, ...other } = props;
-  return (
-    <InputUnstyled
-      slots={{
-        root: StyledInputRoot,
-        input: StyledInputElement,
-        ...slots,
-      }}
-      {...other}
-      ref={ref}
-    />
-  );
-});
-
-CustomInput.propTypes = {
-  /**
-   * The components used for each slot inside the InputBase.
-   * Either a string to use a HTML element or a component.
-   * @default {}
-   */
-  slots: PropTypes.shape({
-    input: PropTypes.elementType,
-    root: PropTypes.elementType,
-    textarea: PropTypes.elementType,
-  }),
-};
-
-export default function InputAdornments() {
-  const [values, setValues] = React.useState({
-    amount: '',
-    password: '',
-    weight: '',
-    weightRange: '',
-    showPassword: false,
-  });
-
-  const handleChange = (prop) => (event) => {
-    setValues({ ...values, [prop]: event.target.value });
-  };
-
-  const handleClickShowPassword = () => {
-    setValues({
-      ...values,
-      showPassword: !values.showPassword,
-    });
-  };
-
-  const handleMouseDownPassword = (event) => {
-    event.preventDefault();
-  };
-
-  return (
-    <Box sx={{ display: 'flex', '& > * + *': { ml: 1 } }}>
-      <CustomInput
-        id="outlined-start-adornment"
-        startAdornment={<InputAdornment>kg</InputAdornment>}
-      />
-      <CustomInput
-        id="outlined-adornment-password"
-        type={values.showPassword ? 'text' : 'password'}
-        value={values.password}
-        onChange={handleChange('password')}
-        endAdornment={
-          <InputAdornment>
-            <IconButton
-              aria-label="toggle password visibility"
-              onClick={handleClickShowPassword}
-              onMouseDown={handleMouseDownPassword}
-            >
-              {values.showPassword ? <VisibilityOff /> : <Visibility />}
-            </IconButton>
-          </InputAdornment>
-        }
-      />
-    </Box>
-  );
-}
diff --git a/docs/data/base/components/input/InputAdornments.tsx b/docs/data/base/components/input/InputAdornments.tsx
index 34dee6fcf652ff..bd7cf5078f5b9c 100644
--- a/docs/data/base/components/input/InputAdornments.tsx
+++ b/docs/data/base/components/input/InputAdornments.tsx
@@ -9,6 +9,84 @@ import Visibility from '@mui/icons-material/Visibility';
 import VisibilityOff from '@mui/icons-material/VisibilityOff';
 import { styled } from '@mui/system';
 
+const CustomInput = React.forwardRef(function CustomInput(
+  props: InputUnstyledProps,
+  ref: React.ForwardedRef<HTMLDivElement>,
+) {
+  const { slots, ...other } = props;
+  return (
+    <InputUnstyled
+      slots={{
+        root: StyledInputRoot,
+        input: StyledInputElement,
+        ...slots,
+      }}
+      {...other}
+      ref={ref}
+    />
+  );
+});
+
+interface State {
+  amount: string;
+  password: string;
+  weight: string;
+  weightRange: string;
+  showPassword: boolean;
+}
+
+export default function InputAdornments() {
+  const [values, setValues] = React.useState<State>({
+    amount: '',
+    password: '',
+    weight: '',
+    weightRange: '',
+    showPassword: false,
+  });
+
+  const handleChange =
+    (prop: keyof State) => (event: React.ChangeEvent<HTMLInputElement>) => {
+      setValues({ ...values, [prop]: event.target.value });
+    };
+
+  const handleClickShowPassword = () => {
+    setValues({
+      ...values,
+      showPassword: !values.showPassword,
+    });
+  };
+
+  const handleMouseDownPassword = (event: React.MouseEvent<HTMLButtonElement>) => {
+    event.preventDefault();
+  };
+
+  return (
+    <Box sx={{ display: 'flex', '& > * + *': { ml: 1 } }}>
+      <CustomInput
+        id="outlined-start-adornment"
+        startAdornment={<InputAdornment>kg</InputAdornment>}
+      />
+      <CustomInput
+        id="outlined-adornment-password"
+        type={values.showPassword ? 'text' : 'password'}
+        value={values.password}
+        onChange={handleChange('password')}
+        endAdornment={
+          <InputAdornment>
+            <IconButton
+              aria-label="toggle password visibility"
+              onClick={handleClickShowPassword}
+              onMouseDown={handleMouseDownPassword}
+            >
+              {values.showPassword ? <VisibilityOff /> : <Visibility />}
+            </IconButton>
+          </InputAdornment>
+        }
+      />
+    </Box>
+  );
+}
+
 const blue = {
   100: '#DAECFF',
   200: '#80BFFF',
@@ -94,81 +172,3 @@ const InputAdornment = styled('div')`
   align-items: center;
   justify-content: center;
 `;
-
-const CustomInput = React.forwardRef(function CustomInput(
-  props: InputUnstyledProps,
-  ref: React.ForwardedRef<HTMLDivElement>,
-) {
-  const { slots, ...other } = props;
-  return (
-    <InputUnstyled
-      slots={{
-        root: StyledInputRoot,
-        input: StyledInputElement,
-        ...slots,
-      }}
-      {...other}
-      ref={ref}
-    />
-  );
-});
-
-interface State {
-  amount: string;
-  password: string;
-  weight: string;
-  weightRange: string;
-  showPassword: boolean;
-}
-
-export default function InputAdornments() {
-  const [values, setValues] = React.useState<State>({
-    amount: '',
-    password: '',
-    weight: '',
-    weightRange: '',
-    showPassword: false,
-  });
-
-  const handleChange =
-    (prop: keyof State) => (event: React.ChangeEvent<HTMLInputElement>) => {
-      setValues({ ...values, [prop]: event.target.value });
-    };
-
-  const handleClickShowPassword = () => {
-    setValues({
-      ...values,
-      showPassword: !values.showPassword,
-    });
-  };
-
-  const handleMouseDownPassword = (event: React.MouseEvent<HTMLButtonElement>) => {
-    event.preventDefault();
-  };
-
-  return (
-    <Box sx={{ display: 'flex', '& > * + *': { ml: 1 } }}>
-      <CustomInput
-        id="outlined-start-adornment"
-        startAdornment={<InputAdornment>kg</InputAdornment>}
-      />
-      <CustomInput
-        id="outlined-adornment-password"
-        type={values.showPassword ? 'text' : 'password'}
-        value={values.password}
-        onChange={handleChange('password')}
-        endAdornment={
-          <InputAdornment>
-            <IconButton
-              aria-label="toggle password visibility"
-              onClick={handleClickShowPassword}
-              onMouseDown={handleMouseDownPassword}
-            >
-              {values.showPassword ? <VisibilityOff /> : <Visibility />}
-            </IconButton>
-          </InputAdornment>
-        }
-      />
-    </Box>
-  );
-}
diff --git a/docs/data/base/components/input/InputMultiline.js b/docs/data/base/components/input/InputMultiline.js
index f0cf031bd3854d..0dd38d2648e531 100644
--- a/docs/data/base/components/input/InputMultiline.js
+++ b/docs/data/base/components/input/InputMultiline.js
@@ -2,6 +2,22 @@ import * as React from 'react';
 import InputUnstyled from '@mui/base/InputUnstyled';
 import { styled } from '@mui/system';
 
+const CustomInput = React.forwardRef(function CustomInput(props, ref) {
+  return (
+    <InputUnstyled
+      slots={{ input: StyledInputElement, textarea: StyledTextareaElement }}
+      {...props}
+      ref={ref}
+    />
+  );
+});
+
+export default function UnstyledInputBasic() {
+  return (
+    <CustomInput aria-label="Demo input" multiline placeholder="Type something…" />
+  );
+}
+
 const blue = {
   100: '#DAECFF',
   200: '#80BFFF',
@@ -85,19 +101,3 @@ const StyledTextareaElement = styled('textarea', {
   }
 `,
 );
-
-const CustomInput = React.forwardRef(function CustomInput(props, ref) {
-  return (
-    <InputUnstyled
-      slots={{ input: StyledInputElement, textarea: StyledTextareaElement }}
-      {...props}
-      ref={ref}
-    />
-  );
-});
-
-export default function UnstyledInputBasic() {
-  return (
-    <CustomInput aria-label="Demo input" multiline placeholder="Type something…" />
-  );
-}
diff --git a/docs/data/base/components/input/InputMultiline.tsx b/docs/data/base/components/input/InputMultiline.tsx
index 21e71babb16216..0cf8fb26b31162 100644
--- a/docs/data/base/components/input/InputMultiline.tsx
+++ b/docs/data/base/components/input/InputMultiline.tsx
@@ -2,6 +2,25 @@ import * as React from 'react';
 import InputUnstyled, { InputUnstyledProps } from '@mui/base/InputUnstyled';
 import { styled } from '@mui/system';
 
+const CustomInput = React.forwardRef(function CustomInput(
+  props: InputUnstyledProps,
+  ref: React.ForwardedRef<HTMLDivElement>,
+) {
+  return (
+    <InputUnstyled
+      slots={{ input: StyledInputElement, textarea: StyledTextareaElement }}
+      {...props}
+      ref={ref}
+    />
+  );
+});
+
+export default function UnstyledInputBasic() {
+  return (
+    <CustomInput aria-label="Demo input" multiline placeholder="Type something…" />
+  );
+}
+
 const blue = {
   100: '#DAECFF',
   200: '#80BFFF',
@@ -85,22 +104,3 @@ const StyledTextareaElement = styled('textarea', {
   }
 `,
 );
-
-const CustomInput = React.forwardRef(function CustomInput(
-  props: InputUnstyledProps,
-  ref: React.ForwardedRef<HTMLDivElement>,
-) {
-  return (
-    <InputUnstyled
-      slots={{ input: StyledInputElement, textarea: StyledTextareaElement }}
-      {...props}
-      ref={ref}
-    />
-  );
-});
-
-export default function UnstyledInputBasic() {
-  return (
-    <CustomInput aria-label="Demo input" multiline placeholder="Type something…" />
-  );
-}
diff --git a/docs/data/base/components/input/InputMultilineAutosize.js b/docs/data/base/components/input/InputMultilineAutosize.js
index efad1c94230bed..9b7fd298b6df10 100644
--- a/docs/data/base/components/input/InputMultilineAutosize.js
+++ b/docs/data/base/components/input/InputMultilineAutosize.js
@@ -3,6 +3,22 @@ import InputUnstyled from '@mui/base/InputUnstyled';
 import TextareaAutosize from '@mui/base/TextareaAutosize';
 import { styled } from '@mui/system';
 
+const CustomInput = React.forwardRef(function CustomInput(props, ref) {
+  return (
+    <InputUnstyled
+      slots={{ input: StyledInputElement, textarea: StyledTextareaElement }}
+      {...props}
+      ref={ref}
+    />
+  );
+});
+
+export default function UnstyledInputBasic() {
+  return (
+    <CustomInput aria-label="Demo input" multiline placeholder="Type something…" />
+  );
+}
+
 const blue = {
   100: '#DAECFF',
   200: '#80BFFF',
@@ -83,19 +99,3 @@ const StyledTextareaElement = styled(TextareaAutosize)(
   }
 `,
 );
-
-const CustomInput = React.forwardRef(function CustomInput(props, ref) {
-  return (
-    <InputUnstyled
-      slots={{ input: StyledInputElement, textarea: StyledTextareaElement }}
-      {...props}
-      ref={ref}
-    />
-  );
-});
-
-export default function UnstyledInputBasic() {
-  return (
-    <CustomInput aria-label="Demo input" multiline placeholder="Type something…" />
-  );
-}
diff --git a/docs/data/base/components/input/InputMultilineAutosize.tsx b/docs/data/base/components/input/InputMultilineAutosize.tsx
index f29bd97062c7ee..a58a2ebd1568e0 100644
--- a/docs/data/base/components/input/InputMultilineAutosize.tsx
+++ b/docs/data/base/components/input/InputMultilineAutosize.tsx
@@ -3,6 +3,25 @@ import InputUnstyled, { InputUnstyledProps } from '@mui/base/InputUnstyled';
 import TextareaAutosize from '@mui/base/TextareaAutosize';
 import { styled } from '@mui/system';
 
+const CustomInput = React.forwardRef(function CustomInput(
+  props: InputUnstyledProps,
+  ref: React.ForwardedRef<HTMLDivElement>,
+) {
+  return (
+    <InputUnstyled
+      slots={{ input: StyledInputElement, textarea: StyledTextareaElement }}
+      {...props}
+      ref={ref}
+    />
+  );
+});
+
+export default function UnstyledInputBasic() {
+  return (
+    <CustomInput aria-label="Demo input" multiline placeholder="Type something…" />
+  );
+}
+
 const blue = {
   100: '#DAECFF',
   200: '#80BFFF',
@@ -83,22 +102,3 @@ const StyledTextareaElement = styled(TextareaAutosize)(
   }
 `,
 );
-
-const CustomInput = React.forwardRef(function CustomInput(
-  props: InputUnstyledProps,
-  ref: React.ForwardedRef<HTMLDivElement>,
-) {
-  return (
-    <InputUnstyled
-      slots={{ input: StyledInputElement, textarea: StyledTextareaElement }}
-      {...props}
-      ref={ref}
-    />
-  );
-});
-
-export default function UnstyledInputBasic() {
-  return (
-    <CustomInput aria-label="Demo input" multiline placeholder="Type something…" />
-  );
-}
diff --git a/docs/data/base/components/input/UnstyledInputBasic.js b/docs/data/base/components/input/UnstyledInputBasic.js
index 4b95721ec2c211..c15e35f4b1afb4 100644
--- a/docs/data/base/components/input/UnstyledInputBasic.js
+++ b/docs/data/base/components/input/UnstyledInputBasic.js
@@ -2,6 +2,16 @@ import * as React from 'react';
 import InputUnstyled from '@mui/base/InputUnstyled';
 import { styled } from '@mui/system';
 
+const CustomInput = React.forwardRef(function CustomInput(props, ref) {
+  return (
+    <InputUnstyled slots={{ input: StyledInputElement }} {...props} ref={ref} />
+  );
+});
+
+export default function UnstyledInputBasic() {
+  return <CustomInput aria-label="Demo input" placeholder="Type something…" />;
+}
+
 const blue = {
   100: '#DAECFF',
   200: '#80BFFF',
@@ -52,13 +62,3 @@ const StyledInputElement = styled('input')(
   }
 `,
 );
-
-const CustomInput = React.forwardRef(function CustomInput(props, ref) {
-  return (
-    <InputUnstyled slots={{ input: StyledInputElement }} {...props} ref={ref} />
-  );
-});
-
-export default function UnstyledInputBasic() {
-  return <CustomInput aria-label="Demo input" placeholder="Type something…" />;
-}
diff --git a/docs/data/base/components/input/UnstyledInputBasic.tsx b/docs/data/base/components/input/UnstyledInputBasic.tsx
index fad30aeca15e33..ba0bea1209fbd4 100644
--- a/docs/data/base/components/input/UnstyledInputBasic.tsx
+++ b/docs/data/base/components/input/UnstyledInputBasic.tsx
@@ -2,6 +2,19 @@ import * as React from 'react';
 import InputUnstyled, { InputUnstyledProps } from '@mui/base/InputUnstyled';
 import { styled } from '@mui/system';
 
+const CustomInput = React.forwardRef(function CustomInput(
+  props: InputUnstyledProps,
+  ref: React.ForwardedRef<HTMLDivElement>,
+) {
+  return (
+    <InputUnstyled slots={{ input: StyledInputElement }} {...props} ref={ref} />
+  );
+});
+
+export default function UnstyledInputBasic() {
+  return <CustomInput aria-label="Demo input" placeholder="Type something…" />;
+}
+
 const blue = {
   100: '#DAECFF',
   200: '#80BFFF',
@@ -52,16 +65,3 @@ const StyledInputElement = styled('input')(
   }
 `,
 );
-
-const CustomInput = React.forwardRef(function CustomInput(
-  props: InputUnstyledProps,
-  ref: React.ForwardedRef<HTMLDivElement>,
-) {
-  return (
-    <InputUnstyled slots={{ input: StyledInputElement }} {...props} ref={ref} />
-  );
-});
-
-export default function UnstyledInputBasic() {
-  return <CustomInput aria-label="Demo input" placeholder="Type something…" />;
-}
diff --git a/docs/data/base/components/input/UnstyledInputIntroduction.js b/docs/data/base/components/input/UnstyledInputIntroduction.js
index 5f994e6f84bfdb..7836b41c9c8b65 100644
--- a/docs/data/base/components/input/UnstyledInputIntroduction.js
+++ b/docs/data/base/components/input/UnstyledInputIntroduction.js
@@ -2,6 +2,16 @@ import * as React from 'react';
 import InputUnstyled from '@mui/base/InputUnstyled';
 import { styled } from '@mui/system';
 
+const CustomInput = React.forwardRef(function CustomInput(props, ref) {
+  return (
+    <InputUnstyled slots={{ input: StyledInputElement }} {...props} ref={ref} />
+  );
+});
+
+export default function UnstyledInputIntroduction() {
+  return <CustomInput aria-label="Demo input" placeholder="Type something…" />;
+}
+
 const blue = {
   100: '#DAECFF',
   200: '#b6daff',
@@ -52,13 +62,3 @@ const StyledInputElement = styled('input')(
   }
 `,
 );
-
-const CustomInput = React.forwardRef(function CustomInput(props, ref) {
-  return (
-    <InputUnstyled slots={{ input: StyledInputElement }} {...props} ref={ref} />
-  );
-});
-
-export default function UnstyledInputIntroduction() {
-  return <CustomInput aria-label="Demo input" placeholder="Type something…" />;
-}
diff --git a/docs/data/base/components/input/UnstyledInputIntroduction.tsx b/docs/data/base/components/input/UnstyledInputIntroduction.tsx
index ca0eb2ad9aca71..6177343f56e424 100644
--- a/docs/data/base/components/input/UnstyledInputIntroduction.tsx
+++ b/docs/data/base/components/input/UnstyledInputIntroduction.tsx
@@ -2,6 +2,19 @@ import * as React from 'react';
 import InputUnstyled from '@mui/base/InputUnstyled';
 import { styled } from '@mui/system';
 
+const CustomInput = React.forwardRef(function CustomInput(
+  props: React.InputHTMLAttributes<HTMLInputElement>,
+  ref: React.ForwardedRef<HTMLDivElement>,
+) {
+  return (
+    <InputUnstyled slots={{ input: StyledInputElement }} {...props} ref={ref} />
+  );
+});
+
+export default function UnstyledInputIntroduction() {
+  return <CustomInput aria-label="Demo input" placeholder="Type something…" />;
+}
+
 const blue = {
   100: '#DAECFF',
   200: '#b6daff',
@@ -52,16 +65,3 @@ const StyledInputElement = styled('input')(
   }
 `,
 );
-
-const CustomInput = React.forwardRef(function CustomInput(
-  props: React.InputHTMLAttributes<HTMLInputElement>,
-  ref: React.ForwardedRef<HTMLDivElement>,
-) {
-  return (
-    <InputUnstyled slots={{ input: StyledInputElement }} {...props} ref={ref} />
-  );
-});
-
-export default function UnstyledInputIntroduction() {
-  return <CustomInput aria-label="Demo input" placeholder="Type something…" />;
-}
diff --git a/docs/data/base/components/input/UseInput.js b/docs/data/base/components/input/UseInput.js
index 692fcd899be9c9..1fbc559f906243 100644
--- a/docs/data/base/components/input/UseInput.js
+++ b/docs/data/base/components/input/UseInput.js
@@ -3,6 +3,25 @@ import useInput from '@mui/base/useInput';
 import { styled } from '@mui/system';
 import { unstable_useForkRef as useForkRef } from '@mui/utils';
 
+const CustomInput = React.forwardRef(function CustomInput(props, ref) {
+  const { getRootProps, getInputProps } = useInput(props);
+
+  const inputProps = getInputProps();
+
+  // Make sure that both the forwarded ref and the ref returned from the getInputProps are applied on the input element
+  inputProps.ref = useForkRef(inputProps.ref, ref);
+
+  return (
+    <div {...getRootProps()}>
+      <StyledInputElement {...props} {...inputProps} />
+    </div>
+  );
+});
+
+export default function UseInput() {
+  return <CustomInput aria-label="Demo input" placeholder="Type something…" />;
+}
+
 const blue = {
   100: '#DAECFF',
   200: '#80BFFF',
@@ -53,22 +72,3 @@ const StyledInputElement = styled('input')(
   }
 `,
 );
-
-const CustomInput = React.forwardRef(function CustomInput(props, ref) {
-  const { getRootProps, getInputProps } = useInput(props);
-
-  const inputProps = getInputProps();
-
-  // Make sure that both the forwarded ref and the ref returned from the getInputProps are applied on the input element
-  inputProps.ref = useForkRef(inputProps.ref, ref);
-
-  return (
-    <div {...getRootProps()}>
-      <StyledInputElement {...props} {...inputProps} />
-    </div>
-  );
-});
-
-export default function UseInput() {
-  return <CustomInput aria-label="Demo input" placeholder="Type something…" />;
-}
diff --git a/docs/data/base/components/input/UseInput.tsx b/docs/data/base/components/input/UseInput.tsx
index f65a8bf9898950..7159ce62bf5789 100644
--- a/docs/data/base/components/input/UseInput.tsx
+++ b/docs/data/base/components/input/UseInput.tsx
@@ -3,6 +3,28 @@ import useInput from '@mui/base/useInput';
 import { styled } from '@mui/system';
 import { unstable_useForkRef as useForkRef } from '@mui/utils';
 
+const CustomInput = React.forwardRef(function CustomInput(
+  props: React.InputHTMLAttributes<HTMLInputElement>,
+  ref: React.ForwardedRef<HTMLInputElement>,
+) {
+  const { getRootProps, getInputProps } = useInput(props);
+
+  const inputProps = getInputProps();
+
+  // Make sure that both the forwarded ref and the ref returned from the getInputProps are applied on the input element
+  inputProps.ref = useForkRef(inputProps.ref, ref);
+
+  return (
+    <div {...getRootProps()}>
+      <StyledInputElement {...props} {...inputProps} />
+    </div>
+  );
+});
+
+export default function UseInput() {
+  return <CustomInput aria-label="Demo input" placeholder="Type something…" />;
+}
+
 const blue = {
   100: '#DAECFF',
   200: '#80BFFF',
@@ -53,25 +75,3 @@ const StyledInputElement = styled('input')(
   }
 `,
 );
-
-const CustomInput = React.forwardRef(function CustomInput(
-  props: React.InputHTMLAttributes<HTMLInputElement>,
-  ref: React.ForwardedRef<HTMLInputElement>,
-) {
-  const { getRootProps, getInputProps } = useInput(props);
-
-  const inputProps = getInputProps();
-
-  // Make sure that both the forwarded ref and the ref returned from the getInputProps are applied on the input element
-  inputProps.ref = useForkRef(inputProps.ref, ref);
-
-  return (
-    <div {...getRootProps()}>
-      <StyledInputElement {...props} {...inputProps} />
-    </div>
-  );
-});
-
-export default function UseInput() {
-  return <CustomInput aria-label="Demo input" placeholder="Type something…" />;
-}