From aacf71a6e9fc7542aae5a9a3d39eff564b59f1ac Mon Sep 17 00:00:00 2001
From: Benny Joo <sldisek783@gmail.com>
Date: Wed, 14 Dec 2022 13:12:08 +0000
Subject: [PATCH 01/21] Add path to input demo

---
 docs/data/joy/pages.ts           | 5 +++--
 docs/pages/joy-ui/react-input.js | 7 +++++++
 2 files changed, 10 insertions(+), 2 deletions(-)
 create mode 100644 docs/pages/joy-ui/react-input.js

diff --git a/docs/data/joy/pages.ts b/docs/data/joy/pages.ts
index 7dee416d1f5d33..060b012de0a25e 100644
--- a/docs/data/joy/pages.ts
+++ b/docs/data/joy/pages.ts
@@ -31,13 +31,14 @@ const pages = [
         children: [
           { pathname: '/joy-ui/react-autocomplete' },
           { pathname: '/joy-ui/react-button' },
-          { pathname: '/joy-ui/react-text-field', title: 'Text Field' },
-          { pathname: '/joy-ui/react-textarea' },
           { pathname: '/joy-ui/react-checkbox' },
+          { pathname: '/joy-ui/react-input' },
           { pathname: '/joy-ui/react-radio-button', title: 'Radio Group' },
           { pathname: '/joy-ui/react-select' },
           { pathname: '/joy-ui/react-slider' },
           { pathname: '/joy-ui/react-switch' },
+          { pathname: '/joy-ui/react-textarea' },
+          { pathname: '/joy-ui/react-text-field', title: 'Text Field' },
         ],
       },
       {
diff --git a/docs/pages/joy-ui/react-input.js b/docs/pages/joy-ui/react-input.js
new file mode 100644
index 00000000000000..1f66aa6c7b33a7
--- /dev/null
+++ b/docs/pages/joy-ui/react-input.js
@@ -0,0 +1,7 @@
+import * as React from 'react';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import * as pageProps from 'docs/data/joy/components/input/input.md?@mui/markdown';
+
+export default function Page() {
+  return <MarkdownDocs {...pageProps} />;
+}

From 50d1fe2570f2529d90bf7be2cd7ce5356875bf5d Mon Sep 17 00:00:00 2001
From: Benny Joo <sldisek783@gmail.com>
Date: Wed, 14 Dec 2022 13:12:13 +0000
Subject: [PATCH 02/21] Add markdown

---
 docs/data/joy/components/input/input.md | 91 +++++++++++++++++++++++++
 1 file changed, 91 insertions(+)
 create mode 100644 docs/data/joy/components/input/input.md

diff --git a/docs/data/joy/components/input/input.md b/docs/data/joy/components/input/input.md
new file mode 100644
index 00000000000000..c3da8d8533d14d
--- /dev/null
+++ b/docs/data/joy/components/input/input.md
@@ -0,0 +1,91 @@
+---
+product: joy-ui
+title: React Input component
+unstyled: /base/react-input/
+---
+
+# Input
+
+<p class="description">Input component gives you a input HTML element that automatically adjusts its height to match the length of the content within.</p>
+
+## Introduction
+
+{{"demo": "InputUsage.js", "hideToolbar": true, "bg": "gradient"}}
+
+{{"component": "modules/components/ComponentLinkHeader.js", "design": false}}
+
+## Component
+
+After [installation](/joy-ui/getting-started/installation/), you can start building with this component using the following basic elements:
+
+```jsx
+import Input from '@mui/joy/Input';
+
+export default function MyApp() {
+  return <Input placeholder="Type anything…" />;
+}
+```
+
+### Variants
+
+The input component supports the four global variants: solid (default), soft, outlined, and plain.
+
+{{"demo": "InputVariants.js"}}
+
+### Sizes
+
+The input component comes with three sizes out of the box: `sm`, `md` (the default), and `lg`.
+
+{{"demo": "InputSizes.js"}}
+
+### Colors
+
+Toggle the palette that's being used to color the by text field by using the `color` prop.
+
+{{"demo": "InputColors.js"}}
+
+### Form props
+
+Standard form attributes are supported e.g. `required`, `disabled`, etc.
+
+{{"demo": "InputFormProps.js"}}
+
+### Validation
+
+To toggle the error state, use the `error` prop.
+
+{{"demo": "InputValidation.js"}}
+
+Note that using the `color` prop with danger as value gets the same result:
+
+```js
+<Input color="danger" />
+```
+
+### Decorators
+
+Use the `startDecorator` and/or `endDecorator` props to add supporting icons or elements to the input.
+It's usually more common to see input components using decorators at the top and bottom.
+
+{{"demo": "InputDecorators.js"}}
+
+## Accessibility
+
+In order for the input to be accessible, **it should be linked to a label**.
+
+The `FormControl` automatically generates a unique id that links the input with the `FormLabel` component:
+
+{{"demo": "InputField.js"}}
+
+Alternatively, you can do it manually by targeting the input slot:
+
+```jsx
+<label htmlFor="unique-id">Label</label>
+<Input
+  slotProps={{
+    input: {
+      id: 'unique-id',
+    }
+  }}
+/>
+```

From 33b522423fb52e3826cbc80795e4656898e01d48 Mon Sep 17 00:00:00 2001
From: Benny Joo <sldisek783@gmail.com>
Date: Wed, 14 Dec 2022 13:12:23 +0000
Subject: [PATCH 03/21] Add Colors demo

---
 docs/data/joy/components/input/InputColors.js | 22 +++++++++++++++++++
 .../data/joy/components/input/InputColors.tsx | 22 +++++++++++++++++++
 .../components/input/InputColors.tsx.preview  |  4 ++++
 3 files changed, 48 insertions(+)
 create mode 100644 docs/data/joy/components/input/InputColors.js
 create mode 100644 docs/data/joy/components/input/InputColors.tsx
 create mode 100644 docs/data/joy/components/input/InputColors.tsx.preview

diff --git a/docs/data/joy/components/input/InputColors.js b/docs/data/joy/components/input/InputColors.js
new file mode 100644
index 00000000000000..c13f97c4fa43b2
--- /dev/null
+++ b/docs/data/joy/components/input/InputColors.js
@@ -0,0 +1,22 @@
+import * as React from 'react';
+import Box from '@mui/joy/Box';
+import Input from '@mui/joy/Input';
+
+export default function InputColors() {
+  return (
+    <Box
+      sx={{
+        py: 2,
+        display: 'grid',
+        gap: 2,
+        alignItems: 'center',
+        flexWrap: 'wrap',
+      }}
+    >
+      <Input placeholder="Type in here…" variant="outlined" color="primary" />
+      <Input placeholder="Type in here…" variant="outlined" color="neutral" />
+      <Input placeholder="Type in here…" variant="outlined" color="danger" />
+      <Input placeholder="Type in here…" variant="outlined" color="warning" />
+    </Box>
+  );
+}
diff --git a/docs/data/joy/components/input/InputColors.tsx b/docs/data/joy/components/input/InputColors.tsx
new file mode 100644
index 00000000000000..c13f97c4fa43b2
--- /dev/null
+++ b/docs/data/joy/components/input/InputColors.tsx
@@ -0,0 +1,22 @@
+import * as React from 'react';
+import Box from '@mui/joy/Box';
+import Input from '@mui/joy/Input';
+
+export default function InputColors() {
+  return (
+    <Box
+      sx={{
+        py: 2,
+        display: 'grid',
+        gap: 2,
+        alignItems: 'center',
+        flexWrap: 'wrap',
+      }}
+    >
+      <Input placeholder="Type in here…" variant="outlined" color="primary" />
+      <Input placeholder="Type in here…" variant="outlined" color="neutral" />
+      <Input placeholder="Type in here…" variant="outlined" color="danger" />
+      <Input placeholder="Type in here…" variant="outlined" color="warning" />
+    </Box>
+  );
+}
diff --git a/docs/data/joy/components/input/InputColors.tsx.preview b/docs/data/joy/components/input/InputColors.tsx.preview
new file mode 100644
index 00000000000000..4ae6ad599226a9
--- /dev/null
+++ b/docs/data/joy/components/input/InputColors.tsx.preview
@@ -0,0 +1,4 @@
+<Input placeholder="Type in here…" variant="outlined" color="primary" />
+<Input placeholder="Type in here…" variant="outlined" color="neutral" />
+<Input placeholder="Type in here…" variant="outlined" color="danger" />
+<Input placeholder="Type in here…" variant="outlined" color="warning" />
\ No newline at end of file

From da129a869bdf05073835e94bc4bc9eef308bd464 Mon Sep 17 00:00:00 2001
From: Benny Joo <sldisek783@gmail.com>
Date: Wed, 14 Dec 2022 13:12:32 +0000
Subject: [PATCH 04/21] Add Decorators demo

---
 .../joy/components/input/InputDecorators.js   | 36 +++++++++++++++++++
 .../joy/components/input/InputDecorators.tsx  | 36 +++++++++++++++++++
 2 files changed, 72 insertions(+)
 create mode 100644 docs/data/joy/components/input/InputDecorators.js
 create mode 100644 docs/data/joy/components/input/InputDecorators.tsx

diff --git a/docs/data/joy/components/input/InputDecorators.js b/docs/data/joy/components/input/InputDecorators.js
new file mode 100644
index 00000000000000..ddec7c89d1ddeb
--- /dev/null
+++ b/docs/data/joy/components/input/InputDecorators.js
@@ -0,0 +1,36 @@
+import * as React from 'react';
+import Box from '@mui/joy/Box';
+import IconButton from '@mui/joy/IconButton';
+import Input from '@mui/joy/Input';
+import Typography from '@mui/joy/Typography';
+
+export default function InputDecorators() {
+  const [text, setText] = React.useState('');
+  const addEmoji = (emoji) => () => setText(`${text}${emoji}`);
+  return (
+    <Input
+      placeholder="Type in here…"
+      value={text}
+      onChange={(event) => setText(event.target.value)}
+      startDecorator={
+        <Box sx={{ display: 'flex', gap: 2 }}>
+          <IconButton variant="outlined" color="neutral" onClick={addEmoji('👍')}>
+            👍
+          </IconButton>
+          <IconButton variant="outlined" color="neutral" onClick={addEmoji('🏖')}>
+            🏖
+          </IconButton>
+          <IconButton variant="outlined" color="neutral" onClick={addEmoji('😍')}>
+            😍
+          </IconButton>
+        </Box>
+      }
+      endDecorator={
+        <Typography level="body3" sx={{ ml: 'auto' }}>
+          {text.length} character(s)
+        </Typography>
+      }
+      sx={{ minWidth: 300 }}
+    />
+  );
+}
diff --git a/docs/data/joy/components/input/InputDecorators.tsx b/docs/data/joy/components/input/InputDecorators.tsx
new file mode 100644
index 00000000000000..5b3eac54dc4258
--- /dev/null
+++ b/docs/data/joy/components/input/InputDecorators.tsx
@@ -0,0 +1,36 @@
+import * as React from 'react';
+import Box from '@mui/joy/Box';
+import IconButton from '@mui/joy/IconButton';
+import Input from '@mui/joy/Input';
+import Typography from '@mui/joy/Typography';
+
+export default function InputDecorators() {
+  const [text, setText] = React.useState('');
+  const addEmoji = (emoji: string) => () => setText(`${text}${emoji}`);
+  return (
+    <Input
+      placeholder="Type in here…"
+      value={text}
+      onChange={(event) => setText(event.target.value)}
+      startDecorator={
+        <Box sx={{ display: 'flex', gap: 2 }}>
+          <IconButton variant="outlined" color="neutral" onClick={addEmoji('👍')}>
+            👍
+          </IconButton>
+          <IconButton variant="outlined" color="neutral" onClick={addEmoji('🏖')}>
+            🏖
+          </IconButton>
+          <IconButton variant="outlined" color="neutral" onClick={addEmoji('😍')}>
+            😍
+          </IconButton>
+        </Box>
+      }
+      endDecorator={
+        <Typography level="body3" sx={{ ml: 'auto' }}>
+          {text.length} character(s)
+        </Typography>
+      }
+      sx={{ minWidth: 300 }}
+    />
+  );
+}

From 7a0fedd42f6b02a9b3f4b66e0b27636649c800bc Mon Sep 17 00:00:00 2001
From: Benny Joo <sldisek783@gmail.com>
Date: Wed, 14 Dec 2022 13:12:39 +0000
Subject: [PATCH 05/21] Add Field demo

---
 docs/data/joy/components/input/InputField.js  | 15 +++++++++++++++
 docs/data/joy/components/input/InputField.tsx | 15 +++++++++++++++
 2 files changed, 30 insertions(+)
 create mode 100644 docs/data/joy/components/input/InputField.js
 create mode 100644 docs/data/joy/components/input/InputField.tsx

diff --git a/docs/data/joy/components/input/InputField.js b/docs/data/joy/components/input/InputField.js
new file mode 100644
index 00000000000000..563cc7b2f3db53
--- /dev/null
+++ b/docs/data/joy/components/input/InputField.js
@@ -0,0 +1,15 @@
+import * as React from 'react';
+import FormControl from '@mui/joy/FormControl';
+import FormLabel from '@mui/joy/FormLabel';
+import FormHelperText from '@mui/joy/FormHelperText';
+import Input from '@mui/joy/Input';
+
+export default function InputField() {
+  return (
+    <FormControl>
+      <FormLabel>Label</FormLabel>
+      <Input placeholder="Placeholder" />
+      <FormHelperText>This is a helper text.</FormHelperText>
+    </FormControl>
+  );
+}
diff --git a/docs/data/joy/components/input/InputField.tsx b/docs/data/joy/components/input/InputField.tsx
new file mode 100644
index 00000000000000..563cc7b2f3db53
--- /dev/null
+++ b/docs/data/joy/components/input/InputField.tsx
@@ -0,0 +1,15 @@
+import * as React from 'react';
+import FormControl from '@mui/joy/FormControl';
+import FormLabel from '@mui/joy/FormLabel';
+import FormHelperText from '@mui/joy/FormHelperText';
+import Input from '@mui/joy/Input';
+
+export default function InputField() {
+  return (
+    <FormControl>
+      <FormLabel>Label</FormLabel>
+      <Input placeholder="Placeholder" />
+      <FormHelperText>This is a helper text.</FormHelperText>
+    </FormControl>
+  );
+}

From 9068e6bd45ae5e74d94d292c830909ec31d32931 Mon Sep 17 00:00:00 2001
From: Benny Joo <sldisek783@gmail.com>
Date: Wed, 14 Dec 2022 13:12:49 +0000
Subject: [PATCH 06/21] Add Form Props demo

---
 .../components/input/InputField.tsx.preview   |  5 +++
 .../joy/components/input/InputFormProps.js    | 33 +++++++++++++++++++
 .../joy/components/input/InputFormProps.tsx   | 33 +++++++++++++++++++
 .../input/InputFormProps.tsx.preview          | 13 ++++++++
 4 files changed, 84 insertions(+)
 create mode 100644 docs/data/joy/components/input/InputField.tsx.preview
 create mode 100644 docs/data/joy/components/input/InputFormProps.js
 create mode 100644 docs/data/joy/components/input/InputFormProps.tsx
 create mode 100644 docs/data/joy/components/input/InputFormProps.tsx.preview

diff --git a/docs/data/joy/components/input/InputField.tsx.preview b/docs/data/joy/components/input/InputField.tsx.preview
new file mode 100644
index 00000000000000..96205c163b0132
--- /dev/null
+++ b/docs/data/joy/components/input/InputField.tsx.preview
@@ -0,0 +1,5 @@
+<FormControl>
+  <FormLabel>Label</FormLabel>
+  <Input placeholder="Placeholder" />
+  <FormHelperText>This is a helper text.</FormHelperText>
+</FormControl>
\ No newline at end of file
diff --git a/docs/data/joy/components/input/InputFormProps.js b/docs/data/joy/components/input/InputFormProps.js
new file mode 100644
index 00000000000000..a198681d470d5c
--- /dev/null
+++ b/docs/data/joy/components/input/InputFormProps.js
@@ -0,0 +1,33 @@
+import * as React from 'react';
+import Box from '@mui/joy/Box';
+import Button from '@mui/joy/Button';
+import Input from '@mui/joy/Input';
+
+export default function InputFormProps() {
+  return (
+    <Box
+      sx={{
+        py: 2,
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 2,
+        alignItems: 'center',
+        flexWrap: 'wrap',
+      }}
+    >
+      <form
+        onSubmit={(event) => {
+          event.preventDefault();
+        }}
+      >
+        <Input
+          placeholder="Try to submit with no text!"
+          required
+          sx={{ mb: 1, fontSize: 'var(--joy-fontSize-sm)' }}
+        />
+        <Input placeholder="It is disabled" disabled sx={{ mb: 1 }} />
+        <Button type="submit">Submit</Button>
+      </form>
+    </Box>
+  );
+}
diff --git a/docs/data/joy/components/input/InputFormProps.tsx b/docs/data/joy/components/input/InputFormProps.tsx
new file mode 100644
index 00000000000000..a198681d470d5c
--- /dev/null
+++ b/docs/data/joy/components/input/InputFormProps.tsx
@@ -0,0 +1,33 @@
+import * as React from 'react';
+import Box from '@mui/joy/Box';
+import Button from '@mui/joy/Button';
+import Input from '@mui/joy/Input';
+
+export default function InputFormProps() {
+  return (
+    <Box
+      sx={{
+        py: 2,
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 2,
+        alignItems: 'center',
+        flexWrap: 'wrap',
+      }}
+    >
+      <form
+        onSubmit={(event) => {
+          event.preventDefault();
+        }}
+      >
+        <Input
+          placeholder="Try to submit with no text!"
+          required
+          sx={{ mb: 1, fontSize: 'var(--joy-fontSize-sm)' }}
+        />
+        <Input placeholder="It is disabled" disabled sx={{ mb: 1 }} />
+        <Button type="submit">Submit</Button>
+      </form>
+    </Box>
+  );
+}
diff --git a/docs/data/joy/components/input/InputFormProps.tsx.preview b/docs/data/joy/components/input/InputFormProps.tsx.preview
new file mode 100644
index 00000000000000..b56827f175d39d
--- /dev/null
+++ b/docs/data/joy/components/input/InputFormProps.tsx.preview
@@ -0,0 +1,13 @@
+<form
+  onSubmit={(event) => {
+    event.preventDefault();
+  }}
+>
+  <Input
+    placeholder="Try to submit with no text!"
+    required
+    sx={{ mb: 1, fontSize: 'var(--joy-fontSize-sm)' }}
+  />
+  <Input placeholder="It is disabled" disabled sx={{ mb: 1 }} />
+  <Button type="submit">Submit</Button>
+</form>
\ No newline at end of file

From 89202365298c9e84b7cc378a55fdda356e8d2954 Mon Sep 17 00:00:00 2001
From: Benny Joo <sldisek783@gmail.com>
Date: Wed, 14 Dec 2022 13:12:56 +0000
Subject: [PATCH 07/21] Add Sizes demo

---
 docs/data/joy/components/input/InputSizes.js        | 13 +++++++++++++
 docs/data/joy/components/input/InputSizes.tsx       | 13 +++++++++++++
 .../joy/components/input/InputSizes.tsx.preview     |  3 +++
 3 files changed, 29 insertions(+)
 create mode 100644 docs/data/joy/components/input/InputSizes.js
 create mode 100644 docs/data/joy/components/input/InputSizes.tsx
 create mode 100644 docs/data/joy/components/input/InputSizes.tsx.preview

diff --git a/docs/data/joy/components/input/InputSizes.js b/docs/data/joy/components/input/InputSizes.js
new file mode 100644
index 00000000000000..5a42730be78512
--- /dev/null
+++ b/docs/data/joy/components/input/InputSizes.js
@@ -0,0 +1,13 @@
+import * as React from 'react';
+import Box from '@mui/joy/Box';
+import Input from '@mui/joy/Input';
+
+export default function InputSizes() {
+  return (
+    <Box sx={{ display: 'flex', gap: 2, alignItems: 'center', flexWrap: 'wrap' }}>
+      <Input size="sm" placeholder="Small" />
+      <Input size="md" placeholder="Medium" />
+      <Input size="lg" placeholder="Large" />
+    </Box>
+  );
+}
diff --git a/docs/data/joy/components/input/InputSizes.tsx b/docs/data/joy/components/input/InputSizes.tsx
new file mode 100644
index 00000000000000..5a42730be78512
--- /dev/null
+++ b/docs/data/joy/components/input/InputSizes.tsx
@@ -0,0 +1,13 @@
+import * as React from 'react';
+import Box from '@mui/joy/Box';
+import Input from '@mui/joy/Input';
+
+export default function InputSizes() {
+  return (
+    <Box sx={{ display: 'flex', gap: 2, alignItems: 'center', flexWrap: 'wrap' }}>
+      <Input size="sm" placeholder="Small" />
+      <Input size="md" placeholder="Medium" />
+      <Input size="lg" placeholder="Large" />
+    </Box>
+  );
+}
diff --git a/docs/data/joy/components/input/InputSizes.tsx.preview b/docs/data/joy/components/input/InputSizes.tsx.preview
new file mode 100644
index 00000000000000..7dfbc51f0b5cfa
--- /dev/null
+++ b/docs/data/joy/components/input/InputSizes.tsx.preview
@@ -0,0 +1,3 @@
+<Input size="sm" placeholder="Small" />
+<Input size="md" placeholder="Medium" />
+<Input size="lg" placeholder="Large" />
\ No newline at end of file

From 16c6e68165015913a14d28736edb3f61dde198fe Mon Sep 17 00:00:00 2001
From: Benny Joo <sldisek783@gmail.com>
Date: Wed, 14 Dec 2022 13:13:02 +0000
Subject: [PATCH 08/21] Add playground

---
 docs/data/joy/components/input/InputUsage.js | 41 ++++++++++++++++++++
 1 file changed, 41 insertions(+)
 create mode 100644 docs/data/joy/components/input/InputUsage.js

diff --git a/docs/data/joy/components/input/InputUsage.js b/docs/data/joy/components/input/InputUsage.js
new file mode 100644
index 00000000000000..766d20007f102c
--- /dev/null
+++ b/docs/data/joy/components/input/InputUsage.js
@@ -0,0 +1,41 @@
+import * as React from 'react';
+import JoyUsageDemo from 'docs/src/modules/components/JoyUsageDemo';
+import Input from '@mui/joy/Input';
+
+export default function InputUsage() {
+  return (
+    <JoyUsageDemo
+      componentName="Input"
+      data={[
+        {
+          propName: 'variant',
+          knob: 'select',
+          defaultValue: 'outlined',
+          options: ['plain', 'outlined', 'soft', 'solid'],
+        },
+        {
+          propName: 'color',
+          knob: 'color',
+          defaultValue: 'neutral',
+        },
+        {
+          propName: 'size',
+          knob: 'radio',
+          options: ['sm', 'md', 'lg'],
+          defaultValue: 'md',
+        },
+        {
+          propName: 'placeholder',
+          knob: 'input',
+          defaultValue: 'Type something…',
+        },
+        {
+          propName: 'disabled',
+          knob: 'switch',
+          defaultValue: false,
+        },
+      ]}
+      renderDemo={(props) => <Input {...props} />}
+    />
+  );
+}

From 5d54d74a486cd3786836f366a9124cb70898ba39 Mon Sep 17 00:00:00 2001
From: Benny Joo <sldisek783@gmail.com>
Date: Wed, 14 Dec 2022 13:13:08 +0000
Subject: [PATCH 09/21] Add Validation demo

---
 docs/data/joy/components/input/InputValidation.js     | 11 +++++++++++
 docs/data/joy/components/input/InputValidation.tsx    | 11 +++++++++++
 .../joy/components/input/InputValidation.tsx.preview  |  1 +
 3 files changed, 23 insertions(+)
 create mode 100644 docs/data/joy/components/input/InputValidation.js
 create mode 100644 docs/data/joy/components/input/InputValidation.tsx
 create mode 100644 docs/data/joy/components/input/InputValidation.tsx.preview

diff --git a/docs/data/joy/components/input/InputValidation.js b/docs/data/joy/components/input/InputValidation.js
new file mode 100644
index 00000000000000..daec7adf96e884
--- /dev/null
+++ b/docs/data/joy/components/input/InputValidation.js
@@ -0,0 +1,11 @@
+import * as React from 'react';
+import Box from '@mui/joy/Box';
+import Input from '@mui/joy/Input';
+
+export default function InputValidation() {
+  return (
+    <Box sx={{ p: 2 }}>
+      <Input placeholder="Type in here…" error defaultValue="Oh no, error found!" />
+    </Box>
+  );
+}
diff --git a/docs/data/joy/components/input/InputValidation.tsx b/docs/data/joy/components/input/InputValidation.tsx
new file mode 100644
index 00000000000000..daec7adf96e884
--- /dev/null
+++ b/docs/data/joy/components/input/InputValidation.tsx
@@ -0,0 +1,11 @@
+import * as React from 'react';
+import Box from '@mui/joy/Box';
+import Input from '@mui/joy/Input';
+
+export default function InputValidation() {
+  return (
+    <Box sx={{ p: 2 }}>
+      <Input placeholder="Type in here…" error defaultValue="Oh no, error found!" />
+    </Box>
+  );
+}
diff --git a/docs/data/joy/components/input/InputValidation.tsx.preview b/docs/data/joy/components/input/InputValidation.tsx.preview
new file mode 100644
index 00000000000000..8b8c0b28d7458d
--- /dev/null
+++ b/docs/data/joy/components/input/InputValidation.tsx.preview
@@ -0,0 +1 @@
+<Input placeholder="Type in here…" error defaultValue="Oh no, error found!" />
\ No newline at end of file

From f15d0d67fa4b726471581b5c177569696c315324 Mon Sep 17 00:00:00 2001
From: Benny Joo <sldisek783@gmail.com>
Date: Wed, 14 Dec 2022 13:13:13 +0000
Subject: [PATCH 10/21] Add Variants demo

---
 .../joy/components/input/InputVariants.js     | 22 +++++++++++++++++++
 .../joy/components/input/InputVariants.tsx    | 22 +++++++++++++++++++
 .../input/InputVariants.tsx.preview           |  4 ++++
 3 files changed, 48 insertions(+)
 create mode 100644 docs/data/joy/components/input/InputVariants.js
 create mode 100644 docs/data/joy/components/input/InputVariants.tsx
 create mode 100644 docs/data/joy/components/input/InputVariants.tsx.preview

diff --git a/docs/data/joy/components/input/InputVariants.js b/docs/data/joy/components/input/InputVariants.js
new file mode 100644
index 00000000000000..9adc36009ed771
--- /dev/null
+++ b/docs/data/joy/components/input/InputVariants.js
@@ -0,0 +1,22 @@
+import * as React from 'react';
+import Box from '@mui/joy/Box';
+import Input from '@mui/joy/Input';
+
+export default function InputVariants() {
+  return (
+    <Box
+      sx={{
+        py: 2,
+        display: 'grid',
+        gap: 2,
+        alignItems: 'center',
+        flexWrap: 'wrap',
+      }}
+    >
+      <Input placeholder="Type in here…" variant="solid" />
+      <Input placeholder="Type in here…" variant="soft" />
+      <Input placeholder="Type in here…" variant="outlined" />
+      <Input placeholder="Type in here…" variant="plain" />
+    </Box>
+  );
+}
diff --git a/docs/data/joy/components/input/InputVariants.tsx b/docs/data/joy/components/input/InputVariants.tsx
new file mode 100644
index 00000000000000..9adc36009ed771
--- /dev/null
+++ b/docs/data/joy/components/input/InputVariants.tsx
@@ -0,0 +1,22 @@
+import * as React from 'react';
+import Box from '@mui/joy/Box';
+import Input from '@mui/joy/Input';
+
+export default function InputVariants() {
+  return (
+    <Box
+      sx={{
+        py: 2,
+        display: 'grid',
+        gap: 2,
+        alignItems: 'center',
+        flexWrap: 'wrap',
+      }}
+    >
+      <Input placeholder="Type in here…" variant="solid" />
+      <Input placeholder="Type in here…" variant="soft" />
+      <Input placeholder="Type in here…" variant="outlined" />
+      <Input placeholder="Type in here…" variant="plain" />
+    </Box>
+  );
+}
diff --git a/docs/data/joy/components/input/InputVariants.tsx.preview b/docs/data/joy/components/input/InputVariants.tsx.preview
new file mode 100644
index 00000000000000..d4e040e53497f2
--- /dev/null
+++ b/docs/data/joy/components/input/InputVariants.tsx.preview
@@ -0,0 +1,4 @@
+<Input placeholder="Type in here…" variant="solid" />
+<Input placeholder="Type in here…" variant="soft" />
+<Input placeholder="Type in here…" variant="outlined" />
+<Input placeholder="Type in here…" variant="plain" />
\ No newline at end of file

From 2198e043d406dae6ac417cc02dd3bb7e80b0a713 Mon Sep 17 00:00:00 2001
From: Benny Joo <sldisek783@gmail.com>
Date: Wed, 21 Dec 2022 11:10:49 -0500
Subject: [PATCH 11/21] Redirect user from text field doc to input doc

---
 docs/public/_redirects | 1 +
 1 file changed, 1 insertion(+)

diff --git a/docs/public/_redirects b/docs/public/_redirects
index 7a3b4edc3653f2..9d5294372469ce 100644
--- a/docs/public/_redirects
+++ b/docs/public/_redirects
@@ -365,6 +365,7 @@ https://v4.material-ui.com/* https://v4.mui.com/:splat 301!
 /zh/blog/* /blog/:splat 301
 /pt/blog/* /blog/:splat 301
 /:lang/size-snapshot/ /size-snapshot/ 301
+/joy-ui/react-text-field/ /joy-ui/react-input/ 301
 /joy-ui/customization/themed-tokens/ /joy-ui/customization/themed-components/ 301
 /:lang/joy-ui/customization/one-off-styling/ /:lang/joy-ui/customization/approaches/#one-off-customization 301
 /joy-ui/customization/one-off-styling/ /joy-ui/customization/approaches/#one-off-customization 301

From d218386b692b7d3ea4be71aeea96b97535750efb Mon Sep 17 00:00:00 2001
From: Benny Joo <sldisek783@gmail.com>
Date: Wed, 21 Dec 2022 12:35:13 -0500
Subject: [PATCH 12/21] Add BasicInput demos

---
 docs/data/joy/components/input/BasicInput.js          | 11 +++++++++++
 docs/data/joy/components/input/BasicInput.tsx         | 11 +++++++++++
 docs/data/joy/components/input/BasicInput.tsx.preview |  1 +
 3 files changed, 23 insertions(+)
 create mode 100644 docs/data/joy/components/input/BasicInput.js
 create mode 100644 docs/data/joy/components/input/BasicInput.tsx
 create mode 100644 docs/data/joy/components/input/BasicInput.tsx.preview

diff --git a/docs/data/joy/components/input/BasicInput.js b/docs/data/joy/components/input/BasicInput.js
new file mode 100644
index 00000000000000..799d138b1fadf7
--- /dev/null
+++ b/docs/data/joy/components/input/BasicInput.js
@@ -0,0 +1,11 @@
+import * as React from 'react';
+import Box from '@mui/joy/Box';
+import Input from '@mui/joy/Input';
+
+export default function BasicInput() {
+  return (
+    <Box sx={{ width: '100%' }}>
+      <Input placeholder="Type in here…" />
+    </Box>
+  );
+}
diff --git a/docs/data/joy/components/input/BasicInput.tsx b/docs/data/joy/components/input/BasicInput.tsx
new file mode 100644
index 00000000000000..799d138b1fadf7
--- /dev/null
+++ b/docs/data/joy/components/input/BasicInput.tsx
@@ -0,0 +1,11 @@
+import * as React from 'react';
+import Box from '@mui/joy/Box';
+import Input from '@mui/joy/Input';
+
+export default function BasicInput() {
+  return (
+    <Box sx={{ width: '100%' }}>
+      <Input placeholder="Type in here…" />
+    </Box>
+  );
+}
diff --git a/docs/data/joy/components/input/BasicInput.tsx.preview b/docs/data/joy/components/input/BasicInput.tsx.preview
new file mode 100644
index 00000000000000..c02c7c3762aebe
--- /dev/null
+++ b/docs/data/joy/components/input/BasicInput.tsx.preview
@@ -0,0 +1 @@
+<Input placeholder="Type in here…" />
\ No newline at end of file

From d11c7f24703d8f37fb93b1c9e5b92a022b785cfb Mon Sep 17 00:00:00 2001
From: Benny Joo <sldisek783@gmail.com>
Date: Wed, 21 Dec 2022 12:35:18 -0500
Subject: [PATCH 13/21] Polish

---
 docs/data/joy/components/input/input.md | 33 +++++++++++++++++++------
 1 file changed, 25 insertions(+), 8 deletions(-)

diff --git a/docs/data/joy/components/input/input.md b/docs/data/joy/components/input/input.md
index c3da8d8533d14d..94001fdc7b8224 100644
--- a/docs/data/joy/components/input/input.md
+++ b/docs/data/joy/components/input/input.md
@@ -6,26 +6,28 @@ unstyled: /base/react-input/
 
 # Input
 
-<p class="description">Input component gives you a input HTML element that automatically adjusts its height to match the length of the content within.</p>
+<p class="description">An input is a UI element that accepts text data from the user.</p>
 
 ## Introduction
 
+The Input component replaces the native HTML `<input>` tag, and offers expanded customization and accessibility features.
+
 {{"demo": "InputUsage.js", "hideToolbar": true, "bg": "gradient"}}
 
 {{"component": "modules/components/ComponentLinkHeader.js", "design": false}}
 
-## Component
-
-After [installation](/joy-ui/getting-started/installation/), you can start building with this component using the following basic elements:
+## Basics
 
 ```jsx
 import Input from '@mui/joy/Input';
-
-export default function MyApp() {
-  return <Input placeholder="Type anything…" />;
-}
 ```
 
+The Input component, unlike the [Textarea](/joy-ui/react-textarea/), does not wrap the text data by default, as shown below:
+
+{{"demo": "BasicInput.js"}}
+
+## Customization
+
 ### Variants
 
 The input component supports the four global variants: solid (default), soft, outlined, and plain.
@@ -65,10 +67,15 @@ Note that using the `color` prop with danger as value gets the same result:
 ### Decorators
 
 Use the `startDecorator` and/or `endDecorator` props to add supporting icons or elements to the input.
+
 It's usually more common to see input components using decorators at the top and bottom.
 
 {{"demo": "InputDecorators.js"}}
 
+## Common examples
+
+### TBD
+
 ## Accessibility
 
 In order for the input to be accessible, **it should be linked to a label**.
@@ -89,3 +96,13 @@ Alternatively, you can do it manually by targeting the input slot:
   }}
 />
 ```
+
+## Anatomy
+
+The Input component is composed of a root `<div>` with an input `<input>` nested inside.
+
+```html
+<div class="JoyInput-root">
+  <input class="JoyInput-input" />
+</div>
+```

From 62e522769bbe821178789c07b40a35f2964d0239 Mon Sep 17 00:00:00 2001
From: Benny Joo <sldisek783@gmail.com>
Date: Wed, 21 Dec 2022 13:23:40 -0500
Subject: [PATCH 14/21] Add a common example: Newsletter subscription

---
 .../joy/components/input/InputSubscription.js | 70 ++++++++++++++++++
 .../input/InputSubscription.preview           |  8 +++
 .../components/input/InputSubscription.tsx    | 72 +++++++++++++++++++
 docs/data/joy/components/input/input.md       |  4 +-
 4 files changed, 153 insertions(+), 1 deletion(-)
 create mode 100644 docs/data/joy/components/input/InputSubscription.js
 create mode 100644 docs/data/joy/components/input/InputSubscription.preview
 create mode 100644 docs/data/joy/components/input/InputSubscription.tsx

diff --git a/docs/data/joy/components/input/InputSubscription.js b/docs/data/joy/components/input/InputSubscription.js
new file mode 100644
index 00000000000000..295c92b03bd8a0
--- /dev/null
+++ b/docs/data/joy/components/input/InputSubscription.js
@@ -0,0 +1,70 @@
+import * as React from 'react';
+import FormControl from '@mui/joy/FormControl';
+import FormLabel from '@mui/joy/FormLabel';
+import FormHelperText from '@mui/joy/FormHelperText';
+import Input from '@mui/joy/Input';
+import Button from '@mui/joy/Button';
+
+export default function InputSubscription() {
+  const [form, setForm] = React.useState({
+    email: '',
+    status: 'initial',
+  });
+
+  const handleSubmit = () => {
+    setForm((current) => ({ ...current, status: 'loading' }));
+    try {
+      // Replace timeout with real backend operation
+      setTimeout(() => {
+        setForm({ email: '', status: 'sent' });
+      }, 1500);
+    } catch (error) {
+      setForm((current) => ({ ...current, status: 'failure' }));
+    }
+  };
+
+  return (
+    <FormControl>
+      <FormLabel
+        sx={(theme) => ({
+          '--FormLabel-color': theme.vars.palette.primary[400],
+        })}
+      >
+        MUI Newsletter
+      </FormLabel>
+      <Input
+        sx={{ pt: 0.5, pb: 0.5 }}
+        placeholder="mail@mui.com"
+        type="email"
+        value={form.email}
+        onChange={(event) =>
+          setForm({ email: event.target.value, status: 'initial' })
+        }
+        error={form.status === 'failure'}
+        endDecorator={
+          <Button
+            variant="solid"
+            color="primary"
+            sx={{ ml: 1, height: '45px' }}
+            disabled={form.email.length === 0 || form.status === 'failure'}
+            loading={form.status === 'loading'}
+            onClick={handleSubmit}
+          >
+            Subscribe
+          </Button>
+        }
+      />
+      {form.status === 'failure' && (
+        <FormHelperText sx={(theme) => ({ color: theme.vars.palette.danger[400] })}>
+          Oops! something went wrong, please try again later.
+        </FormHelperText>
+      )}
+
+      {form.status === 'sent' && (
+        <FormHelperText sx={(theme) => ({ color: theme.vars.palette.primary[400] })}>
+          You are all set!
+        </FormHelperText>
+      )}
+    </FormControl>
+  );
+}
diff --git a/docs/data/joy/components/input/InputSubscription.preview b/docs/data/joy/components/input/InputSubscription.preview
new file mode 100644
index 00000000000000..ac2260335145a2
--- /dev/null
+++ b/docs/data/joy/components/input/InputSubscription.preview
@@ -0,0 +1,8 @@
+<Input
+  placeholder="mail@mui.com"
+  endDecorator={
+    <Button variant="solid" color="primary" sx={{ ml: 1 }}>
+      Subscribe
+    </Button>
+  }
+/>
\ No newline at end of file
diff --git a/docs/data/joy/components/input/InputSubscription.tsx b/docs/data/joy/components/input/InputSubscription.tsx
new file mode 100644
index 00000000000000..a830fb0b7d794c
--- /dev/null
+++ b/docs/data/joy/components/input/InputSubscription.tsx
@@ -0,0 +1,72 @@
+import * as React from 'react';
+import FormControl from '@mui/joy/FormControl';
+import FormLabel from '@mui/joy/FormLabel';
+import FormHelperText from '@mui/joy/FormHelperText';
+import Input from '@mui/joy/Input';
+import Button from '@mui/joy/Button';
+
+export default function InputSubscription() {
+  const [form, setForm] = React.useState<{
+    email: string;
+    status: 'initial' | 'loading' | 'failure' | 'sent';
+  }>({
+    email: '',
+    status: 'initial',
+  });
+
+  const handleSubmit = () => {
+    setForm((current) => ({ ...current, status: 'loading' }));
+    try {
+      // Replace timeout with real backend operation
+      setTimeout(() => {
+        setForm({ email: '', status: 'sent' });
+      }, 1500);
+    } catch (error) {
+      setForm((current) => ({ ...current, status: 'failure' }));
+    }
+  };
+
+  return (
+    <FormControl>
+      <FormLabel
+        sx={(theme) => ({
+          '--FormLabel-color': theme.vars.palette.primary[400],
+        })}
+      >
+        MUI Newsletter
+      </FormLabel>
+      <Input
+        sx={{ pt: 0.5, pb: 0.5 }}
+        placeholder="mail@mui.com"
+        type="email"
+        value={form.email}
+        onChange={(event) =>
+          setForm({ email: event.target.value, status: 'initial' })
+        }
+        error={form.status === 'failure'}
+        endDecorator={
+          <Button
+            variant="solid"
+            color="primary"
+            sx={{ ml: 1, height: '45px' }}
+            disabled={form.email.length === 0 || form.status === 'failure'}
+            loading={form.status === 'loading'}
+            onClick={handleSubmit}
+          >
+            Subscribe
+          </Button>
+        }
+      />
+      {form.status === 'failure' && (
+        <FormHelperText sx={(theme) => ({ color: theme.vars.palette.danger[400] })}>
+          Oops! something went wrong, please try again later.
+        </FormHelperText>
+      )}
+      {form.status === 'sent' && (
+        <FormHelperText sx={(theme) => ({ color: theme.vars.palette.primary[400] })}>
+          You are all set!
+        </FormHelperText>
+      )}
+    </FormControl>
+  );
+}
diff --git a/docs/data/joy/components/input/input.md b/docs/data/joy/components/input/input.md
index 94001fdc7b8224..3d12b56079c151 100644
--- a/docs/data/joy/components/input/input.md
+++ b/docs/data/joy/components/input/input.md
@@ -74,7 +74,9 @@ It's usually more common to see input components using decorators at the top and
 
 ## Common examples
 
-### TBD
+### Newsletter Subscription
+
+{{"demo": "InputSubscription.js"}}
 
 ## Accessibility
 

From 1e2e647e43892205f198d9ae3c83ef774cd8b540 Mon Sep 17 00:00:00 2001
From: Benny Joo <sldisek783@gmail.com>
Date: Thu, 22 Dec 2022 09:03:37 -0500
Subject: [PATCH 15/21] address code review comments

---
 .../joy/components/input/InputSubscription.js | 89 ++++++++++---------
 .../components/input/InputSubscription.tsx    | 89 ++++++++++---------
 2 files changed, 96 insertions(+), 82 deletions(-)

diff --git a/docs/data/joy/components/input/InputSubscription.js b/docs/data/joy/components/input/InputSubscription.js
index 295c92b03bd8a0..736f21d153cb1e 100644
--- a/docs/data/joy/components/input/InputSubscription.js
+++ b/docs/data/joy/components/input/InputSubscription.js
@@ -11,7 +11,9 @@ export default function InputSubscription() {
     status: 'initial',
   });
 
-  const handleSubmit = () => {
+  const handleSubmit = (event) => {
+    console.log('a');
+    event.preventDefault();
     setForm((current) => ({ ...current, status: 'loading' }));
     try {
       // Replace timeout with real backend operation
@@ -24,47 +26,52 @@ export default function InputSubscription() {
   };
 
   return (
-    <FormControl>
-      <FormLabel
-        sx={(theme) => ({
-          '--FormLabel-color': theme.vars.palette.primary[400],
-        })}
-      >
-        MUI Newsletter
-      </FormLabel>
-      <Input
-        sx={{ pt: 0.5, pb: 0.5 }}
-        placeholder="mail@mui.com"
-        type="email"
-        value={form.email}
-        onChange={(event) =>
-          setForm({ email: event.target.value, status: 'initial' })
-        }
-        error={form.status === 'failure'}
-        endDecorator={
-          <Button
-            variant="solid"
-            color="primary"
-            sx={{ ml: 1, height: '45px' }}
-            disabled={form.email.length === 0 || form.status === 'failure'}
-            loading={form.status === 'loading'}
-            onClick={handleSubmit}
+    <form onSubmit={handleSubmit} id="demo">
+      <FormControl>
+        <FormLabel
+          sx={(theme) => ({
+            '--FormLabel-color': theme.vars.palette.primary[400],
+          })}
+        >
+          MUI Newsletter
+        </FormLabel>
+        <Input
+          sx={{ '--Input-decorator-childHeight': '45px' }}
+          placeholder="mail@mui.com"
+          type="email"
+          required
+          value={form.email}
+          onChange={(event) =>
+            setForm({ email: event.target.value, status: 'initial' })
+          }
+          error={form.status === 'failure'}
+          endDecorator={
+            <Button
+              variant="solid"
+              color="primary"
+              loading={form.status === 'loading'}
+              type="submit"
+            >
+              Subscribe
+            </Button>
+          }
+        />
+        {form.status === 'failure' && (
+          <FormHelperText
+            sx={(theme) => ({ color: theme.vars.palette.danger[400] })}
           >
-            Subscribe
-          </Button>
-        }
-      />
-      {form.status === 'failure' && (
-        <FormHelperText sx={(theme) => ({ color: theme.vars.palette.danger[400] })}>
-          Oops! something went wrong, please try again later.
-        </FormHelperText>
-      )}
+            Oops! something went wrong, please try again later.
+          </FormHelperText>
+        )}
 
-      {form.status === 'sent' && (
-        <FormHelperText sx={(theme) => ({ color: theme.vars.palette.primary[400] })}>
-          You are all set!
-        </FormHelperText>
-      )}
-    </FormControl>
+        {form.status === 'sent' && (
+          <FormHelperText
+            sx={(theme) => ({ color: theme.vars.palette.primary[400] })}
+          >
+            You are all set!
+          </FormHelperText>
+        )}
+      </FormControl>
+    </form>
   );
 }
diff --git a/docs/data/joy/components/input/InputSubscription.tsx b/docs/data/joy/components/input/InputSubscription.tsx
index a830fb0b7d794c..d20e4c48547aa6 100644
--- a/docs/data/joy/components/input/InputSubscription.tsx
+++ b/docs/data/joy/components/input/InputSubscription.tsx
@@ -14,7 +14,9 @@ export default function InputSubscription() {
     status: 'initial',
   });
 
-  const handleSubmit = () => {
+  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+    console.log('a');
+    event.preventDefault();
     setForm((current) => ({ ...current, status: 'loading' }));
     try {
       // Replace timeout with real backend operation
@@ -27,46 +29,51 @@ export default function InputSubscription() {
   };
 
   return (
-    <FormControl>
-      <FormLabel
-        sx={(theme) => ({
-          '--FormLabel-color': theme.vars.palette.primary[400],
-        })}
-      >
-        MUI Newsletter
-      </FormLabel>
-      <Input
-        sx={{ pt: 0.5, pb: 0.5 }}
-        placeholder="mail@mui.com"
-        type="email"
-        value={form.email}
-        onChange={(event) =>
-          setForm({ email: event.target.value, status: 'initial' })
-        }
-        error={form.status === 'failure'}
-        endDecorator={
-          <Button
-            variant="solid"
-            color="primary"
-            sx={{ ml: 1, height: '45px' }}
-            disabled={form.email.length === 0 || form.status === 'failure'}
-            loading={form.status === 'loading'}
-            onClick={handleSubmit}
+    <form onSubmit={handleSubmit} id="demo">
+      <FormControl>
+        <FormLabel
+          sx={(theme) => ({
+            '--FormLabel-color': theme.vars.palette.primary[400],
+          })}
+        >
+          MUI Newsletter
+        </FormLabel>
+        <Input
+          sx={{ '--Input-decorator-childHeight': '45px' }}
+          placeholder="mail@mui.com"
+          type="email"
+          required
+          value={form.email}
+          onChange={(event) =>
+            setForm({ email: event.target.value, status: 'initial' })
+          }
+          error={form.status === 'failure'}
+          endDecorator={
+            <Button
+              variant="solid"
+              color="primary"
+              loading={form.status === 'loading'}
+              type="submit"
+            >
+              Subscribe
+            </Button>
+          }
+        />
+        {form.status === 'failure' && (
+          <FormHelperText
+            sx={(theme) => ({ color: theme.vars.palette.danger[400] })}
           >
-            Subscribe
-          </Button>
-        }
-      />
-      {form.status === 'failure' && (
-        <FormHelperText sx={(theme) => ({ color: theme.vars.palette.danger[400] })}>
-          Oops! something went wrong, please try again later.
-        </FormHelperText>
-      )}
-      {form.status === 'sent' && (
-        <FormHelperText sx={(theme) => ({ color: theme.vars.palette.primary[400] })}>
-          You are all set!
-        </FormHelperText>
-      )}
-    </FormControl>
+            Oops! something went wrong, please try again later.
+          </FormHelperText>
+        )}
+        {form.status === 'sent' && (
+          <FormHelperText
+            sx={(theme) => ({ color: theme.vars.palette.primary[400] })}
+          >
+            You are all set!
+          </FormHelperText>
+        )}
+      </FormControl>
+    </form>
   );
 }

From 2c02d8f1227b97ad37ffffb42a6b957fe4e0131f Mon Sep 17 00:00:00 2001
From: Benny Joo <sldisek783@gmail.com>
Date: Thu, 22 Dec 2022 09:53:16 -0500
Subject: [PATCH 16/21] remove log

---
 docs/data/joy/components/input/InputSubscription.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/docs/data/joy/components/input/InputSubscription.tsx b/docs/data/joy/components/input/InputSubscription.tsx
index d20e4c48547aa6..9130a5f18e5e59 100644
--- a/docs/data/joy/components/input/InputSubscription.tsx
+++ b/docs/data/joy/components/input/InputSubscription.tsx
@@ -15,7 +15,6 @@ export default function InputSubscription() {
   });
 
   const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
-    console.log('a');
     event.preventDefault();
     setForm((current) => ({ ...current, status: 'loading' }));
     try {

From f6ea094630617aef2f94816413b1f2de22c6b5dc Mon Sep 17 00:00:00 2001
From: Benny Joo <sldisek783@gmail.com>
Date: Thu, 22 Dec 2022 09:59:40 -0500
Subject: [PATCH 17/21] add css variable playground

---
 .../joy/components/input/InputSubscription.js |  1 -
 .../joy/components/input/InputVariables.js    | 64 +++++++++++++++++++
 docs/data/joy/components/input/input.md       |  8 +++
 .../modules/components/JoyVariablesDemo.tsx   | 25 ++++----
 4 files changed, 86 insertions(+), 12 deletions(-)
 create mode 100644 docs/data/joy/components/input/InputVariables.js

diff --git a/docs/data/joy/components/input/InputSubscription.js b/docs/data/joy/components/input/InputSubscription.js
index 736f21d153cb1e..5ac52c9f7903ee 100644
--- a/docs/data/joy/components/input/InputSubscription.js
+++ b/docs/data/joy/components/input/InputSubscription.js
@@ -12,7 +12,6 @@ export default function InputSubscription() {
   });
 
   const handleSubmit = (event) => {
-    console.log('a');
     event.preventDefault();
     setForm((current) => ({ ...current, status: 'loading' }));
     try {
diff --git a/docs/data/joy/components/input/InputVariables.js b/docs/data/joy/components/input/InputVariables.js
new file mode 100644
index 00000000000000..ccc0d49622256b
--- /dev/null
+++ b/docs/data/joy/components/input/InputVariables.js
@@ -0,0 +1,64 @@
+import * as React from 'react';
+import JoyVariablesDemo from 'docs/src/modules/components/JoyVariablesDemo';
+import Box from '@mui/joy/Box';
+import Input from '@mui/joy/Input';
+import Button from '@mui/joy/Button';
+import MailIcon from '@mui/icons-material/Mail';
+
+export default function InputVariables() {
+  return (
+    <JoyVariablesDemo
+      componentName="Input"
+      renderCode={(formattedSx) => `<Input
+  startDecorator={<MailIcon />}
+  endDecorator={<Button>Message</Button>}${formattedSx ? `${formattedSx}>` : '\n>'}`}
+      data={[
+        {
+          var: '--Input-radius',
+          defaultValue: '8px',
+        },
+        {
+          var: '--Input-gap',
+          defaultValue: '8px',
+        },
+        {
+          var: '--Input-placeholderOpacity',
+          defaultValue: 0.5,
+        },
+        {
+          var: '--Input-focusedThickness',
+          defaultValue: '2px',
+        },
+        {
+          var: '--Input-minHeight',
+          defaultValue: '40px',
+        },
+        {
+          var: '--Input-paddingInline',
+          defaultValue: '12px',
+        },
+        {
+          var: '--Input-decorator-childHeight',
+          defaultValue: '32px',
+        },
+      ]}
+      renderDemo={(sx) => (
+        <Box
+          sx={{
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            gap: 1,
+          }}
+        >
+          <Input
+            startDecorator={<MailIcon />}
+            endDecorator={<Button>Message</Button>}
+            placeholder="Type in here…"
+            sx={sx}
+          />
+        </Box>
+      )}
+    />
+  );
+}
diff --git a/docs/data/joy/components/input/input.md b/docs/data/joy/components/input/input.md
index 3d12b56079c151..f69115632ff87b 100644
--- a/docs/data/joy/components/input/input.md
+++ b/docs/data/joy/components/input/input.md
@@ -78,6 +78,14 @@ It's usually more common to see input components using decorators at the top and
 
 {{"demo": "InputSubscription.js"}}
 
+## CSS variables
+
+Play around with all the CSS variables available in the input component to see how the design changes.
+
+You can use those to customize the component on both the `sx` prop and the theme.
+
+{{"demo": "InputVariables.js", "hideToolbar": true}}
+
 ## Accessibility
 
 In order for the input to be accessible, **it should be linked to a label**.
diff --git a/docs/src/modules/components/JoyVariablesDemo.tsx b/docs/src/modules/components/JoyVariablesDemo.tsx
index 8ef657dc55ea3e..861acb8320506e 100644
--- a/docs/src/modules/components/JoyVariablesDemo.tsx
+++ b/docs/src/modules/components/JoyVariablesDemo.tsx
@@ -15,11 +15,11 @@ import KeyboardArrowDown from '@mui/icons-material/KeyboardArrowDown';
 
 interface DataItem {
   var: string;
-  defaultValue?: string;
+  defaultValue?: string | number;
   helperText?: string;
 }
 
-function formatSx(sx: { [k: string]: string }) {
+function formatSx(sx: { [k: string]: string | number }) {
   const lines = Object.keys(sx);
   if (!lines.length) {
     return '';
@@ -82,11 +82,11 @@ export default function JoyVariablesDemo(props: {
   componentName: string;
   childrenAccepted?: boolean;
   data: Array<DataItem | [string, Array<DataItem>, { defaultOpen?: boolean } | undefined]>;
-  renderDemo: (sx: { [k: string]: string }) => React.ReactElement;
+  renderDemo: (sx: { [k: string]: string | number }) => React.ReactElement;
   renderCode?: (formattedSx: string) => string;
 }) {
   const { componentName, data = [], childrenAccepted = false, renderCode } = props;
-  const [sx, setSx] = React.useState<{ [k: string]: string }>({});
+  const [sx, setSx] = React.useState<{ [k: string]: string | number }>({});
   return (
     <Box
       sx={{
@@ -174,7 +174,7 @@ export default function JoyVariablesDemo(props: {
                     size="sm"
                     variant="outlined"
                     helperText={item.helperText}
-                    value={Number(resolvedValue?.replace('px', '')) || ''}
+                    value={Number(`${resolvedValue}`?.replace('px', '')) || ''}
                     slotProps={{
                       input: {
                         onKeyDown: (event) => {
@@ -190,10 +190,12 @@ export default function JoyVariablesDemo(props: {
                     }}
                     endDecorator={
                       <React.Fragment>
-                        <Typography level="body3" mr={0.5}>
-                          px
-                        </Typography>
-                        {sx[item.var] && sx[item.var] !== item.defaultValue && (
+                        {typeof resolvedValue === 'string' ? (
+                          <Typography level="body3" mr={0.5}>
+                            px
+                          </Typography>
+                        ) : null}
+                        {sx[item.var] && sx[item.var] !== item.defaultValue ? (
                           <IconButton
                             tabIndex={-1}
                             variant="plain"
@@ -209,7 +211,7 @@ export default function JoyVariablesDemo(props: {
                           >
                             <ReplayRoundedIcon fontSize="sm" />
                           </IconButton>
-                        )}
+                        ) : null}
                       </React.Fragment>
                     }
                     type="number"
@@ -224,7 +226,8 @@ export default function JoyVariablesDemo(props: {
                         }
                         return {
                           ...prevSx,
-                          [item.var]: `${value}px`,
+                          [item.var]:
+                            typeof resolvedValue === 'string' ? `${value}px` : Number(value),
                         };
                       });
                     }}

From bf96758aed03ce2decd9d4f14ff17811c744c197 Mon Sep 17 00:00:00 2001
From: Benny Joo <sldisek783@gmail.com>
Date: Mon, 26 Dec 2022 11:16:34 -0500
Subject: [PATCH 18/21] [JoyVariablesDemo] DataItem can accept inputAttributes
 prop now + Replace text field with input/form-control/form-label

---
 .../modules/components/JoyVariablesDemo.tsx   | 140 +++++++++---------
 1 file changed, 73 insertions(+), 67 deletions(-)

diff --git a/docs/src/modules/components/JoyVariablesDemo.tsx b/docs/src/modules/components/JoyVariablesDemo.tsx
index 861acb8320506e..91dd3e73e5afb3 100644
--- a/docs/src/modules/components/JoyVariablesDemo.tsx
+++ b/docs/src/modules/components/JoyVariablesDemo.tsx
@@ -4,12 +4,14 @@ import Link from '@mui/joy/Link';
 import List from '@mui/joy/List';
 import ListDivider from '@mui/joy/ListDivider';
 import IconButton from '@mui/joy/IconButton';
-import TextField from '@mui/joy/TextField';
+import FormControl from '@mui/joy/FormControl';
+import FormLabel from '@mui/joy/FormLabel';
+import FormHelperText from '@mui/joy/FormHelperText';
 import Typography from '@mui/joy/Typography';
 import Sheet from '@mui/joy/Sheet';
 import BrandingProvider from 'docs/src/BrandingProvider';
 import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
-import { inputClasses } from '@mui/joy/Input';
+import Input, { inputClasses } from '@mui/joy/Input';
 import ReplayRoundedIcon from '@mui/icons-material/ReplayRounded';
 import KeyboardArrowDown from '@mui/icons-material/KeyboardArrowDown';
 
@@ -17,6 +19,7 @@ interface DataItem {
   var: string;
   defaultValue?: string | number;
   helperText?: string;
+  inputAttributes?: React.InputHTMLAttributes<HTMLInputElement>;
 }
 
 function formatSx(sx: { [k: string]: string | number }) {
@@ -167,77 +170,80 @@ export default function JoyVariablesDemo(props: {
             {data.map((dataItem) => {
               function renderField(item: DataItem) {
                 const resolvedValue = sx[item.var] || item.defaultValue;
+                const resolvedInputAttributes = item.inputAttributes || {};
                 return (
-                  <TextField
-                    key={item.var}
-                    label={item.var}
-                    size="sm"
-                    variant="outlined"
-                    helperText={item.helperText}
-                    value={Number(`${resolvedValue}`?.replace('px', '')) || ''}
-                    slotProps={{
-                      input: {
-                        onKeyDown: (event) => {
-                          if ((event.ctrlKey || event.metaKey) && event.code === 'KeyZ') {
-                            setSx((prevSx) => {
-                              const newSx = { ...prevSx };
-                              delete newSx[item.var];
-                              return newSx;
-                            });
-                          }
-                        },
-                      },
-                    }}
-                    endDecorator={
-                      <React.Fragment>
-                        {typeof resolvedValue === 'string' ? (
-                          <Typography level="body3" mr={0.5}>
-                            px
-                          </Typography>
-                        ) : null}
-                        {sx[item.var] && sx[item.var] !== item.defaultValue ? (
-                          <IconButton
-                            tabIndex={-1}
-                            variant="plain"
-                            color="neutral"
-                            size="sm"
-                            onClick={() =>
+                  <FormControl key={item.var}>
+                    <FormLabel>{item.var}</FormLabel>
+                    <Input
+                      size="sm"
+                      variant="outlined"
+                      value={Number(`${resolvedValue}`?.replace('px', '')) || ''}
+                      slotProps={{
+                        input: {
+                          onKeyDown: (event) => {
+                            if ((event.ctrlKey || event.metaKey) && event.code === 'KeyZ') {
                               setSx((prevSx) => {
                                 const newSx = { ...prevSx };
                                 delete newSx[item.var];
                                 return newSx;
-                              })
+                              });
                             }
-                          >
-                            <ReplayRoundedIcon fontSize="sm" />
-                          </IconButton>
-                        ) : null}
-                      </React.Fragment>
-                    }
-                    type="number"
-                    onChange={(event) => {
-                      const { value } = event.target;
-                      setSx((prevSx) => {
-                        if (!value) {
-                          const newSx = { ...prevSx };
-                          // @ts-ignore
-                          delete newSx[item.var];
-                          return newSx;
-                        }
-                        return {
-                          ...prevSx,
-                          [item.var]:
-                            typeof resolvedValue === 'string' ? `${value}px` : Number(value),
-                        };
-                      });
-                    }}
-                    sx={{
-                      minWidth: 0,
-                      flexGrow: 1,
-                      [`& .${inputClasses.root}`]: { '--Input-paddingInline': '0.5rem' },
-                      [`& .${inputClasses.endDecorator}`]: { alignItems: 'center' },
-                    }}
-                  />
+                          },
+                          ...resolvedInputAttributes,
+                        },
+                      }}
+                      endDecorator={
+                        <React.Fragment>
+                          {typeof resolvedValue === 'string' ? (
+                            <Typography level="body3" mr={0.5}>
+                              px
+                            </Typography>
+                          ) : null}
+                          {sx[item.var] && sx[item.var] !== item.defaultValue ? (
+                            <IconButton
+                              tabIndex={-1}
+                              variant="plain"
+                              color="neutral"
+                              size="sm"
+                              onClick={() =>
+                                setSx((prevSx) => {
+                                  const newSx = { ...prevSx };
+                                  delete newSx[item.var];
+                                  return newSx;
+                                })
+                              }
+                            >
+                              <ReplayRoundedIcon fontSize="sm" />
+                            </IconButton>
+                          ) : null}
+                        </React.Fragment>
+                      }
+                      type="number"
+                      onChange={(event) => {
+                        const { value } = event.target;
+                        setSx((prevSx) => {
+                          if (!value) {
+                            const newSx = { ...prevSx };
+                            // @ts-ignore
+                            delete newSx[item.var];
+                            return newSx;
+                          }
+                          return {
+                            ...prevSx,
+                            [item.var]:
+                              typeof resolvedValue === 'string' ? `${value}px` : Number(value),
+                          };
+                        });
+                      }}
+                      sx={{
+                        minWidth: 0,
+                        flexGrow: 1,
+                        [`& .${inputClasses.root}`]: { '--Input-paddingInline': '0.5rem' },
+                        [`& .${inputClasses.endDecorator}`]: { alignItems: 'center' },
+                      }}
+                    />
+                    <FormHelperText>{item.helperText}</FormHelperText>
+                  </FormControl>
                 );
               }
               if (Array.isArray(dataItem)) {

From 3e92fc4acf26b8b361ad88103a055e1cccfc86e7 Mon Sep 17 00:00:00 2001
From: Benny Joo <sldisek783@gmail.com>
Date: Mon, 26 Dec 2022 11:16:54 -0500
Subject: [PATCH 19/21] Pass inputAttributes to variables demo for
 placeholderOpacity css var

---
 docs/data/joy/components/input/InputVariables.js | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/docs/data/joy/components/input/InputVariables.js b/docs/data/joy/components/input/InputVariables.js
index ccc0d49622256b..07a23b039ac1c9 100644
--- a/docs/data/joy/components/input/InputVariables.js
+++ b/docs/data/joy/components/input/InputVariables.js
@@ -24,6 +24,11 @@ export default function InputVariables() {
         {
           var: '--Input-placeholderOpacity',
           defaultValue: 0.5,
+          inputAttributes: {
+            min: 0.1,
+            max: 1,
+            step: 0.1,
+          },
         },
         {
           var: '--Input-focusedThickness',

From 34244fa9f10eee6ba6427893347316d53a336d6b Mon Sep 17 00:00:00 2001
From: Benny Joo <sldisek783@gmail.com>
Date: Mon, 26 Dec 2022 11:22:13 -0500
Subject: [PATCH 20/21] Add demo for inner html props for <input>

---
 .../joy/components/input/InputSlotProps.js    | 23 +++++++++++++++++++
 .../joy/components/input/InputSlotProps.tsx   | 23 +++++++++++++++++++
 .../input/InputSlotProps.tsx.preview          | 14 +++++++++++
 docs/data/joy/components/input/input.md       |  8 +++++--
 4 files changed, 66 insertions(+), 2 deletions(-)
 create mode 100644 docs/data/joy/components/input/InputSlotProps.js
 create mode 100644 docs/data/joy/components/input/InputSlotProps.tsx
 create mode 100644 docs/data/joy/components/input/InputSlotProps.tsx.preview

diff --git a/docs/data/joy/components/input/InputSlotProps.js b/docs/data/joy/components/input/InputSlotProps.js
new file mode 100644
index 00000000000000..58e74a2b2b3343
--- /dev/null
+++ b/docs/data/joy/components/input/InputSlotProps.js
@@ -0,0 +1,23 @@
+import * as React from 'react';
+import Input from '@mui/joy/Input';
+
+export default function InputSlotProps() {
+  const [value, setValue] = React.useState('1');
+
+  return (
+    <Input
+      type="number"
+      slotProps={{
+        input: {
+          min: 1,
+          max: 5,
+        },
+      }}
+      sx={{ width: 300 }}
+      value={value}
+      onChange={(event) => {
+        setValue(event.target.value);
+      }}
+    />
+  );
+}
diff --git a/docs/data/joy/components/input/InputSlotProps.tsx b/docs/data/joy/components/input/InputSlotProps.tsx
new file mode 100644
index 00000000000000..58e74a2b2b3343
--- /dev/null
+++ b/docs/data/joy/components/input/InputSlotProps.tsx
@@ -0,0 +1,23 @@
+import * as React from 'react';
+import Input from '@mui/joy/Input';
+
+export default function InputSlotProps() {
+  const [value, setValue] = React.useState('1');
+
+  return (
+    <Input
+      type="number"
+      slotProps={{
+        input: {
+          min: 1,
+          max: 5,
+        },
+      }}
+      sx={{ width: 300 }}
+      value={value}
+      onChange={(event) => {
+        setValue(event.target.value);
+      }}
+    />
+  );
+}
diff --git a/docs/data/joy/components/input/InputSlotProps.tsx.preview b/docs/data/joy/components/input/InputSlotProps.tsx.preview
new file mode 100644
index 00000000000000..ac79a11970d0ec
--- /dev/null
+++ b/docs/data/joy/components/input/InputSlotProps.tsx.preview
@@ -0,0 +1,14 @@
+<Input
+  type="number"
+  slotProps={{
+    input: {
+      min: 1,
+      max: 5,
+    },
+  }}
+  sx={{ width: 300 }}
+  value={value}
+  onChange={(event) => {
+    setValue(event.target.value);
+  }}
+/>
\ No newline at end of file
diff --git a/docs/data/joy/components/input/input.md b/docs/data/joy/components/input/input.md
index f69115632ff87b..c600e8e3727c74 100644
--- a/docs/data/joy/components/input/input.md
+++ b/docs/data/joy/components/input/input.md
@@ -22,8 +22,6 @@ The Input component replaces the native HTML `<input>` tag, and offers expanded
 import Input from '@mui/joy/Input';
 ```
 
-The Input component, unlike the [Textarea](/joy-ui/react-textarea/), does not wrap the text data by default, as shown below:
-
 {{"demo": "BasicInput.js"}}
 
 ## Customization
@@ -72,6 +70,12 @@ It's usually more common to see input components using decorators at the top and
 
 {{"demo": "InputDecorators.js"}}
 
+## Inner HTML input
+
+To pass any props to the inner HTML `<input>`, use `slotProps={{ input: { ...props } }}`.
+
+{{"demo": "InputSlotProps.js"}}
+
 ## Common examples
 
 ### Newsletter Subscription

From 9230e2e019f6c5c145e4104537f1205527bfe6cc Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Tue, 27 Dec 2022 11:54:09 +0700
Subject: [PATCH 21/21] update demos

---
 docs/data/joy/components/input/BasicInput.js  |  7 +--
 docs/data/joy/components/input/BasicInput.tsx |  7 +--
 .../joy/components/input/InputDecorators.js   | 45 +++++++++----------
 .../joy/components/input/InputDecorators.tsx  | 45 +++++++++----------
 docs/data/joy/components/input/InputSizes.js  |  6 +--
 docs/data/joy/components/input/InputSizes.tsx |  6 +--
 .../joy/components/input/InputSlotProps.js    |  9 +---
 .../joy/components/input/InputSlotProps.tsx   |  9 +---
 .../input/InputSlotProps.tsx.preview          |  7 +--
 .../joy/components/input/InputSubscription.js | 23 +++++-----
 .../components/input/InputSubscription.tsx    | 23 +++++-----
 docs/data/joy/components/input/input.md       | 10 ++++-
 12 files changed, 87 insertions(+), 110 deletions(-)

diff --git a/docs/data/joy/components/input/BasicInput.js b/docs/data/joy/components/input/BasicInput.js
index 799d138b1fadf7..7de6710986ced3 100644
--- a/docs/data/joy/components/input/BasicInput.js
+++ b/docs/data/joy/components/input/BasicInput.js
@@ -1,11 +1,6 @@
 import * as React from 'react';
-import Box from '@mui/joy/Box';
 import Input from '@mui/joy/Input';
 
 export default function BasicInput() {
-  return (
-    <Box sx={{ width: '100%' }}>
-      <Input placeholder="Type in here…" />
-    </Box>
-  );
+  return <Input placeholder="Type in here…" />;
 }
diff --git a/docs/data/joy/components/input/BasicInput.tsx b/docs/data/joy/components/input/BasicInput.tsx
index 799d138b1fadf7..7de6710986ced3 100644
--- a/docs/data/joy/components/input/BasicInput.tsx
+++ b/docs/data/joy/components/input/BasicInput.tsx
@@ -1,11 +1,6 @@
 import * as React from 'react';
-import Box from '@mui/joy/Box';
 import Input from '@mui/joy/Input';
 
 export default function BasicInput() {
-  return (
-    <Box sx={{ width: '100%' }}>
-      <Input placeholder="Type in here…" />
-    </Box>
-  );
+  return <Input placeholder="Type in here…" />;
 }
diff --git a/docs/data/joy/components/input/InputDecorators.js b/docs/data/joy/components/input/InputDecorators.js
index ddec7c89d1ddeb..48c7eb82123de3 100644
--- a/docs/data/joy/components/input/InputDecorators.js
+++ b/docs/data/joy/components/input/InputDecorators.js
@@ -1,36 +1,31 @@
 import * as React from 'react';
-import Box from '@mui/joy/Box';
-import IconButton from '@mui/joy/IconButton';
+import Divider from '@mui/joy/Divider';
 import Input from '@mui/joy/Input';
-import Typography from '@mui/joy/Typography';
+import Select from '@mui/joy/Select';
+import Option from '@mui/joy/Option';
 
 export default function InputDecorators() {
-  const [text, setText] = React.useState('');
-  const addEmoji = (emoji) => () => setText(`${text}${emoji}`);
+  const [currency, setCurrency] = React.useState('dollar');
   return (
     <Input
-      placeholder="Type in here…"
-      value={text}
-      onChange={(event) => setText(event.target.value)}
-      startDecorator={
-        <Box sx={{ display: 'flex', gap: 2 }}>
-          <IconButton variant="outlined" color="neutral" onClick={addEmoji('👍')}>
-            👍
-          </IconButton>
-          <IconButton variant="outlined" color="neutral" onClick={addEmoji('🏖')}>
-            🏖
-          </IconButton>
-          <IconButton variant="outlined" color="neutral" onClick={addEmoji('😍')}>
-            😍
-          </IconButton>
-        </Box>
-      }
+      placeholder="Amount"
+      startDecorator={{ dollar: '$', baht: '฿', yen: '¥' }[currency]}
       endDecorator={
-        <Typography level="body3" sx={{ ml: 'auto' }}>
-          {text.length} character(s)
-        </Typography>
+        <React.Fragment>
+          <Divider orientation="vertical" />
+          <Select
+            variant="plain"
+            value={currency}
+            onChange={(_, value) => setCurrency(value)}
+            sx={{ mr: -1.5, '&:hover': { bgcolor: 'transparent' } }}
+          >
+            <Option value="dollar">US dollar</Option>
+            <Option value="baht">Thai baht</Option>
+            <Option value="yen">Japanese yen</Option>
+          </Select>
+        </React.Fragment>
       }
-      sx={{ minWidth: 300 }}
+      sx={{ width: 300 }}
     />
   );
 }
diff --git a/docs/data/joy/components/input/InputDecorators.tsx b/docs/data/joy/components/input/InputDecorators.tsx
index 5b3eac54dc4258..64f1337e341098 100644
--- a/docs/data/joy/components/input/InputDecorators.tsx
+++ b/docs/data/joy/components/input/InputDecorators.tsx
@@ -1,36 +1,31 @@
 import * as React from 'react';
-import Box from '@mui/joy/Box';
-import IconButton from '@mui/joy/IconButton';
+import Divider from '@mui/joy/Divider';
 import Input from '@mui/joy/Input';
-import Typography from '@mui/joy/Typography';
+import Select from '@mui/joy/Select';
+import Option from '@mui/joy/Option';
 
 export default function InputDecorators() {
-  const [text, setText] = React.useState('');
-  const addEmoji = (emoji: string) => () => setText(`${text}${emoji}`);
+  const [currency, setCurrency] = React.useState('dollar');
   return (
     <Input
-      placeholder="Type in here…"
-      value={text}
-      onChange={(event) => setText(event.target.value)}
-      startDecorator={
-        <Box sx={{ display: 'flex', gap: 2 }}>
-          <IconButton variant="outlined" color="neutral" onClick={addEmoji('👍')}>
-            👍
-          </IconButton>
-          <IconButton variant="outlined" color="neutral" onClick={addEmoji('🏖')}>
-            🏖
-          </IconButton>
-          <IconButton variant="outlined" color="neutral" onClick={addEmoji('😍')}>
-            😍
-          </IconButton>
-        </Box>
-      }
+      placeholder="Amount"
+      startDecorator={{ dollar: '$', baht: '฿', yen: '¥' }[currency]}
       endDecorator={
-        <Typography level="body3" sx={{ ml: 'auto' }}>
-          {text.length} character(s)
-        </Typography>
+        <React.Fragment>
+          <Divider orientation="vertical" />
+          <Select
+            variant="plain"
+            value={currency}
+            onChange={(_, value) => setCurrency(value!)}
+            sx={{ mr: -1.5, '&:hover': { bgcolor: 'transparent' } }}
+          >
+            <Option value="dollar">US dollar</Option>
+            <Option value="baht">Thai baht</Option>
+            <Option value="yen">Japanese yen</Option>
+          </Select>
+        </React.Fragment>
       }
-      sx={{ minWidth: 300 }}
+      sx={{ width: 300 }}
     />
   );
 }
diff --git a/docs/data/joy/components/input/InputSizes.js b/docs/data/joy/components/input/InputSizes.js
index 5a42730be78512..018fa03368ffd7 100644
--- a/docs/data/joy/components/input/InputSizes.js
+++ b/docs/data/joy/components/input/InputSizes.js
@@ -1,13 +1,13 @@
 import * as React from 'react';
-import Box from '@mui/joy/Box';
 import Input from '@mui/joy/Input';
+import Stack from '@mui/joy/Stack';
 
 export default function InputSizes() {
   return (
-    <Box sx={{ display: 'flex', gap: 2, alignItems: 'center', flexWrap: 'wrap' }}>
+    <Stack spacing={2}>
       <Input size="sm" placeholder="Small" />
       <Input size="md" placeholder="Medium" />
       <Input size="lg" placeholder="Large" />
-    </Box>
+    </Stack>
   );
 }
diff --git a/docs/data/joy/components/input/InputSizes.tsx b/docs/data/joy/components/input/InputSizes.tsx
index 5a42730be78512..018fa03368ffd7 100644
--- a/docs/data/joy/components/input/InputSizes.tsx
+++ b/docs/data/joy/components/input/InputSizes.tsx
@@ -1,13 +1,13 @@
 import * as React from 'react';
-import Box from '@mui/joy/Box';
 import Input from '@mui/joy/Input';
+import Stack from '@mui/joy/Stack';
 
 export default function InputSizes() {
   return (
-    <Box sx={{ display: 'flex', gap: 2, alignItems: 'center', flexWrap: 'wrap' }}>
+    <Stack spacing={2}>
       <Input size="sm" placeholder="Small" />
       <Input size="md" placeholder="Medium" />
       <Input size="lg" placeholder="Large" />
-    </Box>
+    </Stack>
   );
 }
diff --git a/docs/data/joy/components/input/InputSlotProps.js b/docs/data/joy/components/input/InputSlotProps.js
index 58e74a2b2b3343..afe4da94c17298 100644
--- a/docs/data/joy/components/input/InputSlotProps.js
+++ b/docs/data/joy/components/input/InputSlotProps.js
@@ -2,22 +2,17 @@ import * as React from 'react';
 import Input from '@mui/joy/Input';
 
 export default function InputSlotProps() {
-  const [value, setValue] = React.useState('1');
-
   return (
     <Input
       type="number"
+      defaultValue={2.5}
       slotProps={{
         input: {
           min: 1,
           max: 5,
+          step: 0.1,
         },
       }}
-      sx={{ width: 300 }}
-      value={value}
-      onChange={(event) => {
-        setValue(event.target.value);
-      }}
     />
   );
 }
diff --git a/docs/data/joy/components/input/InputSlotProps.tsx b/docs/data/joy/components/input/InputSlotProps.tsx
index 58e74a2b2b3343..afe4da94c17298 100644
--- a/docs/data/joy/components/input/InputSlotProps.tsx
+++ b/docs/data/joy/components/input/InputSlotProps.tsx
@@ -2,22 +2,17 @@ import * as React from 'react';
 import Input from '@mui/joy/Input';
 
 export default function InputSlotProps() {
-  const [value, setValue] = React.useState('1');
-
   return (
     <Input
       type="number"
+      defaultValue={2.5}
       slotProps={{
         input: {
           min: 1,
           max: 5,
+          step: 0.1,
         },
       }}
-      sx={{ width: 300 }}
-      value={value}
-      onChange={(event) => {
-        setValue(event.target.value);
-      }}
     />
   );
 }
diff --git a/docs/data/joy/components/input/InputSlotProps.tsx.preview b/docs/data/joy/components/input/InputSlotProps.tsx.preview
index ac79a11970d0ec..074cffa80faeb2 100644
--- a/docs/data/joy/components/input/InputSlotProps.tsx.preview
+++ b/docs/data/joy/components/input/InputSlotProps.tsx.preview
@@ -1,14 +1,11 @@
 <Input
   type="number"
+  defaultValue={2.5}
   slotProps={{
     input: {
       min: 1,
       max: 5,
+      step: 0.1,
     },
   }}
-  sx={{ width: 300 }}
-  value={value}
-  onChange={(event) => {
-    setValue(event.target.value);
-  }}
 />
\ No newline at end of file
diff --git a/docs/data/joy/components/input/InputSubscription.js b/docs/data/joy/components/input/InputSubscription.js
index 5ac52c9f7903ee..5280acf6e6d2c5 100644
--- a/docs/data/joy/components/input/InputSubscription.js
+++ b/docs/data/joy/components/input/InputSubscription.js
@@ -6,21 +6,21 @@ import Input from '@mui/joy/Input';
 import Button from '@mui/joy/Button';
 
 export default function InputSubscription() {
-  const [form, setForm] = React.useState({
+  const [data, setData] = React.useState({
     email: '',
     status: 'initial',
   });
 
   const handleSubmit = (event) => {
     event.preventDefault();
-    setForm((current) => ({ ...current, status: 'loading' }));
+    setData((current) => ({ ...current, status: 'loading' }));
     try {
       // Replace timeout with real backend operation
       setTimeout(() => {
-        setForm({ email: '', status: 'sent' });
+        setData({ email: '', status: 'sent' });
       }, 1500);
     } catch (error) {
-      setForm((current) => ({ ...current, status: 'failure' }));
+      setData((current) => ({ ...current, status: 'failure' }));
     }
   };
 
@@ -29,7 +29,7 @@ export default function InputSubscription() {
       <FormControl>
         <FormLabel
           sx={(theme) => ({
-            '--FormLabel-color': theme.vars.palette.primary[400],
+            '--FormLabel-color': theme.vars.palette.primary.plainColor,
           })}
         >
           MUI Newsletter
@@ -39,23 +39,24 @@ export default function InputSubscription() {
           placeholder="mail@mui.com"
           type="email"
           required
-          value={form.email}
+          value={data.email}
           onChange={(event) =>
-            setForm({ email: event.target.value, status: 'initial' })
+            setData({ email: event.target.value, status: 'initial' })
           }
-          error={form.status === 'failure'}
+          error={data.status === 'failure'}
           endDecorator={
             <Button
               variant="solid"
               color="primary"
-              loading={form.status === 'loading'}
+              loading={data.status === 'loading'}
               type="submit"
+              sx={{ borderTopLeftRadius: 0, borderBottomLeftRadius: 0 }}
             >
               Subscribe
             </Button>
           }
         />
-        {form.status === 'failure' && (
+        {data.status === 'failure' && (
           <FormHelperText
             sx={(theme) => ({ color: theme.vars.palette.danger[400] })}
           >
@@ -63,7 +64,7 @@ export default function InputSubscription() {
           </FormHelperText>
         )}
 
-        {form.status === 'sent' && (
+        {data.status === 'sent' && (
           <FormHelperText
             sx={(theme) => ({ color: theme.vars.palette.primary[400] })}
           >
diff --git a/docs/data/joy/components/input/InputSubscription.tsx b/docs/data/joy/components/input/InputSubscription.tsx
index 9130a5f18e5e59..f07edccb1a352d 100644
--- a/docs/data/joy/components/input/InputSubscription.tsx
+++ b/docs/data/joy/components/input/InputSubscription.tsx
@@ -6,7 +6,7 @@ import Input from '@mui/joy/Input';
 import Button from '@mui/joy/Button';
 
 export default function InputSubscription() {
-  const [form, setForm] = React.useState<{
+  const [data, setData] = React.useState<{
     email: string;
     status: 'initial' | 'loading' | 'failure' | 'sent';
   }>({
@@ -16,14 +16,14 @@ export default function InputSubscription() {
 
   const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault();
-    setForm((current) => ({ ...current, status: 'loading' }));
+    setData((current) => ({ ...current, status: 'loading' }));
     try {
       // Replace timeout with real backend operation
       setTimeout(() => {
-        setForm({ email: '', status: 'sent' });
+        setData({ email: '', status: 'sent' });
       }, 1500);
     } catch (error) {
-      setForm((current) => ({ ...current, status: 'failure' }));
+      setData((current) => ({ ...current, status: 'failure' }));
     }
   };
 
@@ -32,7 +32,7 @@ export default function InputSubscription() {
       <FormControl>
         <FormLabel
           sx={(theme) => ({
-            '--FormLabel-color': theme.vars.palette.primary[400],
+            '--FormLabel-color': theme.vars.palette.primary.plainColor,
           })}
         >
           MUI Newsletter
@@ -42,30 +42,31 @@ export default function InputSubscription() {
           placeholder="mail@mui.com"
           type="email"
           required
-          value={form.email}
+          value={data.email}
           onChange={(event) =>
-            setForm({ email: event.target.value, status: 'initial' })
+            setData({ email: event.target.value, status: 'initial' })
           }
-          error={form.status === 'failure'}
+          error={data.status === 'failure'}
           endDecorator={
             <Button
               variant="solid"
               color="primary"
-              loading={form.status === 'loading'}
+              loading={data.status === 'loading'}
               type="submit"
+              sx={{ borderTopLeftRadius: 0, borderBottomLeftRadius: 0 }}
             >
               Subscribe
             </Button>
           }
         />
-        {form.status === 'failure' && (
+        {data.status === 'failure' && (
           <FormHelperText
             sx={(theme) => ({ color: theme.vars.palette.danger[400] })}
           >
             Oops! something went wrong, please try again later.
           </FormHelperText>
         )}
-        {form.status === 'sent' && (
+        {data.status === 'sent' && (
           <FormHelperText
             sx={(theme) => ({ color: theme.vars.palette.primary[400] })}
           >
diff --git a/docs/data/joy/components/input/input.md b/docs/data/joy/components/input/input.md
index c600e8e3727c74..88b3133b5a8992 100644
--- a/docs/data/joy/components/input/input.md
+++ b/docs/data/joy/components/input/input.md
@@ -32,12 +32,20 @@ The input component supports the four global variants: solid (default), soft, ou
 
 {{"demo": "InputVariants.js"}}
 
+:::info
+To learn how to add more variants to the component, check out [Themed components—Extend variants](/joy-ui/customization/themed-components/#extend-variants).
+:::
+
 ### Sizes
 
 The input component comes with three sizes out of the box: `sm`, `md` (the default), and `lg`.
 
 {{"demo": "InputSizes.js"}}
 
+:::info
+To learn how to add more sizes to the component, check out [Themed components—Extend sizes](/joy-ui/customization/themed-components/#extend-sizes).
+:::
+
 ### Colors
 
 Toggle the palette that's being used to color the by text field by using the `color` prop.
@@ -94,7 +102,7 @@ You can use those to customize the component on both the `sx` prop and the theme
 
 In order for the input to be accessible, **it should be linked to a label**.
 
-The `FormControl` automatically generates a unique id that links the input with the `FormLabel` component:
+The `FormControl` automatically generates a unique id that links the input with the `FormLabel` and `FormHelperText` components:
 
 {{"demo": "InputField.js"}}