diff --git a/docs/data/joy/components/textarea/ExampleTextareaComment.js b/docs/data/joy/components/textarea/ExampleTextareaComment.js
new file mode 100644
index 00000000000000..8fe408aaea358a
--- /dev/null
+++ b/docs/data/joy/components/textarea/ExampleTextareaComment.js
@@ -0,0 +1,88 @@
+import * as React from 'react';
+import Box from '@mui/joy/Box';
+import Button from '@mui/joy/Button';
+import FormLabel from '@mui/joy/FormLabel';
+import Textarea from '@mui/joy/Textarea';
+import IconButton from '@mui/joy/IconButton';
+import Menu from '@mui/joy/Menu';
+import MenuItem from '@mui/joy/MenuItem';
+import ListItemDecorator from '@mui/joy/ListItemDecorator';
+import FormatBold from '@mui/icons-material/FormatBold';
+import FormatItalic from '@mui/icons-material/FormatItalic';
+import KeyboardArrowDown from '@mui/icons-material/KeyboardArrowDown';
+import Check from '@mui/icons-material/Check';
+
+export default function TextareaValidator() {
+  const [italic, setItalic] = React.useState(false);
+  const [fontWeight, setFontWeight] = React.useState('normal');
+  const [anchorEl, setAnchorEl] = React.useState(null);
+  return (
+    <Box sx={{ p: 2 }}>
+      <FormLabel>Your comment</FormLabel>
+      <Textarea
+        placeholder="Type something here…"
+        minRows={3}
+        endDecorator={
+          <Box
+            sx={{
+              display: 'flex',
+              gap: 'var(--Textarea-paddingBlock)',
+              pt: 'var(--Textarea-paddingBlock)',
+              borderTop: '1px solid',
+              borderColor: 'divider',
+              flex: 'auto',
+            }}
+          >
+            <IconButton
+              variant="plain"
+              color="neutral"
+              onClick={(event) => setAnchorEl(event.currentTarget)}
+            >
+              <FormatBold />
+              <KeyboardArrowDown fontSize="md" />
+            </IconButton>
+            <Menu
+              anchorEl={anchorEl}
+              open={Boolean(anchorEl)}
+              onClose={() => setAnchorEl(null)}
+              size="sm"
+              placement="bottom-start"
+              sx={{ '--List-decorator-size': '24px' }}
+            >
+              {['200', 'normal', 'bold'].map((weight) => (
+                <MenuItem
+                  key={weight}
+                  selected={fontWeight === weight}
+                  onClick={() => {
+                    setFontWeight(weight);
+                    setAnchorEl(null);
+                  }}
+                  sx={{ fontWeight: weight }}
+                >
+                  <ListItemDecorator>
+                    {fontWeight === weight && <Check fontSize="sm" />}
+                  </ListItemDecorator>
+                  {weight === '200' ? 'lighter' : weight}
+                </MenuItem>
+              ))}
+            </Menu>
+            <IconButton
+              variant={italic ? 'soft' : 'plain'}
+              color={italic ? 'primary' : 'neutral'}
+              aria-pressed={italic}
+              onClick={() => setItalic((bool) => !bool)}
+            >
+              <FormatItalic />
+            </IconButton>
+            <Button sx={{ ml: 'auto' }}>Send</Button>
+          </Box>
+        }
+        sx={{
+          minWidth: 300,
+          fontWeight,
+          fontStyle: italic ? 'italic' : 'initial',
+        }}
+      />
+    </Box>
+  );
+}
diff --git a/docs/data/joy/components/textarea/TextareaColors.js b/docs/data/joy/components/textarea/TextareaColors.js
new file mode 100644
index 00000000000000..5c5bbf5d21c7f2
--- /dev/null
+++ b/docs/data/joy/components/textarea/TextareaColors.js
@@ -0,0 +1,42 @@
+import * as React from 'react';
+import Box from '@mui/joy/Box';
+import Textarea from '@mui/joy/Textarea';
+
+export default function TextareaColors() {
+  return (
+    <Box
+      sx={{
+        py: 2,
+        display: 'grid',
+        gap: 2,
+        alignItems: 'center',
+        flexWrap: 'wrap',
+      }}
+    >
+      <Textarea
+        label="Primary"
+        placeholder="Type in here…"
+        variant="outlined"
+        color="primary"
+      />
+      <Textarea
+        label="Neutral"
+        placeholder="Type in here…"
+        variant="outlined"
+        color="neutral"
+      />
+      <Textarea
+        label="Danger"
+        placeholder="Type in here…"
+        variant="outlined"
+        color="danger"
+      />
+      <Textarea
+        label="Warning"
+        placeholder="Type in here…"
+        variant="outlined"
+        color="warning"
+      />
+    </Box>
+  );
+}
diff --git a/docs/data/joy/components/textarea/TextareaDecorators.js b/docs/data/joy/components/textarea/TextareaDecorators.js
new file mode 100644
index 00000000000000..ff8b19d5c44614
--- /dev/null
+++ b/docs/data/joy/components/textarea/TextareaDecorators.js
@@ -0,0 +1,38 @@
+import * as React from 'react';
+import Box from '@mui/joy/Box';
+import IconButton from '@mui/joy/IconButton';
+import Textarea from '@mui/joy/Textarea';
+import Typography from '@mui/joy/Typography';
+
+export default function TextareaDecorators() {
+  const [text, setText] = React.useState('');
+  const addEmoji = (emoji) => () => setText(`${text}${emoji}`);
+  return (
+    <Textarea
+      placeholder="Type in here…"
+      value={text}
+      onChange={(event) => setText(event.target.value)}
+      minRows={2}
+      maxRows={4}
+      startDecorator={
+        <Box sx={{ display: 'flex', gap: 0.5 }}>
+          <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/textarea/TextareaFormProps.js b/docs/data/joy/components/textarea/TextareaFormProps.js
new file mode 100644
index 00000000000000..f7e560df97e2e0
--- /dev/null
+++ b/docs/data/joy/components/textarea/TextareaFormProps.js
@@ -0,0 +1,33 @@
+import * as React from 'react';
+import Box from '@mui/joy/Box';
+import Button from '@mui/joy/Button';
+import Textarea from '@mui/joy/Textarea';
+
+export default function TextareaFormProps() {
+  return (
+    <Box
+      sx={{
+        py: 2,
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 2,
+        alignItems: 'center',
+        flexWrap: 'wrap',
+      }}
+    >
+      <form
+        onSubmit={(event) => {
+          event.preventDefault();
+        }}
+      >
+        <Textarea
+          placeholder="Try to submit with empty text!"
+          required
+          sx={{ mb: 1 }}
+        />
+        <Textarea placeholder="It is disabled" disabled sx={{ mb: 1 }} />
+        <Button type="submit">Submit</Button>
+      </form>
+    </Box>
+  );
+}
diff --git a/docs/data/joy/components/textarea/TextareaRows.js b/docs/data/joy/components/textarea/TextareaRows.js
new file mode 100644
index 00000000000000..40f7333a0dd6d1
--- /dev/null
+++ b/docs/data/joy/components/textarea/TextareaRows.js
@@ -0,0 +1,16 @@
+import * as React from 'react';
+import Box from '@mui/joy/Box';
+import Textarea from '@mui/joy/Textarea';
+
+export default function TextareaValidator() {
+  return (
+    <Box sx={{ p: 2 }}>
+      <Textarea
+        placeholder="Type in here…"
+        defaultValue="Try to put the text more than 4 lines."
+        minRows={2}
+        maxRows={4}
+      />
+    </Box>
+  );
+}
diff --git a/docs/data/joy/components/textarea/TextareaSizes.js b/docs/data/joy/components/textarea/TextareaSizes.js
new file mode 100644
index 00000000000000..6fa2a7a0fc18c7
--- /dev/null
+++ b/docs/data/joy/components/textarea/TextareaSizes.js
@@ -0,0 +1,13 @@
+import * as React from 'react';
+import Box from '@mui/joy/Box';
+import Textarea from '@mui/joy/Textarea';
+
+export default function TextareaSizes() {
+  return (
+    <Box sx={{ display: 'flex', gap: 2, alignItems: 'center', flexWrap: 'wrap' }}>
+      <Textarea size="sm" label="Size" placeholder="Small" />
+      <Textarea size="md" label="Size" placeholder="Medium" />
+      <Textarea size="lg" label="Size" placeholder="Large" />
+    </Box>
+  );
+}
diff --git a/docs/data/joy/components/text-field/TextFieldUsage.tsx b/docs/data/joy/components/textarea/TextareaUsage.js
similarity index 64%
rename from docs/data/joy/components/text-field/TextFieldUsage.tsx
rename to docs/data/joy/components/textarea/TextareaUsage.js
index 07174896e47443..0d0618cf01d906 100644
--- a/docs/data/joy/components/text-field/TextFieldUsage.tsx
+++ b/docs/data/joy/components/textarea/TextareaUsage.js
@@ -1,12 +1,11 @@
 import * as React from 'react';
 import JoyUsageDemo from 'docs/src/modules/components/JoyUsageDemo';
-import Box from '@mui/joy/Box';
-import TextField from '@mui/joy/TextField';
+import Textarea from '@mui/joy/Textarea';
 
-export default function TextFieldUsage() {
+export default function TextareaUsage() {
   return (
     <JoyUsageDemo
-      componentName="TextField"
+      componentName="Textarea"
       data={[
         {
           propName: 'variant',
@@ -20,27 +19,23 @@ export default function TextFieldUsage() {
           options: ['sm', 'md', 'lg'],
           defaultValue: 'md',
         },
-        {
-          propName: 'label',
-          knob: 'input',
-          defaultValue: 'Label',
-        },
         {
           propName: 'placeholder',
           knob: 'input',
-          defaultValue: 'placeholder',
+          defaultValue: 'Type something…',
         },
         {
           propName: 'disabled',
           knob: 'switch',
           defaultValue: false,
         },
+        {
+          propName: 'minRows',
+          defaultValue: 2,
+          codeBlockDisplay: true,
+        },
       ]}
-      renderDemo={(props) => (
-        <Box>
-          <TextField {...props} />
-        </Box>
-      )}
+      renderDemo={(props) => <Textarea {...props} />}
     />
   );
 }
diff --git a/docs/data/joy/components/textarea/TextareaValidation.js b/docs/data/joy/components/textarea/TextareaValidation.js
new file mode 100644
index 00000000000000..7533bcfd8e56de
--- /dev/null
+++ b/docs/data/joy/components/textarea/TextareaValidation.js
@@ -0,0 +1,15 @@
+import * as React from 'react';
+import Box from '@mui/joy/Box';
+import Textarea from '@mui/joy/Textarea';
+
+export default function TextareaValidator() {
+  return (
+    <Box sx={{ p: 2 }}>
+      <Textarea
+        placeholder="Type in here…"
+        error
+        defaultValue="Oh no!, something is definitely wrong."
+      />
+    </Box>
+  );
+}
diff --git a/docs/data/joy/components/textarea/TextareaVariants.js b/docs/data/joy/components/textarea/TextareaVariants.js
new file mode 100644
index 00000000000000..c220e55990afd4
--- /dev/null
+++ b/docs/data/joy/components/textarea/TextareaVariants.js
@@ -0,0 +1,22 @@
+import * as React from 'react';
+import Box from '@mui/joy/Box';
+import Textarea from '@mui/joy/Textarea';
+
+export default function TextareaVariants() {
+  return (
+    <Box
+      sx={{
+        py: 2,
+        display: 'grid',
+        gap: 2,
+        alignItems: 'center',
+        flexWrap: 'wrap',
+      }}
+    >
+      <Textarea label="Solid" placeholder="Type in here…" variant="solid" />
+      <Textarea label="Soft" placeholder="Type in here…" variant="soft" />
+      <Textarea label="Outlined" placeholder="Type in here…" variant="outlined" />
+      <Textarea label="Plain" placeholder="Type in here…" variant="plain" />
+    </Box>
+  );
+}
diff --git a/docs/data/joy/components/textarea/textarea.md b/docs/data/joy/components/textarea/textarea.md
new file mode 100644
index 00000000000000..0d399061caf2ba
--- /dev/null
+++ b/docs/data/joy/components/textarea/textarea.md
@@ -0,0 +1,85 @@
+---
+product: joy-ui
+title: React Textarea component
+githubLabel: 'component: TextareaAutosize'
+unstyled: /base/react-textarea-autosize/
+---
+
+# Textarea
+
+<p class="description">Textarea component gives you a textarea HTML element that automatically adjusts its height to match the length of the content within.</p>
+
+## Introduction
+
+Joy UI's textarea component is built on top of the MUI Base [`TextareaAutoSize`](/base/react-textarea-autosize/) component.
+
+{{"demo": "TextareaUsage.js", "hideToolbar": true}}
+
+{{"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 Textarea from '@mui/joy/Textarea';
+
+export default function MyApp() {
+  return <Textarea placeholder="Type anything…" />;
+}
+```
+
+### Variants
+
+The textarea component supports the four global variants: solid (default), soft, outlined, and plain.
+
+{{"demo": "TextareaVariants.js"}}
+
+### Sizes
+
+The textarea component comes with three sizes out of the box: `sm`, `md` (the default), and `lg`.
+
+{{"demo": "TextareaSizes.js"}}
+
+### Colors
+
+Toggle the palette that's being used to color the by text field by using the `color` prop.
+
+{{"demo": "TextareaColors.js"}}
+
+### Form props
+
+Standard form attributes are supported e.g. `required`, `disabled`, etc.
+
+{{"demo": "TextareaFormProps.js"}}
+
+### Validation
+
+To toggle the error state, use the `error` prop.
+
+{{"demo": "TextareaValidation.js"}}
+
+Note that using the `color` prop with danger as value gets the same result:
+
+```js
+<Textarea color="danger" />
+```
+
+### Rows
+
+Use the `minRows` to set the minimum number of lines to show and `maxRows` to limit the number of lines that users will see.
+
+{{"demo": "TextareaRows.js"}}
+
+### Decorators
+
+Use the `startDecorator` and/or `endDecorator` props to add supporting icons or elements to the textarea.
+It's usually more common to see textarea components using decorators at the top and bottom.
+
+{{"demo": "TextareaDecorators.js"}}
+
+## Common examples
+
+### Comment box
+
+{{"demo": "ExampleTextareaComment.js"}}
diff --git a/docs/data/joy/pages.ts b/docs/data/joy/pages.ts
index 573b85188e8b39..3e6768dc745790 100644
--- a/docs/data/joy/pages.ts
+++ b/docs/data/joy/pages.ts
@@ -31,6 +31,7 @@ const pages = [
         children: [
           { pathname: '/joy-ui/react-button' },
           { pathname: '/joy-ui/react-text-field' },
+          { pathname: '/joy-ui/react-textarea' },
           { pathname: '/joy-ui/react-checkbox' },
           { pathname: '/joy-ui/react-radio-button' },
           { pathname: '/joy-ui/react-select' },
diff --git a/docs/pages/joy-ui/react-textarea.js b/docs/pages/joy-ui/react-textarea.js
new file mode 100644
index 00000000000000..9cb11201c89ecf
--- /dev/null
+++ b/docs/pages/joy-ui/react-textarea.js
@@ -0,0 +1,11 @@
+import * as React from 'react';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import {
+  demos,
+  docs,
+  demoComponents,
+} from 'docs/data/joy/components/textarea/textarea.md?@mui/markdown';
+
+export default function Page() {
+  return <MarkdownDocs demos={demos} docs={docs} demoComponents={demoComponents} />;
+}
diff --git a/docs/src/modules/components/JoyUsageDemo.tsx b/docs/src/modules/components/JoyUsageDemo.tsx
index c464a334ad5d6b..f61dad78c05eab 100644
--- a/docs/src/modules/components/JoyUsageDemo.tsx
+++ b/docs/src/modules/components/JoyUsageDemo.tsx
@@ -481,7 +481,9 @@ export default function JoyUsageDemo<T extends { [k: string]: any } = {}>({
                   label={propName}
                   size="sm"
                   value={
-                    typeof props[propName] === 'string' ? props[propName] || '' : defaultValue || ''
+                    typeof props[propName] === 'string'
+                      ? props[propName] || ''
+                      : String(defaultValue) || ''
                   }
                   onChange={(event) =>
                     setProps((latestProps) => ({
diff --git a/packages/mui-joy/src/IconButton/IconButton.tsx b/packages/mui-joy/src/IconButton/IconButton.tsx
index 3feb73df559a33..03698d4134e89a 100644
--- a/packages/mui-joy/src/IconButton/IconButton.tsx
+++ b/packages/mui-joy/src/IconButton/IconButton.tsx
@@ -44,25 +44,29 @@ const IconButtonRoot = styled('button', {
         minWidth: 'var(--IconButton-size, 2rem)', // use min-width instead of height to make the button resilient to its content
         minHeight: 'var(--IconButton-size, 2rem)', // use min-height instead of height to make the button resilient to its content
         fontSize: theme.vars.fontSize.sm,
+        paddingInline: '2px', // add a gap, in case the content is long, e.g. multiple icons
       }),
       ...(ownerState.size === 'md' && {
         '--Icon-fontSize': 'calc(var(--IconButton-size, 2.5rem) / 1.667)', // 1.5rem by default
         minWidth: 'var(--IconButton-size, 2.5rem)',
         minHeight: 'var(--IconButton-size, 2.5rem)',
         fontSize: theme.vars.fontSize.md,
+        paddingInline: '0.25rem',
       }),
       ...(ownerState.size === 'lg' && {
         '--Icon-fontSize': 'calc(var(--IconButton-size, 3rem) / 1.714)', // 1.75rem by default
         minWidth: 'var(--IconButton-size, 3rem)',
         minHeight: 'var(--IconButton-size, 3rem)',
         fontSize: theme.vars.fontSize.lg,
+        paddingInline: '0.375rem',
       }),
-      padding: 0,
+      paddingBlock: 0,
       fontFamily: theme.vars.fontFamily.body,
       fontWeight: theme.vars.fontWeight.md,
       margin: `var(--IconButton-margin)`, // to be controlled by other components, eg. Input
       borderRadius: `var(--IconButton-radius, ${theme.vars.radius.sm})`, // to be controlled by other components, eg. Input
       border: 'none',
+      boxSizing: 'border-box',
       backgroundColor: 'transparent',
       display: 'inline-flex',
       alignItems: 'center',
diff --git a/packages/mui-joy/src/Input/Input.tsx b/packages/mui-joy/src/Input/Input.tsx
index d0bac46d44b106..9a0f886f9db7ba 100644
--- a/packages/mui-joy/src/Input/Input.tsx
+++ b/packages/mui-joy/src/Input/Input.tsx
@@ -4,13 +4,13 @@ import { unstable_capitalize as capitalize } from '@mui/utils';
 import { OverridableComponent } from '@mui/types';
 import composeClasses from '@mui/base/composeClasses';
 import { useSlotProps, EventHandlers } from '@mui/base/utils';
-import { useInput, InputUnstyledOwnerState } from '@mui/base/InputUnstyled';
 import { styled, useThemeProps } from '../styles';
 import { InputTypeMap, InputProps } from './InputProps';
 import inputClasses, { getInputUtilityClass } from './inputClasses';
+import useForwardedInput from './useForwardedInput';
 
 const useUtilityClasses = (ownerState: InputProps) => {
-  const { classes, disabled, fullWidth, variant, color, size } = ownerState;
+  const { disabled, fullWidth, variant, color, size } = ownerState;
 
   const slots = {
     root: [
@@ -26,14 +26,14 @@ const useUtilityClasses = (ownerState: InputProps) => {
     endDecorator: ['endDecorator'],
   };
 
-  return composeClasses(slots, getInputUtilityClass, classes);
+  return composeClasses(slots, getInputUtilityClass, {});
 };
 
 const InputRoot = styled('div', {
   name: 'JoyInput',
   slot: 'Root',
   overridesResolver: (props, styles) => styles.root,
-})<{ ownerState: InputProps & InputUnstyledOwnerState }>(({ theme, ownerState }) => {
+})<{ ownerState: InputProps }>(({ theme, ownerState }) => {
   const variantStyle = theme.variants[`${ownerState.variant!}`]?.[ownerState.color!];
   return [
     {
@@ -137,7 +137,7 @@ const InputInput = styled('input', {
   name: 'JoyInput',
   slot: 'Input',
   overridesResolver: (props, styles) => styles.input,
-})<{ ownerState: InputProps & InputUnstyledOwnerState }>(({ theme, ownerState }) => ({
+})<{ ownerState: InputProps }>(({ theme, ownerState }) => ({
   border: 'none', // remove the native input width
   minWidth: 0, // remove the native input width
   outline: 0, // remove the native input outline
@@ -148,6 +148,9 @@ const InputInput = styled('input', {
   backgroundColor: 'transparent',
   fontFamily: 'inherit',
   fontSize: 'inherit',
+  fontStyle: 'inherit',
+  fontWeight: 'inherit',
+  lineHeight: 'inherit',
   '&:-webkit-autofill': {
     WebkitBackgroundClip: 'text', // remove autofill background
     WebkitTextFillColor: theme.vars.palette[ownerState.color!]?.overrideTextPrimary,
@@ -162,7 +165,7 @@ const InputStartDecorator = styled('span', {
   name: 'JoyInput',
   slot: 'StartDecorator',
   overridesResolver: (props, styles) => styles.startDecorator,
-})<{ ownerState: InputProps & InputUnstyledOwnerState }>(({ theme, ownerState }) => ({
+})<{ ownerState: InputProps & { focused: boolean } }>(({ theme, ownerState }) => ({
   '--Button-margin': '0 0 0 calc(var(--Input-decorator-childOffset) * -1)',
   '--IconButton-margin': '0 0 0 calc(var(--Input-decorator-childOffset) * -1)',
   '--Icon-margin': '0 0 0 calc(var(--Input-paddingInline) / -4)',
@@ -180,7 +183,7 @@ const InputEndDecorator = styled('span', {
   name: 'JoyInput',
   slot: 'EndDecorator',
   overridesResolver: (props, styles) => styles.endDecorator,
-})<{ ownerState: InputProps & InputUnstyledOwnerState }>(({ theme, ownerState }) => ({
+})<{ ownerState: InputProps }>(({ theme, ownerState }) => ({
   '--Button-margin': '0 calc(var(--Input-decorator-childOffset) * -1) 0 0',
   '--IconButton-margin': '0 calc(var(--Input-decorator-childOffset) * -1) 0 0',
   '--Icon-margin': '0 calc(var(--Input-paddingInline) / -4) 0 0',
@@ -197,57 +200,25 @@ const Input = React.forwardRef(function Input(inProps, ref) {
   });
 
   const {
-    'aria-describedby': ariaDescribedby,
-    'aria-label': ariaLabel,
-    'aria-labelledby': ariaLabelledby,
-    autoComplete,
-    autoFocus,
-    className,
-    color = 'neutral',
-    component,
-    componentsProps = {},
-    defaultValue,
-    disabled,
-    endDecorator,
-    fullWidth = false,
-    error,
-    id,
-    name,
-    onClick,
-    onChange,
-    onKeyDown,
-    onKeyUp,
-    onFocus,
-    onBlur,
-    placeholder,
-    readOnly,
-    required,
-    type = 'text',
-    startDecorator,
-    size = 'md',
-    value,
-    variant = 'outlined',
-    ...other
-  } = props;
-
-  const {
+    propsToForward,
+    rootStateClasses,
+    inputStateClasses,
     getRootProps,
     getInputProps,
+    component,
+    componentsProps = {},
     focused,
     formControlContext,
     error: errorState,
     disabled: disabledState,
-  } = useInput({
-    disabled,
-    defaultValue,
-    error,
-    onBlur,
-    onClick,
-    onChange,
-    onFocus,
-    required,
-    value,
-  });
+    fullWidth = false,
+    size = 'md',
+    color = 'neutral',
+    variant = 'outlined',
+    startDecorator,
+    endDecorator,
+    ...other
+  } = useForwardedInput<InputProps>(props, inputClasses);
 
   const ownerState = {
     ...props,
@@ -257,39 +228,12 @@ const Input = React.forwardRef(function Input(inProps, ref) {
     error: errorState,
     focused,
     formControlContext: formControlContext!,
-    type,
     size,
     variant,
   };
 
-  const rootStateClasses = {
-    [inputClasses.disabled]: disabledState,
-    [inputClasses.error]: errorState,
-    [inputClasses.focused]: focused,
-    [inputClasses.formControl]: Boolean(formControlContext),
-  };
-
-  const inputStateClasses = {
-    [inputClasses.disabled]: disabledState,
-  };
-
   const classes = useUtilityClasses(ownerState);
 
-  const propsToForward = {
-    'aria-describedby': ariaDescribedby,
-    'aria-label': ariaLabel,
-    'aria-labelledby': ariaLabelledby,
-    autoComplete,
-    autoFocus,
-    id,
-    onKeyDown,
-    onKeyUp,
-    name,
-    placeholder,
-    readOnly,
-    type,
-  };
-
   const rootProps = useSlotProps({
     elementType: InputRoot,
     getSlotProps: getRootProps,
@@ -300,7 +244,7 @@ const Input = React.forwardRef(function Input(inProps, ref) {
       as: component,
     },
     ownerState,
-    className: [classes.root, rootStateClasses, className],
+    className: [classes.root, rootStateClasses],
   });
 
   const inputProps = useSlotProps({
@@ -341,33 +285,15 @@ Input.propTypes /* remove-proptypes */ = {
   /**
    * @ignore
    */
-  'aria-describedby': PropTypes.string,
-  /**
-   * @ignore
-   */
-  'aria-label': PropTypes.string,
-  /**
-   * @ignore
-   */
-  'aria-labelledby': PropTypes.string,
-  /**
-   * This prop helps users to fill forms faster, especially on mobile devices.
-   * The name can be confusing, as it's more like an autofill.
-   * You can learn more about it [following the specification](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill).
-   */
   autoComplete: PropTypes.string,
   /**
-   * If `true`, the `input` element is focused during the first mount.
+   * @ignore
    */
   autoFocus: PropTypes.bool,
   /**
    * @ignore
    */
   children: PropTypes.node,
-  /**
-   * Override or extend the styles applied to the component.
-   */
-  classes: PropTypes.object,
   /**
    * Class name applied to the root element.
    */
@@ -380,11 +306,6 @@ Input.propTypes /* remove-proptypes */ = {
     PropTypes.oneOf(['danger', 'info', 'neutral', 'primary', 'success', 'warning']),
     PropTypes.string,
   ]),
-  /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component: PropTypes.elementType,
   /**
    * The props used for each slot inside the Input.
    * @default {}
@@ -394,12 +315,15 @@ Input.propTypes /* remove-proptypes */ = {
     root: PropTypes.object,
   }),
   /**
-   * The default value. Use when the component is not controlled.
+   * @ignore
    */
-  defaultValue: PropTypes.any,
+  defaultValue: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.string),
+    PropTypes.number,
+    PropTypes.string,
+  ]),
   /**
-   * If `true`, the component is disabled.
-   * The prop defaults to the value (`false`) inherited from the parent FormControl component.
+   * @ignore
    */
   disabled: PropTypes.bool,
   /**
@@ -417,17 +341,13 @@ Input.propTypes /* remove-proptypes */ = {
    */
   fullWidth: PropTypes.bool,
   /**
-   * The id of the `input` element.
+   * @ignore
    */
   id: PropTypes.string,
-  /**
-   * Name attribute of the `input` element.
-   */
-  name: PropTypes.string,
   /**
    * @ignore
    */
-  onBlur: PropTypes.func,
+  name: PropTypes.string,
   /**
    * @ignore
    */
@@ -435,31 +355,13 @@ Input.propTypes /* remove-proptypes */ = {
   /**
    * @ignore
    */
-  onClick: PropTypes.func,
-  /**
-   * @ignore
-   */
-  onFocus: PropTypes.func,
-  /**
-   * @ignore
-   */
-  onKeyDown: PropTypes.func,
-  /**
-   * @ignore
-   */
-  onKeyUp: PropTypes.func,
-  /**
-   * The short hint displayed in the `input` before the user enters a value.
-   */
   placeholder: PropTypes.string,
   /**
-   * It prevents the user from changing the value of the field
-   * (not from interacting with the field).
+   * @ignore
    */
   readOnly: PropTypes.bool,
   /**
-   * If `true`, the `input` element is required.
-   * The prop defaults to the value (`false`) inherited from the parent FormControl component.
+   * @ignore
    */
   required: PropTypes.bool,
   /**
@@ -483,14 +385,13 @@ Input.propTypes /* remove-proptypes */ = {
     PropTypes.object,
   ]),
   /**
-   * Type of the `input` element. It should be [a valid HTML5 input type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types).
-   * @default 'plain'
-   */
-  type: PropTypes.string,
-  /**
-   * The value of the `input` element, required for a controlled component.
+   * @ignore
    */
-  value: PropTypes.any,
+  value: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.string),
+    PropTypes.number,
+    PropTypes.string,
+  ]),
   /**
    * The variant to use.
    * @default 'outlined'
diff --git a/packages/mui-joy/src/Input/InputProps.ts b/packages/mui-joy/src/Input/InputProps.ts
index c137c5ebcb0e3b..7331d9f2d9c7a7 100644
--- a/packages/mui-joy/src/Input/InputProps.ts
+++ b/packages/mui-joy/src/Input/InputProps.ts
@@ -1,7 +1,5 @@
 import React from 'react';
 import { OverridableStringUnion, OverrideProps } from '@mui/types';
-import { UseInputParameters } from '@mui/base/InputUnstyled';
-import { InputClasses } from './inputClasses';
 import { ColorPaletteProp, VariantProp, SxProps } from '../styles/types';
 
 export type InputSlot = 'root' | 'input' | 'startDecorator' | 'endDecorator';
@@ -14,28 +12,30 @@ export interface InputPropsSizeOverrides {}
 
 export interface InputTypeMap<P = {}, D extends React.ElementType = 'div'> {
   props: P &
-    Omit<UseInputParameters, 'inputRef'> & {
-      'aria-describedby'?: string;
-      'aria-label'?: string;
-      'aria-labelledby'?: string;
-      /**
-       * This prop helps users to fill forms faster, especially on mobile devices.
-       * The name can be confusing, as it's more like an autofill.
-       * You can learn more about it [following the specification](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill).
-       */
-      autoComplete?: string;
-      /**
-       * If `true`, the `input` element is focused during the first mount.
-       */
-      autoFocus?: boolean;
+    Pick<
+      React.InputHTMLAttributes<HTMLInputElement>,
+      | 'autoComplete'
+      | 'autoFocus'
+      | 'onClick'
+      | 'onChange'
+      | 'onKeyDown'
+      | 'onKeyUp'
+      | 'onFocus'
+      | 'onBlur'
+      | 'defaultValue'
+      | 'value'
+      | 'type'
+      | 'placeholder'
+      | 'readOnly'
+      | 'required'
+      | 'name'
+      | 'id'
+      | 'disabled'
+    > & {
       /**
        * Class name applied to the root element.
        */
       className?: string;
-      /**
-       * Override or extend the styles applied to the component.
-       */
-      classes?: Partial<InputClasses>;
       /**
        * The color of the component. It supports those theme colors that make sense for this component.
        * @default 'neutral'
@@ -56,30 +56,16 @@ export interface InputTypeMap<P = {}, D extends React.ElementType = 'div'> {
        * Trailing adornment for this input.
        */
       endDecorator?: React.ReactNode;
+      /**
+       * If `true`, the `input` will indicate an error.
+       * The prop defaults to the value (`false`) inherited from the parent FormControl component.
+       */
+      error?: boolean;
       /**
        * If `true`, the button will take up the full width of its container.
        * @default false
        */
       fullWidth?: boolean;
-      /**
-       * The id of the `input` element.
-       */
-      id?: string;
-      /**
-       * Name attribute of the `input` element.
-       */
-      name?: string;
-      onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;
-      onKeyUp?: React.KeyboardEventHandler<HTMLInputElement>;
-      /**
-       * The short hint displayed in the `input` before the user enters a value.
-       */
-      placeholder?: string;
-      /**
-       * It prevents the user from changing the value of the field
-       * (not from interacting with the field).
-       */
-      readOnly?: boolean;
       /**
        * Leading adornment for this input.
        */
@@ -93,15 +79,6 @@ export interface InputTypeMap<P = {}, D extends React.ElementType = 'div'> {
        * The system prop that allows defining system overrides as well as additional CSS styles.
        */
       sx?: SxProps;
-      /**
-       * Type of the `input` element. It should be [a valid HTML5 input type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types).
-       * @default 'plain'
-       */
-      type?: string;
-      /**
-       * The value of the `input` element, required for a controlled component.
-       */
-      value?: unknown;
       /**
        * The variant to use.
        * @default 'outlined'
diff --git a/packages/mui-joy/src/Input/useForwardedInput.ts b/packages/mui-joy/src/Input/useForwardedInput.ts
new file mode 100644
index 00000000000000..ca45113fae4837
--- /dev/null
+++ b/packages/mui-joy/src/Input/useForwardedInput.ts
@@ -0,0 +1,88 @@
+import { useInput } from '@mui/base/InputUnstyled';
+
+export default function useForwardedInput<Output>(
+  props: any,
+  classes: { disabled: string; error: string; focused: string; formControl: string },
+) {
+  const {
+    'aria-describedby': ariaDescribedby,
+    'aria-label': ariaLabel,
+    'aria-labelledby': ariaLabelledby,
+    autoComplete,
+    autoFocus,
+    className,
+    defaultValue,
+    disabled: disabledProp,
+    error: errorProp,
+    id,
+    name,
+    onClick,
+    onChange,
+    onKeyDown,
+    onKeyUp,
+    onFocus,
+    onBlur,
+    placeholder,
+    readOnly,
+    required,
+    type,
+    value,
+    ...other
+  } = props;
+
+  const { getRootProps, getInputProps, focused, formControlContext, error, disabled } = useInput({
+    disabled: disabledProp,
+    defaultValue,
+    error: errorProp,
+    onBlur,
+    onClick,
+    onChange,
+    onFocus,
+    required,
+    value,
+  });
+
+  const rootStateClasses = {
+    [classes.disabled]: disabled,
+    [classes.error]: error,
+    [classes.focused]: focused,
+    [classes.formControl]: Boolean(formControlContext),
+    [className!]: className,
+  };
+
+  const inputStateClasses = {
+    [classes.disabled]: disabled,
+  };
+
+  const propsToForward = {
+    'aria-describedby': ariaDescribedby,
+    'aria-label': ariaLabel,
+    'aria-labelledby': ariaLabelledby,
+    autoComplete,
+    autoFocus,
+    id,
+    onKeyDown,
+    onKeyUp,
+    name,
+    placeholder,
+    readOnly,
+    type,
+  };
+  return {
+    propsToForward,
+    rootStateClasses,
+    inputStateClasses,
+    getRootProps,
+    getInputProps,
+    focused,
+    formControlContext,
+    error,
+    disabled,
+    ...other,
+  } as {
+    propsToForward: Record<string, any>;
+    rootStateClasses: Record<string, any>;
+    inputStateClasses: Record<string, any>;
+  } & ReturnType<typeof useInput> &
+    Output;
+}
diff --git a/packages/mui-joy/src/TextField/TextField.tsx b/packages/mui-joy/src/TextField/TextField.tsx
index ef7fc249b324c7..f62ffe1ef52d66 100644
--- a/packages/mui-joy/src/TextField/TextField.tsx
+++ b/packages/mui-joy/src/TextField/TextField.tsx
@@ -182,13 +182,11 @@ TextField.propTypes /* remove-proptypes */ = {
   // |     To update them edit TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
   /**
-   * This prop helps users to fill forms faster, especially on mobile devices.
-   * The name can be confusing, as it's more like an autofill.
-   * You can learn more about it [following the specification](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill).
+   * @ignore
    */
   autoComplete: PropTypes.string,
   /**
-   * If `true`, the `input` element is focused during the first mount.
+   * @ignore
    */
   autoFocus: PropTypes.bool,
   /**
@@ -231,12 +229,15 @@ TextField.propTypes /* remove-proptypes */ = {
     root: PropTypes.object,
   }),
   /**
-   * The default value. Use when the component is not controlled.
+   * @ignore
    */
-  defaultValue: PropTypes.any,
+  defaultValue: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.string),
+    PropTypes.number,
+    PropTypes.string,
+  ]),
   /**
-   * If `true`, the component is disabled.
-   * The prop defaults to the value (`false`) inherited from the parent FormControl component.
+   * @ignore
    */
   disabled: PropTypes.bool,
   /**
@@ -287,8 +288,7 @@ TextField.propTypes /* remove-proptypes */ = {
    */
   placeholder: PropTypes.string,
   /**
-   * If `true`, the `input` element is required.
-   * The prop defaults to the value (`false`) inherited from the parent FormControl component.
+   * @ignore
    */
   required: PropTypes.bool,
   /**
@@ -304,14 +304,93 @@ TextField.propTypes /* remove-proptypes */ = {
    */
   startDecorator: PropTypes.node,
   /**
-   * Type of the `input` element. It should be [a valid HTML5 input type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types).
-   * @default 'plain'
+   * @ignore
    */
-  type: PropTypes.string,
+  type: PropTypes.oneOfType([
+    PropTypes.oneOf([
+      'button',
+      'checkbox',
+      'color',
+      'date',
+      'datetime-local',
+      'email',
+      'file',
+      'hidden',
+      'image',
+      'month',
+      'number',
+      'password',
+      'radio',
+      'range',
+      'reset',
+      'search',
+      'submit',
+      'tel',
+      'text',
+      'time',
+      'url',
+      'week',
+    ]),
+    PropTypes.shape({
+      '__@iterator@91': PropTypes.func.isRequired,
+      anchor: PropTypes.func.isRequired,
+      at: PropTypes.func.isRequired,
+      big: PropTypes.func.isRequired,
+      blink: PropTypes.func.isRequired,
+      bold: PropTypes.func.isRequired,
+      charAt: PropTypes.func.isRequired,
+      charCodeAt: PropTypes.func.isRequired,
+      codePointAt: PropTypes.func.isRequired,
+      concat: PropTypes.func.isRequired,
+      endsWith: PropTypes.func.isRequired,
+      fixed: PropTypes.func.isRequired,
+      fontcolor: PropTypes.func.isRequired,
+      fontsize: PropTypes.func.isRequired,
+      includes: PropTypes.func.isRequired,
+      indexOf: PropTypes.func.isRequired,
+      italics: PropTypes.func.isRequired,
+      lastIndexOf: PropTypes.func.isRequired,
+      length: PropTypes.number.isRequired,
+      link: PropTypes.func.isRequired,
+      localeCompare: PropTypes.func.isRequired,
+      match: PropTypes.func.isRequired,
+      matchAll: PropTypes.func.isRequired,
+      normalize: PropTypes.func.isRequired,
+      padEnd: PropTypes.func.isRequired,
+      padStart: PropTypes.func.isRequired,
+      repeat: PropTypes.func.isRequired,
+      replace: PropTypes.func.isRequired,
+      search: PropTypes.func.isRequired,
+      slice: PropTypes.func.isRequired,
+      small: PropTypes.func.isRequired,
+      split: PropTypes.func.isRequired,
+      startsWith: PropTypes.func.isRequired,
+      strike: PropTypes.func.isRequired,
+      sub: PropTypes.func.isRequired,
+      substr: PropTypes.func.isRequired,
+      substring: PropTypes.func.isRequired,
+      sup: PropTypes.func.isRequired,
+      toLocaleLowerCase: PropTypes.func.isRequired,
+      toLocaleUpperCase: PropTypes.func.isRequired,
+      toLowerCase: PropTypes.func.isRequired,
+      toString: PropTypes.func.isRequired,
+      toUpperCase: PropTypes.func.isRequired,
+      trim: PropTypes.func.isRequired,
+      trimEnd: PropTypes.func.isRequired,
+      trimLeft: PropTypes.func.isRequired,
+      trimRight: PropTypes.func.isRequired,
+      trimStart: PropTypes.func.isRequired,
+      valueOf: PropTypes.func.isRequired,
+    }),
+  ]),
   /**
-   * The value of the `input` element, required for a controlled component.
+   * @ignore
    */
-  value: PropTypes.any,
+  value: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.string),
+    PropTypes.number,
+    PropTypes.string,
+  ]),
   /**
    * The variant to use.
    * @default 'outlined'
diff --git a/packages/mui-joy/src/Textarea/Textarea.test.tsx b/packages/mui-joy/src/Textarea/Textarea.test.tsx
new file mode 100644
index 00000000000000..e6c600ee86231f
--- /dev/null
+++ b/packages/mui-joy/src/Textarea/Textarea.test.tsx
@@ -0,0 +1,61 @@
+import * as React from 'react';
+import { expect } from 'chai';
+import { spy } from 'sinon';
+import { describeConformance, createRenderer, screen, act } from 'test/utils';
+import Textarea, { textareaClasses as classes } from '@mui/joy/Textarea';
+import { ThemeProvider } from '@mui/joy/styles';
+
+describe('Joy <Textarea />', () => {
+  const { render } = createRenderer();
+
+  describeConformance(<Textarea />, () => ({
+    render,
+    classes,
+    ThemeProvider,
+    refInstanceof: window.HTMLDivElement,
+    muiName: 'JoyTextarea',
+    testDeepOverrides: { slotName: 'textarea', slotClassName: classes.textarea },
+    testVariantProps: { variant: 'solid' },
+    skip: ['propsSpread', 'componentsProp', 'classesRoot'],
+  }));
+
+  it('should have error classes', () => {
+    const { container } = render(<Textarea error />);
+    expect(container.firstChild).to.have.class(classes.error);
+  });
+
+  it('should have startDecorator', () => {
+    render(<Textarea startDecorator={<span data-testid="start">start</span>} />);
+    expect(screen.getByTestId('start')).toBeVisible();
+  });
+
+  it('should have endDecorator', () => {
+    render(<Textarea endDecorator={<span data-testid="end">end</span>} />);
+    expect(screen.getByTestId('end')).toBeVisible();
+  });
+
+  describe('prop: disabled', () => {
+    it('should have disabled classes', () => {
+      const { container } = render(<Textarea disabled />);
+      expect(container.firstChild).to.have.class(classes.disabled);
+    });
+
+    it('should reset the focused state if getting disabled', () => {
+      const handleBlur = spy();
+      const handleFocus = spy();
+      const { container, setProps } = render(
+        <Textarea onBlur={handleBlur} onFocus={handleFocus} />,
+      );
+
+      act(() => {
+        container.querySelector('textarea')?.focus();
+      });
+      expect(handleFocus.callCount).to.equal(1);
+
+      setProps({ disabled: true });
+      expect(handleBlur.callCount).to.equal(1);
+      // check if focus not initiated again
+      expect(handleFocus.callCount).to.equal(1);
+    });
+  });
+});
diff --git a/packages/mui-joy/src/Textarea/Textarea.tsx b/packages/mui-joy/src/Textarea/Textarea.tsx
new file mode 100644
index 00000000000000..5a70b9a59ce8c6
--- /dev/null
+++ b/packages/mui-joy/src/Textarea/Textarea.tsx
@@ -0,0 +1,358 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { unstable_capitalize as capitalize } from '@mui/utils';
+import { OverridableComponent } from '@mui/types';
+import { useSlotProps, EventHandlers } from '@mui/base/utils';
+import composeClasses from '@mui/base/composeClasses';
+import TextareaAutosize from '@mui/base/TextareaAutosize';
+import { styled, useThemeProps } from '../styles';
+import { TextareaTypeMap, TextareaProps } from './TextareaProps';
+import textareaClasses, { getTextareaUtilityClass } from './textareaClasses';
+import useForwardedInput from '../Input/useForwardedInput';
+
+const useUtilityClasses = (ownerState: TextareaProps) => {
+  const { disabled, variant, color, size } = ownerState;
+
+  const slots = {
+    root: [
+      'root',
+      disabled && 'disabled',
+      variant && `variant${capitalize(variant)}`,
+      color && `color${capitalize(color)}`,
+      size && `size${capitalize(size)}`,
+    ],
+    textarea: ['textarea'],
+    startDecorator: ['startDecorator'],
+    endDecorator: ['endDecorator'],
+  };
+
+  return composeClasses(slots, getTextareaUtilityClass, {});
+};
+
+const TextareaRoot = styled('div', {
+  name: 'JoyTextarea',
+  slot: 'Root',
+  overridesResolver: (props, styles) => styles.root,
+})<{ ownerState: TextareaProps }>(({ theme, ownerState }) => {
+  const variantStyle = theme.variants[`${ownerState.variant!}`]?.[ownerState.color!];
+  return [
+    {
+      '--Textarea-radius': theme.vars.radius.sm,
+      '--Textarea-gap': '0.5rem',
+      '--Textarea-placeholderOpacity': 0.5,
+      '--Textarea-focusedThickness': '2px',
+      '--Textarea-focusedHighlight':
+        theme.vars.palette[ownerState.color === 'neutral' ? 'primary' : ownerState.color!]?.[500],
+      ...(ownerState.size === 'sm' && {
+        '--Textarea-minHeight': '2rem',
+        '--Textarea-paddingBlock': 'calc(0.5rem - var(--variant-borderWidth, 0px))', // to match Input because <textarea> does not center the text at the middle like <input>
+        '--Textarea-paddingInline': '0.5rem',
+        '--Textarea-decorator-childHeight': 'min(1.5rem, var(--Textarea-minHeight))',
+        '--Icon-fontSize': '1.25rem',
+      }),
+      ...(ownerState.size === 'md' && {
+        '--Textarea-minHeight': '2.5rem',
+        '--Textarea-paddingBlock': 'calc(0.5rem - var(--variant-borderWidth, 0px))',
+        '--Textarea-paddingInline': '0.75rem',
+        '--Textarea-decorator-childHeight': 'min(2rem, var(--Textarea-minHeight))',
+        '--Icon-fontSize': '1.5rem',
+      }),
+      ...(ownerState.size === 'lg' && {
+        '--Textarea-minHeight': '3rem',
+        '--Textarea-paddingBlock': 'calc(0.75rem - var(--variant-borderWidth, 0px))',
+        '--Textarea-paddingInline': '1rem',
+        '--Textarea-gap': '0.75rem',
+        '--Textarea-decorator-childHeight': 'min(2.375rem, var(--Textarea-minHeight))',
+        '--Icon-fontSize': '1.75rem',
+      }),
+      // variables for controlling child components
+      '--internal-paddingBlock':
+        'max((var(--Textarea-minHeight) - 2 * var(--variant-borderWidth) - var(--Textarea-decorator-childHeight)) / 2, 0px)',
+      '--Textarea-decorator-childRadius':
+        'max((var(--Textarea-radius) - var(--variant-borderWidth)) - var(--internal-paddingBlock), min(var(--internal-paddingBlock) / 2, (var(--Textarea-radius) - var(--variant-borderWidth)) / 2))',
+      '--Button-minHeight': 'var(--Textarea-decorator-childHeight)',
+      '--IconButton-size': 'var(--Textarea-decorator-childHeight)',
+      '--Button-radius': 'var(--Textarea-decorator-childRadius)',
+      '--IconButton-radius': 'var(--Textarea-decorator-childRadius)',
+      boxSizing: 'border-box',
+      minWidth: 0,
+      minHeight: 'var(--Textarea-minHeight)',
+      cursor: 'text',
+      position: 'relative',
+      display: 'flex',
+      flexDirection: 'column',
+      paddingInlineStart: `var(--Textarea-paddingInline)`, // the paddingInlineEnd is added to the textarea. It looks better when the scrollbar appears.
+      paddingBlock: 'var(--Textarea-paddingBlock)',
+      borderRadius: 'var(--Textarea-radius)',
+      ...(!variantStyle.backgroundColor && {
+        backgroundColor: theme.vars.palette.background.surface,
+      }),
+      fontFamily: theme.vars.fontFamily.body,
+      fontSize: theme.vars.fontSize.md,
+      lineHeight: theme.vars.lineHeight.md,
+      ...(ownerState.size === 'sm' && {
+        fontSize: theme.vars.fontSize.sm,
+        lineHeight: theme.vars.lineHeight.sm,
+      }),
+      // TODO: discuss the transition approach in a separate PR. This value is copied from mui-material Button.
+      transition:
+        'background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
+      '&:before': {
+        boxSizing: 'border-box',
+        content: '""',
+        display: 'block',
+        position: 'absolute',
+        pointerEvents: 'none',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        zIndex: 1,
+        borderRadius: 'inherit',
+        margin: 'calc(var(--variant-borderWidth) * -1)', // for outlined variant
+      },
+    },
+    {
+      // variant styles
+      ...variantStyle,
+      '&:hover': {
+        ...theme.variants[`${ownerState.variant!}Hover`]?.[ownerState.color!],
+        cursor: 'text',
+      },
+      [`&.${textareaClasses.disabled}`]:
+        theme.variants[`${ownerState.variant!}Disabled`]?.[ownerState.color!],
+    },
+    // This style has to come after the global variant to set the background to surface
+    ownerState.variant !== 'solid' && {
+      [`&.${textareaClasses.focused}`]: {
+        backgroundColor: theme.vars.palette.background.surface,
+        '&:before': {
+          boxShadow: `inset 0 0 0 var(--Textarea-focusedThickness) var(--Textarea-focusedHighlight)`,
+        },
+      },
+    },
+  ];
+});
+
+const TextareaInput = styled(TextareaAutosize, {
+  name: 'JoyTextarea',
+  slot: 'Textarea',
+  overridesResolver: (props, styles) => styles.textarea,
+})<{ ownerState: TextareaProps }>(({ theme, ownerState }) => ({
+  resize: 'none',
+  border: 'none', // remove the native textarea width
+  minWidth: 0, // remove the native textarea width
+  outline: 0, // remove the native textarea outline
+  padding: 0, // remove the native textarea padding
+  paddingInlineEnd: `var(--Textarea-paddingInline)`,
+  flex: 'auto',
+  alignSelf: 'stretch',
+  color: 'inherit',
+  backgroundColor: 'transparent',
+  fontFamily: 'inherit',
+  fontSize: 'inherit',
+  fontStyle: 'inherit',
+  fontWeight: 'inherit',
+  lineHeight: 'inherit',
+  '&:-webkit-autofill': {
+    WebkitBackgroundClip: 'text', // remove autofill background
+    WebkitTextFillColor: theme.vars.palette[ownerState.color!]?.overrideTextPrimary,
+  },
+  '&::-webkit-input-placeholder': {
+    opacity: 'var(--Textarea-placeholderOpacity)',
+    color: 'inherit',
+  },
+  '&::-moz-placeholder': { opacity: 'var(--Textarea-placeholderOpacity)', color: 'inherit' }, // Firefox 19+
+  '&:-ms-input-placeholder': { opacity: 'var(--Textarea-placeholderOpacity)', color: 'inherit' }, // IE11
+  '&::-ms-input-placeholder': { opacity: 'var(--Textarea-placeholderOpacity)', color: 'inherit' }, // Edge
+}));
+
+const TextareaStartDecorator = styled('div', {
+  name: 'JoyTextarea',
+  slot: 'StartDecorator',
+  overridesResolver: (props, styles) => styles.startDecorator,
+})<{ ownerState: TextareaProps }>(({ theme }) => ({
+  display: 'flex',
+  marginInlineStart: 'calc(var(--Textarea-paddingBlock) - var(--Textarea-paddingInline))',
+  marginInlineEnd: 'var(--Textarea-paddingBlock)',
+  marginBlockEnd: 'var(--Textarea-gap)',
+  color: theme.vars.palette.text.tertiary,
+}));
+
+const TextareaEndDecorator = styled('div', {
+  name: 'JoyTextarea',
+  slot: 'EndDecorator',
+  overridesResolver: (props, styles) => styles.endDecorator,
+})<{ ownerState: TextareaProps }>(({ theme }) => ({
+  display: 'flex',
+  marginInlineStart: 'calc(var(--Textarea-paddingBlock) - var(--Textarea-paddingInline))',
+  marginInlineEnd: 'var(--Textarea-paddingBlock)',
+  marginBlockStart: 'var(--Textarea-gap)',
+  color: theme.vars.palette.text.tertiary,
+}));
+
+const Textarea = React.forwardRef(function Textarea(inProps, ref) {
+  const props = useThemeProps<typeof inProps & { component?: React.ElementType }>({
+    props: inProps,
+    name: 'JoyTextarea',
+  });
+
+  const {
+    propsToForward,
+    rootStateClasses,
+    inputStateClasses,
+    getRootProps,
+    getInputProps,
+    component,
+    componentsProps = {},
+    focused,
+    formControlContext,
+    error: errorState,
+    disabled: disabledState,
+    size = 'md',
+    color = 'neutral',
+    variant = 'outlined',
+    startDecorator,
+    endDecorator,
+    minRows,
+    maxRows,
+    ...other
+  } = useForwardedInput<TextareaProps>(props, textareaClasses);
+
+  const ownerState = {
+    ...props,
+    color: errorState ? 'danger' : color,
+    disabled: disabledState,
+    error: errorState,
+    focused,
+    formControlContext: formControlContext!,
+    size,
+    variant,
+  };
+
+  const classes = useUtilityClasses(ownerState);
+
+  const rootProps = useSlotProps({
+    elementType: TextareaRoot,
+    getSlotProps: getRootProps,
+    externalSlotProps: componentsProps.root,
+    externalForwardedProps: other,
+    additionalProps: {
+      ref,
+      as: component,
+    },
+    ownerState,
+    className: [classes.root, rootStateClasses],
+  });
+
+  const { onChange, ...inputProps } = useSlotProps({
+    elementType: TextareaInput,
+    getSlotProps: (otherHandlers: EventHandlers) =>
+      getInputProps({ ...otherHandlers, ...propsToForward }),
+    externalSlotProps: {
+      minRows,
+      maxRows,
+    },
+    additionalProps: {
+      as: componentsProps.textarea?.component,
+    },
+    ownerState,
+    className: [classes.textarea, inputStateClasses],
+  });
+
+  return (
+    <TextareaRoot {...rootProps}>
+      {startDecorator && (
+        <TextareaStartDecorator className={classes.startDecorator} ownerState={ownerState}>
+          {startDecorator}
+        </TextareaStartDecorator>
+      )}
+
+      <TextareaInput
+        {...inputProps}
+        // @ts-expect-error MUI Base strictly type `onChange` for HTMLInputElement
+        onChange={onChange}
+      />
+      {endDecorator && (
+        <TextareaEndDecorator className={classes.endDecorator} ownerState={ownerState}>
+          {endDecorator}
+        </TextareaEndDecorator>
+      )}
+    </TextareaRoot>
+  );
+}) as OverridableComponent<TextareaTypeMap>;
+
+Textarea.propTypes /* remove-proptypes */ = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // |     To update them edit TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * @ignore
+   */
+  children: PropTypes.node,
+  /**
+   * The color of the component. It supports those theme colors that make sense for this component.
+   * @default 'neutral'
+   */
+  color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([
+    PropTypes.oneOf(['danger', 'info', 'neutral', 'primary', 'success', 'warning']),
+    PropTypes.string,
+  ]),
+  /**
+   * The props used for each slot inside the Input.
+   * @default {}
+   */
+  componentsProps: PropTypes.shape({
+    root: PropTypes.object,
+    textarea: PropTypes.object,
+  }),
+  /**
+   * Trailing adornment for this input.
+   */
+  endDecorator: PropTypes.node,
+  /**
+   * If `true`, the `input` will indicate an error.
+   * The prop defaults to the value (`false`) inherited from the parent FormControl component.
+   */
+  error: PropTypes.bool,
+  /**
+   * Maximum number of rows to display.
+   */
+  maxRows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  /**
+   * Minimum number of rows to display.
+   * @default 1
+   */
+  minRows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  /**
+   * The size of the component.
+   * @default 'md'
+   */
+  size: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([
+    PropTypes.oneOf(['sm', 'md', 'lg']),
+    PropTypes.string,
+  ]),
+  /**
+   * Leading adornment for this input.
+   */
+  startDecorator: PropTypes.node,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])),
+    PropTypes.func,
+    PropTypes.object,
+  ]),
+  /**
+   * The variant to use.
+   * @default 'outlined'
+   */
+  variant: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([
+    PropTypes.oneOf(['outlined', 'plain', 'soft', 'solid']),
+    PropTypes.string,
+  ]),
+} as any;
+
+export default Textarea;
diff --git a/packages/mui-joy/src/Textarea/TextareaProps.ts b/packages/mui-joy/src/Textarea/TextareaProps.ts
new file mode 100644
index 00000000000000..f44979973a2cc8
--- /dev/null
+++ b/packages/mui-joy/src/Textarea/TextareaProps.ts
@@ -0,0 +1,97 @@
+import React from 'react';
+import { OverridableStringUnion, OverrideProps } from '@mui/types';
+import { ColorPaletteProp, VariantProp, SxProps } from '../styles/types';
+
+export type TextareaSlot = 'root' | 'textarea' | 'startDecorator' | 'endDecorator';
+
+export interface TextareaPropsVariantOverrides {}
+
+export interface TextareaPropsColorOverrides {}
+
+export interface TextareaPropsSizeOverrides {}
+
+export interface TextareaTypeMap<P = {}, D extends React.ElementType = 'div'> {
+  props: P &
+    Pick<
+      React.TextareaHTMLAttributes<HTMLTextAreaElement>,
+      | 'autoComplete'
+      | 'autoFocus'
+      | 'onClick'
+      | 'onChange'
+      | 'onKeyDown'
+      | 'onKeyUp'
+      | 'onFocus'
+      | 'onBlur'
+      | 'defaultValue'
+      | 'value'
+      | 'placeholder'
+      | 'readOnly'
+      | 'required'
+      | 'name'
+      | 'id'
+      | 'disabled'
+    > & {
+      /**
+       * The color of the component. It supports those theme colors that make sense for this component.
+       * @default 'neutral'
+       */
+      color?: OverridableStringUnion<ColorPaletteProp, TextareaPropsColorOverrides>;
+      /**
+       * The props used for each slot inside the Input.
+       * @default {}
+       */
+      componentsProps?: {
+        root?: React.ComponentPropsWithRef<'div'>;
+        textarea?: React.ComponentPropsWithRef<'textarea'> & {
+          component?: React.ElementType;
+          sx?: SxProps;
+        };
+      };
+      /**
+       * Trailing adornment for this input.
+       */
+      endDecorator?: React.ReactNode;
+      /**
+       * If `true`, the `input` will indicate an error.
+       * The prop defaults to the value (`false`) inherited from the parent FormControl component.
+       */
+      error?: boolean;
+      /**
+       * Maximum number of rows to display.
+       */
+      maxRows?: string | number;
+      /**
+       * Minimum number of rows to display.
+       * @default 1
+       */
+      minRows?: string | number;
+      /**
+       * Leading adornment for this input.
+       */
+      startDecorator?: React.ReactNode;
+      /**
+       * The size of the component.
+       * @default 'md'
+       */
+      size?: OverridableStringUnion<'sm' | 'md' | 'lg', TextareaPropsSizeOverrides>;
+      /**
+       * The system prop that allows defining system overrides as well as additional CSS styles.
+       */
+      sx?: SxProps;
+      /**
+       * The variant to use.
+       * @default 'outlined'
+       */
+      variant?: OverridableStringUnion<VariantProp, TextareaPropsVariantOverrides>;
+    };
+  defaultComponent: D;
+}
+
+export type TextareaProps<
+  D extends React.ElementType = TextareaTypeMap['defaultComponent'],
+  P = {
+    component?: React.ElementType;
+  },
+> = OverrideProps<TextareaTypeMap<P, D>, D>;
+
+export default TextareaProps;
diff --git a/packages/mui-joy/src/Textarea/index.ts b/packages/mui-joy/src/Textarea/index.ts
new file mode 100644
index 00000000000000..4b7d47c97ebc6d
--- /dev/null
+++ b/packages/mui-joy/src/Textarea/index.ts
@@ -0,0 +1,4 @@
+export { default } from './Textarea';
+export * from './TextareaProps';
+export { default as textareaClasses } from './textareaClasses';
+export * from './textareaClasses';
diff --git a/packages/mui-joy/src/Textarea/textareaClasses.ts b/packages/mui-joy/src/Textarea/textareaClasses.ts
new file mode 100644
index 00000000000000..3baca3c7b716df
--- /dev/null
+++ b/packages/mui-joy/src/Textarea/textareaClasses.ts
@@ -0,0 +1,69 @@
+import { generateUtilityClass, generateUtilityClasses } from '../className';
+
+export interface TextareaClasses {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the textarea element. */
+  textarea: string;
+  /** Styles applied to the root element if the component is a descendant of `FormControl`. */
+  formControl: string;
+  /** Styles applied to the root element if `disabled={true}`. */
+  disabled: string;
+  /** State class applied to the root element if `error={true}`. */
+  error: string;
+  /** Styles applied to the root element if the component is focused. */
+  focused: string;
+  /** Styles applied to the root element if `color="primary"`. */
+  colorPrimary: string;
+  /** Styles applied to the root element if `color="neutral"`. */
+  colorNeutral: string;
+  /** Styles applied to the root element if `color="danger"`. */
+  colorDanger: string;
+  /** Styles applied to the root element if `color="info"`. */
+  colorInfo: string;
+  /** Styles applied to the root element if `color="success"`. */
+  colorSuccess: string;
+  /** Styles applied to the root element if `color="warning"`. */
+  colorWarning: string;
+  /** Styles applied to the root element if `size="sm"`. */
+  sizeSm: string;
+  /** Styles applied to the root element if `size="md"`. */
+  sizeMd: string;
+  /** Styles applied to the root element if `size="lg"`. */
+  sizeLg: string;
+  /** Styles applied to the root element if `variant="plain"`. */
+  variantPlain: string;
+  /** Styles applied to the root element if `variant="outlined"`. */
+  variantOutlined: string;
+  /** Styles applied to the root element if `variant="soft"`. */
+  variantSoft: string;
+}
+
+export type TextareaClassKey = keyof TextareaClasses;
+
+export function getTextareaUtilityClass(slot: string): string {
+  return generateUtilityClass('JoyTextarea', slot);
+}
+
+const textareaClasses: TextareaClasses = generateUtilityClasses('JoyTextarea', [
+  'root',
+  'textarea',
+  'formControl',
+  'disabled',
+  'error',
+  'focused',
+  'colorPrimary',
+  'colorNeutral',
+  'colorDanger',
+  'colorInfo',
+  'colorSuccess',
+  'colorWarning',
+  'sizeSm',
+  'sizeMd',
+  'sizeLg',
+  'variantPlain',
+  'variantOutlined',
+  'variantSoft',
+]);
+
+export default textareaClasses;
diff --git a/packages/mui-joy/src/index.ts b/packages/mui-joy/src/index.ts
index 6f2228c6be2735..5bc0819c616253 100644
--- a/packages/mui-joy/src/index.ts
+++ b/packages/mui-joy/src/index.ts
@@ -133,5 +133,8 @@ export * from './Tabs';
 export { default as TextField } from './TextField';
 export * from './TextField';
 
+export { default as Textarea } from './Textarea';
+export * from './Textarea';
+
 export { default as Typography } from './Typography';
 export * from './Typography';
diff --git a/packages/mui-joy/src/styles/components.d.ts b/packages/mui-joy/src/styles/components.d.ts
index 79c590b3f8b275..ecae87612b1e2a 100644
--- a/packages/mui-joy/src/styles/components.d.ts
+++ b/packages/mui-joy/src/styles/components.d.ts
@@ -45,6 +45,7 @@ import { TabPanelOwnerState, TabPanelProps, TabPanelSlot } from '../TabPanel/Tab
 import { TabsOwnerState, TabsProps, TabsSlot } from '../Tabs/TabsProps';
 import { TextFieldProps, TextFieldSlot } from '../TextField/TextFieldProps';
 import { TypographyProps, TypographySlot } from '../Typography/TypographyProps';
+import { TextareaProps, TextareaSlot } from '../Textarea/TextareaProps';
 
 export type OverridesStyleRules<
   ClassKey extends string = string,
@@ -255,4 +256,8 @@ export interface Components<Theme = unknown> {
     defaultProps?: Partial<MenuItemProps>;
     styleOverrides?: OverridesStyleRules<MenuItemSlot, MenuItemProps, Theme>;
   };
+  JoyTextarea?: {
+    defaultProps?: Partial<TextareaProps>;
+    styleOverrides?: OverridesStyleRules<TextareaSlot, TextareaProps, Theme>;
+  };
 }