diff --git a/docs/reference/generated/textarea.json b/docs/reference/generated/textarea.json
new file mode 100644
index 0000000000..89a65b6b39
--- /dev/null
+++ b/docs/reference/generated/textarea.json
@@ -0,0 +1,58 @@
+{
+  "name": "Textarea",
+  "description": "A native textarea element that automatically works with [Field](https://base-ui.com/react/components/field).\nRenders an `<textarea>` element.",
+  "props": {
+    "defaultValue": {
+      "type": "string | number | string[]",
+      "detailedType": "string | number | string[] | undefined"
+    },
+    "onValueChange": {
+      "type": "((value: string, eventDetails: Textarea.ChangeEventDetails) => void)",
+      "description": "Callback fired when the `value` changes. Use when controlled.",
+      "detailedType": "| ((\n    value: string,\n    eventDetails: Textarea.ChangeEventDetails,\n  ) => void)\n| undefined"
+    },
+    "maxRows": {
+      "type": "number",
+      "description": "Limit automatic height resizing to this many rows.",
+      "detailedType": "number | undefined"
+    },
+    "minRows": {
+      "type": "number",
+      "description": "Enable automatic height resizing by setting the minimum number of rows.",
+      "detailedType": "number | undefined"
+    },
+    "className": {
+      "type": "string | ((state: Field.Root.State) => string)",
+      "description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state."
+    },
+    "render": {
+      "type": "ReactElement | ((props: HTMLProps, state: Field.Root.State) => ReactElement)",
+      "description": "Allows you to replace the component’s HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render.",
+      "detailedType": "| ReactElement\n| ((\n    props: HTMLProps,\n    state: Field.Root.State,\n  ) => ReactElement)"
+    }
+  },
+  "dataAttributes": {
+    "data-disabled": {
+      "description": "Present when the textarea is disabled."
+    },
+    "data-valid": {
+      "description": "Present when the textarea is in valid state."
+    },
+    "data-invalid": {
+      "description": "Present when the textarea is in invalid state."
+    },
+    "data-dirty": {
+      "description": "Present when the textarea's value has changed."
+    },
+    "data-touched": {
+      "description": "Present when the textarea has been touched."
+    },
+    "data-filled": {
+      "description": "Present when the textarea is filled."
+    },
+    "data-focused": {
+      "description": "Present when the textarea is focused."
+    }
+  },
+  "cssVariables": {}
+}
diff --git a/docs/src/app/(public)/(content)/react/components/textarea/demos/field-sizing/css-modules/index.module.css b/docs/src/app/(public)/(content)/react/components/textarea/demos/field-sizing/css-modules/index.module.css
new file mode 100644
index 0000000000..cffe6190c0
--- /dev/null
+++ b/docs/src/app/(public)/(content)/react/components/textarea/demos/field-sizing/css-modules/index.module.css
@@ -0,0 +1,22 @@
+.Textarea {
+  box-sizing: border-box;
+  margin: 0;
+  border: 1px solid var(--color-gray-200);
+  width: 100%;
+  padding: 0.5rem 0.75rem;
+  max-width: 16rem;
+  border-radius: 0.375rem;
+  font-family: inherit;
+  font-size: 1rem;
+  line-height: 1.5rem;
+  font-weight: normal;
+  background-color: transparent;
+  color: var(--color-gray-900);
+  resize: vertical;
+  field-sizing: content;
+
+  &:focus {
+    outline: 2px solid var(--color-blue);
+    outline-offset: -1px;
+  }
+}
diff --git a/docs/src/app/(public)/(content)/react/components/textarea/demos/field-sizing/css-modules/index.tsx b/docs/src/app/(public)/(content)/react/components/textarea/demos/field-sizing/css-modules/index.tsx
new file mode 100644
index 0000000000..8ff81679f9
--- /dev/null
+++ b/docs/src/app/(public)/(content)/react/components/textarea/demos/field-sizing/css-modules/index.tsx
@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { Textarea } from '@base-ui-components/react/textarea';
+import styles from './index.module.css';
+
+export default function ExampleTextarea() {
+  return <Textarea placeholder="Type something…" className={styles.Textarea} />;
+}
diff --git a/docs/src/app/(public)/(content)/react/components/textarea/demos/field-sizing/index.ts b/docs/src/app/(public)/(content)/react/components/textarea/demos/field-sizing/index.ts
new file mode 100644
index 0000000000..80097d6015
--- /dev/null
+++ b/docs/src/app/(public)/(content)/react/components/textarea/demos/field-sizing/index.ts
@@ -0,0 +1,3 @@
+'use client';
+export { default as CssModules } from './css-modules';
+export { default as Tailwind } from './tailwind';
diff --git a/docs/src/app/(public)/(content)/react/components/textarea/demos/field-sizing/tailwind/index.tsx b/docs/src/app/(public)/(content)/react/components/textarea/demos/field-sizing/tailwind/index.tsx
new file mode 100644
index 0000000000..a6bbf95ec9
--- /dev/null
+++ b/docs/src/app/(public)/(content)/react/components/textarea/demos/field-sizing/tailwind/index.tsx
@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { Textarea } from '@base-ui-components/react/textarea';
+
+export default function ExampleTextarea() {
+  return (
+    <Textarea
+      placeholder="Type something…"
+      className="field-sizing-content w-full max-w-64 resize-y rounded-md border border-gray-200 px-3 py-2 text-base text-gray-900 focus:outline-2 focus:-outline-offset-1 focus:outline-blue-800"
+    />
+  );
+}
diff --git a/docs/src/app/(public)/(content)/react/components/textarea/demos/form/css-modules/index.module.css b/docs/src/app/(public)/(content)/react/components/textarea/demos/form/css-modules/index.module.css
new file mode 100644
index 0000000000..f27c41c55f
--- /dev/null
+++ b/docs/src/app/(public)/(content)/react/components/textarea/demos/form/css-modules/index.module.css
@@ -0,0 +1,90 @@
+.Form {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  width: 100%;
+  max-width: 16rem;
+}
+
+.Field {
+  display: flex;
+  flex-direction: column;
+  align-items: start;
+  gap: 0.25rem;
+}
+
+.Label {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  font-weight: 500;
+  color: var(--color-gray-900);
+}
+
+.Textarea {
+  box-sizing: border-box;
+  margin: 0;
+  border: 1px solid var(--color-gray-200);
+  width: 100%;
+  padding: 0.5rem 0.75rem;
+  max-width: 16rem;
+  border-radius: 0.375rem;
+  font-family: inherit;
+  font-size: 1rem;
+  line-height: 1.5rem;
+  font-weight: normal;
+  background-color: transparent;
+  color: var(--color-gray-900);
+  resize: vertical;
+
+  &:focus {
+    outline: 2px solid var(--color-blue);
+    outline-offset: -1px;
+  }
+}
+
+.Error {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  color: var(--color-red-800);
+}
+
+.Button {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 2.5rem;
+  padding: 0 0.875rem;
+  margin: 0;
+  outline: 0;
+  border: 1px solid var(--color-gray-200);
+  border-radius: 0.375rem;
+  background-color: var(--color-gray-50);
+  font-family: inherit;
+  font-size: 1rem;
+  font-weight: 500;
+  line-height: 1.5rem;
+  color: var(--color-gray-900);
+  user-select: none;
+
+  @media (hover: hover) {
+    &:hover {
+      background-color: var(--color-gray-100);
+    }
+  }
+
+  &:active {
+    background-color: var(--color-gray-100);
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    color: var(--color-gray-400);
+    background-color: var(--color-gray-100);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--color-blue);
+    outline-offset: -1px;
+  }
+}
diff --git a/docs/src/app/(public)/(content)/react/components/textarea/demos/form/css-modules/index.tsx b/docs/src/app/(public)/(content)/react/components/textarea/demos/form/css-modules/index.tsx
new file mode 100644
index 0000000000..9d262f78de
--- /dev/null
+++ b/docs/src/app/(public)/(content)/react/components/textarea/demos/form/css-modules/index.tsx
@@ -0,0 +1,58 @@
+import * as React from 'react';
+import { Field } from '@base-ui-components/react/field';
+import { Form } from '@base-ui-components/react/form';
+import { Textarea } from '@base-ui-components/react/textarea';
+import styles from './index.module.css';
+
+export default function ExampleForm() {
+  const [errors, setErrors] = React.useState({});
+  const [loading, setLoading] = React.useState(false);
+
+  return (
+    <Form
+      className={styles.Form}
+      errors={errors}
+      onClearErrors={setErrors}
+      onSubmit={async (event) => {
+        event.preventDefault();
+        const formData = new FormData(event.currentTarget);
+        const value = formData.get('feedback') as string;
+
+        setLoading(true);
+        const response = await submitForm(value);
+        const serverErrors = {
+          feedback: response.error,
+        };
+
+        setErrors(serverErrors);
+        setLoading(false);
+      }}
+    >
+      <Field.Root name="feedback" className={styles.Field}>
+        <Field.Label className={styles.Label}>Feedback</Field.Label>
+        <Textarea placeholder="Enter your feedback" className={styles.Textarea} />
+        <Field.Error className={styles.Error} />
+      </Field.Root>
+      <button disabled={loading} type="submit" className={styles.Button}>
+        Submit
+      </button>
+    </Form>
+  );
+}
+
+async function submitForm(value: string) {
+  // Mimic a server response
+  await new Promise((resolve) => {
+    setTimeout(resolve, 1000);
+  });
+
+  try {
+    if (value.length < 10) {
+      return { error: 'Feedback must be at least 10 characters long' };
+    }
+  } catch {
+    return { error: 'Invalid feedback' };
+  }
+
+  return { success: true };
+}
diff --git a/docs/src/app/(public)/(content)/react/components/textarea/demos/form/index.ts b/docs/src/app/(public)/(content)/react/components/textarea/demos/form/index.ts
new file mode 100644
index 0000000000..80097d6015
--- /dev/null
+++ b/docs/src/app/(public)/(content)/react/components/textarea/demos/form/index.ts
@@ -0,0 +1,3 @@
+'use client';
+export { default as CssModules } from './css-modules';
+export { default as Tailwind } from './tailwind';
diff --git a/docs/src/app/(public)/(content)/react/components/textarea/demos/form/tailwind/index.tsx b/docs/src/app/(public)/(content)/react/components/textarea/demos/form/tailwind/index.tsx
new file mode 100644
index 0000000000..0c922517c7
--- /dev/null
+++ b/docs/src/app/(public)/(content)/react/components/textarea/demos/form/tailwind/index.tsx
@@ -0,0 +1,64 @@
+import * as React from 'react';
+import { Field } from '@base-ui-components/react/field';
+import { Form } from '@base-ui-components/react/form';
+import { Textarea } from '@base-ui-components/react/textarea';
+
+export default function ExampleForm() {
+  const [errors, setErrors] = React.useState({});
+  const [loading, setLoading] = React.useState(false);
+
+  return (
+    <Form
+      className="flex w-full max-w-64 flex-col gap-4"
+      errors={errors}
+      onClearErrors={setErrors}
+      onSubmit={async (event) => {
+        event.preventDefault();
+        const formData = new FormData(event.currentTarget);
+        const value = formData.get('feedback') as string;
+
+        setLoading(true);
+        const response = await submitForm(value);
+        const serverErrors = {
+          feedback: response.error,
+        };
+
+        setErrors(serverErrors);
+        setLoading(false);
+      }}
+    >
+      <Field.Root name="feedback" className="flex flex-col items-start gap-1">
+        <Field.Label className="text-sm font-medium text-gray-900">Feedback</Field.Label>
+        <Textarea
+          placeholder="Enter your feedback"
+          className="w-full max-w-64 resize-y rounded-md border border-gray-200 px-3 py-2 text-base text-gray-900 focus:outline-2 focus:-outline-offset-1 focus:outline-blue-800"
+        />
+        <Field.Error className="text-sm text-red-800" />
+      </Field.Root>
+      <button
+        disabled={loading}
+        type="submit"
+        className="flex h-10 items-center justify-center rounded-md border border-gray-200 bg-gray-50 px-3.5 text-base font-medium text-gray-900 select-none hover:bg-gray-100 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-gray-100 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:text-gray-400"
+      >
+        Submit
+      </button>
+    </Form>
+  );
+}
+
+async function submitForm(value: string) {
+  // Mimic a server response
+  await new Promise((resolve) => {
+    setTimeout(resolve, 1000);
+  });
+
+  try {
+    if (value.length < 10) {
+      return { error: 'Feedback must be at least 10 characters long' };
+    }
+  } catch {
+    return { error: 'Invalid feedback' };
+  }
+
+  return { success: true };
+}
diff --git a/docs/src/app/(public)/(content)/react/components/textarea/demos/hero/css-modules/index.module.css b/docs/src/app/(public)/(content)/react/components/textarea/demos/hero/css-modules/index.module.css
new file mode 100644
index 0000000000..96bc6cfbe5
--- /dev/null
+++ b/docs/src/app/(public)/(content)/react/components/textarea/demos/hero/css-modules/index.module.css
@@ -0,0 +1,21 @@
+.Textarea {
+  box-sizing: border-box;
+  margin: 0;
+  border: 1px solid var(--color-gray-200);
+  width: 100%;
+  padding: 0.5rem 0.75rem;
+  max-width: 16rem;
+  border-radius: 0.375rem;
+  font-family: inherit;
+  font-size: 1rem;
+  line-height: 1.5rem;
+  font-weight: normal;
+  background-color: transparent;
+  color: var(--color-gray-900);
+  resize: vertical;
+
+  &:focus {
+    outline: 2px solid var(--color-blue);
+    outline-offset: -1px;
+  }
+}
diff --git a/docs/src/app/(public)/(content)/react/components/textarea/demos/hero/css-modules/index.tsx b/docs/src/app/(public)/(content)/react/components/textarea/demos/hero/css-modules/index.tsx
new file mode 100644
index 0000000000..8ff81679f9
--- /dev/null
+++ b/docs/src/app/(public)/(content)/react/components/textarea/demos/hero/css-modules/index.tsx
@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { Textarea } from '@base-ui-components/react/textarea';
+import styles from './index.module.css';
+
+export default function ExampleTextarea() {
+  return <Textarea placeholder="Type something…" className={styles.Textarea} />;
+}
diff --git a/docs/src/app/(public)/(content)/react/components/textarea/demos/hero/index.ts b/docs/src/app/(public)/(content)/react/components/textarea/demos/hero/index.ts
new file mode 100644
index 0000000000..80097d6015
--- /dev/null
+++ b/docs/src/app/(public)/(content)/react/components/textarea/demos/hero/index.ts
@@ -0,0 +1,3 @@
+'use client';
+export { default as CssModules } from './css-modules';
+export { default as Tailwind } from './tailwind';
diff --git a/docs/src/app/(public)/(content)/react/components/textarea/demos/hero/tailwind/index.tsx b/docs/src/app/(public)/(content)/react/components/textarea/demos/hero/tailwind/index.tsx
new file mode 100644
index 0000000000..a8ee4e078f
--- /dev/null
+++ b/docs/src/app/(public)/(content)/react/components/textarea/demos/hero/tailwind/index.tsx
@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { Textarea } from '@base-ui-components/react/textarea';
+
+export default function ExampleTextarea() {
+  return (
+    <Textarea
+      placeholder="Type something…"
+      className="w-full max-w-64 resize-y rounded-md border border-gray-200 px-3 py-2 text-base text-gray-900 focus:outline-2 focus:-outline-offset-1 focus:outline-blue-800"
+    />
+  );
+}
diff --git a/docs/src/app/(public)/(content)/react/components/textarea/demos/infinite-resize/css-modules/index.module.css b/docs/src/app/(public)/(content)/react/components/textarea/demos/infinite-resize/css-modules/index.module.css
new file mode 100644
index 0000000000..8b0f3ed2e0
--- /dev/null
+++ b/docs/src/app/(public)/(content)/react/components/textarea/demos/infinite-resize/css-modules/index.module.css
@@ -0,0 +1,21 @@
+.Textarea {
+  box-sizing: border-box;
+  margin: 0;
+  border: 1px solid var(--color-gray-200);
+  width: 100%;
+  padding: 0.5rem 0.75rem;
+  max-width: 16rem;
+  border-radius: 0.375rem;
+  font-family: inherit;
+  font-size: 1rem;
+  line-height: 1.5rem;
+  font-weight: normal;
+  background-color: transparent;
+  color: var(--color-gray-900);
+  resize: none;
+
+  &:focus {
+    outline: 2px solid var(--color-blue);
+    outline-offset: -1px;
+  }
+}
diff --git a/docs/src/app/(public)/(content)/react/components/textarea/demos/infinite-resize/css-modules/index.tsx b/docs/src/app/(public)/(content)/react/components/textarea/demos/infinite-resize/css-modules/index.tsx
new file mode 100644
index 0000000000..6cccf7391e
--- /dev/null
+++ b/docs/src/app/(public)/(content)/react/components/textarea/demos/infinite-resize/css-modules/index.tsx
@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { Textarea } from '@base-ui-components/react/textarea';
+import styles from './index.module.css';
+
+export default function ExampleTextarea() {
+  return <Textarea placeholder="Type something…" minRows={4} className={styles.Textarea} />;
+}
diff --git a/docs/src/app/(public)/(content)/react/components/textarea/demos/infinite-resize/index.ts b/docs/src/app/(public)/(content)/react/components/textarea/demos/infinite-resize/index.ts
new file mode 100644
index 0000000000..80097d6015
--- /dev/null
+++ b/docs/src/app/(public)/(content)/react/components/textarea/demos/infinite-resize/index.ts
@@ -0,0 +1,3 @@
+'use client';
+export { default as CssModules } from './css-modules';
+export { default as Tailwind } from './tailwind';
diff --git a/docs/src/app/(public)/(content)/react/components/textarea/demos/infinite-resize/tailwind/index.tsx b/docs/src/app/(public)/(content)/react/components/textarea/demos/infinite-resize/tailwind/index.tsx
new file mode 100644
index 0000000000..3e41a428ff
--- /dev/null
+++ b/docs/src/app/(public)/(content)/react/components/textarea/demos/infinite-resize/tailwind/index.tsx
@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { Textarea } from '@base-ui-components/react/textarea';
+
+export default function ExampleTextarea() {
+  return (
+    <Textarea
+      placeholder="Type something…"
+      minRows={4}
+      className="w-full max-w-64 resize-none rounded-md border border-gray-200 px-3 py-2 text-base text-gray-900 focus:outline-2 focus:-outline-offset-1 focus:outline-blue-800"
+    />
+  );
+}
diff --git a/docs/src/app/(public)/(content)/react/components/textarea/demos/max-rows/css-modules/index.module.css b/docs/src/app/(public)/(content)/react/components/textarea/demos/max-rows/css-modules/index.module.css
new file mode 100644
index 0000000000..8b0f3ed2e0
--- /dev/null
+++ b/docs/src/app/(public)/(content)/react/components/textarea/demos/max-rows/css-modules/index.module.css
@@ -0,0 +1,21 @@
+.Textarea {
+  box-sizing: border-box;
+  margin: 0;
+  border: 1px solid var(--color-gray-200);
+  width: 100%;
+  padding: 0.5rem 0.75rem;
+  max-width: 16rem;
+  border-radius: 0.375rem;
+  font-family: inherit;
+  font-size: 1rem;
+  line-height: 1.5rem;
+  font-weight: normal;
+  background-color: transparent;
+  color: var(--color-gray-900);
+  resize: none;
+
+  &:focus {
+    outline: 2px solid var(--color-blue);
+    outline-offset: -1px;
+  }
+}
diff --git a/docs/src/app/(public)/(content)/react/components/textarea/demos/max-rows/css-modules/index.tsx b/docs/src/app/(public)/(content)/react/components/textarea/demos/max-rows/css-modules/index.tsx
new file mode 100644
index 0000000000..cb0075261d
--- /dev/null
+++ b/docs/src/app/(public)/(content)/react/components/textarea/demos/max-rows/css-modules/index.tsx
@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { Textarea } from '@base-ui-components/react/textarea';
+import styles from './index.module.css';
+
+export default function ExampleTextarea() {
+  return (
+    <Textarea placeholder="Type something…" minRows={4} maxRows={8} className={styles.Textarea} />
+  );
+}
diff --git a/docs/src/app/(public)/(content)/react/components/textarea/demos/max-rows/index.ts b/docs/src/app/(public)/(content)/react/components/textarea/demos/max-rows/index.ts
new file mode 100644
index 0000000000..80097d6015
--- /dev/null
+++ b/docs/src/app/(public)/(content)/react/components/textarea/demos/max-rows/index.ts
@@ -0,0 +1,3 @@
+'use client';
+export { default as CssModules } from './css-modules';
+export { default as Tailwind } from './tailwind';
diff --git a/docs/src/app/(public)/(content)/react/components/textarea/demos/max-rows/tailwind/index.tsx b/docs/src/app/(public)/(content)/react/components/textarea/demos/max-rows/tailwind/index.tsx
new file mode 100644
index 0000000000..6aa1958873
--- /dev/null
+++ b/docs/src/app/(public)/(content)/react/components/textarea/demos/max-rows/tailwind/index.tsx
@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { Textarea } from '@base-ui-components/react/textarea';
+
+export default function ExampleTextarea() {
+  return (
+    <Textarea
+      placeholder="Type something…"
+      minRows={4}
+      maxRows={8}
+      className="w-full max-w-64 resize-none rounded-md border border-gray-200 px-3 py-2 text-base text-gray-900 focus:outline-2 focus:-outline-offset-1 focus:outline-blue-800"
+    />
+  );
+}
diff --git a/docs/src/app/(public)/(content)/react/components/textarea/page.mdx b/docs/src/app/(public)/(content)/react/components/textarea/page.mdx
new file mode 100644
index 0000000000..80aa11aa88
--- /dev/null
+++ b/docs/src/app/(public)/(content)/react/components/textarea/page.mdx
@@ -0,0 +1,57 @@
+# Textarea
+
+<Subtitle>
+  A native textarea element that automatically works with [Field](/react/components/field).
+</Subtitle>
+
+<Meta name="description" content="A high-quality, unstyled React textarea component." />
+
+<Demo path="./demos/hero" />
+
+## Anatomy
+
+Import the component and use it as a single part:
+
+```jsx title="Anatomy"
+import { Textarea } from '@base-ui-components/react/textarea';
+
+<Textarea />;
+```
+
+## API reference
+
+<Reference component="Textarea" />
+
+## Examples
+
+### Infinite resize
+
+Setting only a `minRows` will make the textarea automatically resize to fit its content.
+
+<Demo path="./demos/infinite-resize" />
+
+### Max rows
+
+Setting both `minRows` and `maxRows` will make the textarea automatically resize between those limits.
+
+<Demo path="./demos/max-rows" />
+
+### Form integration
+
+The textarea works seamlessly with the [Form](/react/components/form) component and supports libraries like [Zod](https://zod.dev/) for schema validation.
+
+<Demo path="./demos/form" />
+
+### Field sizing
+
+[MDN: `field-sizing`](https://developer.mozilla.org/docs/Web/CSS/field-sizing) · [Can I Use](https://caniuse.com/?search=field-sizing)
+
+The CSS `field-sizing` property lets form fields size themselves to their content. For example, a `<textarea>` can grow or shrink as you type without JavaScript.
+
+Browser support is about **71 % globally**. Chrome 123+, Edge 123+, and Opera 109+ support it. Safari only recently added it in TP, and many others (Firefox, IE, Opera Mini, UC Browser, KaiOS) don't yet.
+
+Because support is incomplete, the demo may not work in older browsers or Safari `<26`. If the textarea doesn't resize, try a **current Chrome or Edge** build.
+
+> Once support passes ~90 %, we plan to switch the Textarea component to `field-sizing` by default, dropping the JS fallback.
+
+<Demo path="./demos/field-sizing" />
diff --git a/docs/src/nav.ts b/docs/src/nav.ts
index 13b2cf2222..23d2991d7b 100644
--- a/docs/src/nav.ts
+++ b/docs/src/nav.ts
@@ -183,6 +183,11 @@ export const nav: NavGroup[] = [
         label: 'Tabs',
         href: '/react/components/tabs',
       },
+      {
+        label: 'Textarea',
+        href: '/react/components/textarea',
+        isNew: true,
+      },
       {
         label: 'Toast',
         href: '/react/components/toast',
diff --git a/packages/react/package.json b/packages/react/package.json
index a92b910e3d..fe4ae0628a 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -58,6 +58,7 @@
     "./slider": "./src/slider/index.ts",
     "./switch": "./src/switch/index.ts",
     "./tabs": "./src/tabs/index.ts",
+    "./textarea": "./src/textarea/index.ts",
     "./toast": "./src/toast/index.ts",
     "./toggle": "./src/toggle/index.ts",
     "./toggle-group": "./src/toggle-group/index.ts",
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
index 93771c2091..55256bcab5 100644
--- a/packages/react/src/index.ts
+++ b/packages/react/src/index.ts
@@ -30,6 +30,7 @@ export * from './separator';
 export * from './slider';
 export * from './switch';
 export * from './tabs';
+export * from './textarea';
 export * from './toast';
 export * from './toggle';
 export * from './toggle-group';
diff --git a/packages/react/src/textarea/Textarea.test.tsx b/packages/react/src/textarea/Textarea.test.tsx
new file mode 100644
index 0000000000..4e2dcccd86
--- /dev/null
+++ b/packages/react/src/textarea/Textarea.test.tsx
@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { Textarea } from '@base-ui-components/react/textarea';
+import { createRenderer } from '@mui/internal-test-utils';
+import { describeConformance } from '../../test/describeConformance';
+
+describe('<Textarea />', () => {
+  const { render } = createRenderer();
+
+  describeConformance(<Textarea />, () => ({
+    refInstanceof: window.HTMLTextAreaElement,
+    render,
+  }));
+});
diff --git a/packages/react/src/textarea/Textarea.tsx b/packages/react/src/textarea/Textarea.tsx
new file mode 100644
index 0000000000..d90d82e592
--- /dev/null
+++ b/packages/react/src/textarea/Textarea.tsx
@@ -0,0 +1,366 @@
+'use client';
+import * as React from 'react';
+import { useEventCallback } from '@base-ui-components/utils/useEventCallback';
+import { useControlled } from '@base-ui-components/utils/useControlled';
+import { useIsoLayoutEffect } from '@base-ui-components/utils/useIsoLayoutEffect';
+import { FieldRoot } from '../field/root/FieldRoot';
+import { useFieldRootContext } from '../field/root/FieldRootContext';
+import { fieldValidityMapping } from '../field/utils/constants';
+import { BaseUIComponentProps } from '../utils/types';
+import { useRenderElement } from '../utils/useRenderElement';
+import { useField } from '../field/useField';
+import { useBaseUiId } from '../utils/useBaseUiId';
+import { useFieldControlValidation } from '../field/control/useFieldControlValidation';
+import {
+  BaseUIChangeEventDetails,
+  createChangeEventDetails,
+} from '../utils/createBaseUIEventDetails';
+import { calculateTextareaHeight } from './calculateTextareaHeight';
+
+/**
+ * A native textarea element that automatically works with [Field](https://base-ui.com/react/components/field).
+ * Renders an `<textarea>` element.
+ *
+ * Documentation: [Base UI Textarea](https://base-ui.com/react/components/textarea)
+ */
+export const Textarea = React.forwardRef(function Textarea(
+  componentProps: Textarea.Props,
+  forwardedRef: React.ForwardedRef<HTMLTextAreaElement>,
+) {
+  const {
+    render,
+    className,
+    id: idProp,
+    name: nameProp,
+    value: valueProp,
+    disabled: disabledProp = false,
+    onValueChange,
+    defaultValue,
+    minRows,
+    maxRows,
+    style,
+    ...elementProps
+  } = componentProps;
+
+  const placeholder = (elementProps as any)?.placeholder as string | undefined;
+
+  const { state: fieldState, name: fieldName, disabled: fieldDisabled } = useFieldRootContext();
+
+  const disabled = fieldDisabled || disabledProp;
+  const name = fieldName ?? nameProp;
+
+  const state: Textarea.State = React.useMemo(
+    () => ({
+      ...fieldState,
+      disabled,
+    }),
+    [fieldState, disabled],
+  );
+
+  const {
+    setControlId,
+    labelId,
+    setTouched,
+    setDirty,
+    validityData,
+    setFocused,
+    setFilled,
+    validationMode,
+  } = useFieldRootContext();
+
+  const { getValidationProps, getInputValidationProps, commitValidation, inputRef } =
+    useFieldControlValidation();
+
+  const hiddenTextareaRef = React.useRef<HTMLTextAreaElement>(null);
+  const heightRef = React.useRef<number | null>(null);
+
+  const id = useBaseUiId(idProp);
+
+  useIsoLayoutEffect(() => {
+    setControlId(id);
+    return () => {
+      setControlId(undefined);
+    };
+  }, [id, setControlId]);
+
+  useIsoLayoutEffect(() => {
+    const hasExternalValue = valueProp != null;
+    if (inputRef.current?.value || (hasExternalValue && valueProp !== '')) {
+      setFilled(true);
+    } else if (hasExternalValue && valueProp === '') {
+      setFilled(false);
+    }
+  }, [inputRef, setFilled, valueProp]);
+
+  const [value, setValueUnwrapped] = useControlled({
+    controlled: valueProp,
+    default: defaultValue,
+    name: 'Textarea',
+    state: 'value',
+  });
+
+  const isControlled = valueProp !== undefined;
+
+  const setValue = useEventCallback(
+    (nextValue: string, eventDetails: Textarea.ChangeEventDetails) => {
+      onValueChange?.(nextValue, eventDetails);
+
+      if (eventDetails.isCanceled) {
+        return;
+      }
+
+      setValueUnwrapped(nextValue);
+    },
+  );
+
+  useField({
+    id,
+    name,
+    commitValidation,
+    value,
+    getValue: () => inputRef.current?.value,
+    controlRef: inputRef,
+  });
+
+  useIsoLayoutEffect(() => {
+    const el = inputRef.current;
+    const hidden = hiddenTextareaRef.current;
+
+    if (!el || !hidden || (minRows == null && maxRows == null)) {
+      return undefined;
+    }
+
+    // Track the last applied overflow state so we avoid redundant writes.
+    let lastIsOverflowing: boolean | null = null;
+
+    const applyHeight = (target: number | null, isOverflowing: boolean) => {
+      // Only write to the DOM when something actually changed.
+      if (target == null) {
+        const didClearHeight = heightRef.current !== null;
+        const didOverflowChange = lastIsOverflowing !== isOverflowing;
+
+        if (didClearHeight) {
+          el.style.height = '';
+          heightRef.current = null;
+        }
+
+        if (didOverflowChange) {
+          const overflowValue = isOverflowing ? '' : 'hidden';
+          if (el.style.overflowY !== overflowValue) {
+            el.style.overflowY = overflowValue;
+          }
+          lastIsOverflowing = isOverflowing;
+        }
+
+        return;
+      }
+
+      const didHeightChange = heightRef.current !== target;
+      const didOverflowChange = lastIsOverflowing !== isOverflowing;
+
+      if (didHeightChange) {
+        el.style.height = `${target}px`;
+        heightRef.current = target;
+      }
+
+      if (didOverflowChange) {
+        const overflowValue = isOverflowing ? '' : 'hidden';
+        if (el.style.overflowY !== overflowValue) {
+          el.style.overflowY = overflowValue;
+        }
+        lastIsOverflowing = isOverflowing;
+      }
+    };
+
+    const performResize = () => {
+      const styles = calculateTextareaHeight(
+        el as unknown as HTMLTextAreaElement,
+        hidden as unknown as HTMLTextAreaElement,
+        placeholder,
+        minRows,
+        maxRows,
+      );
+      if (!styles) {
+        return;
+      }
+
+      const { outerHeightStyle, isOverflowing, rowsOccupied } = styles;
+
+      // only apply height if we are not at minimum rows yet
+      if (minRows != null) {
+        const needsMoreThanMin = rowsOccupied > Number(minRows) + 0.0001;
+
+        if (!needsMoreThanMin) {
+          applyHeight(null, isOverflowing);
+          return;
+        }
+      }
+
+      applyHeight(outerHeightStyle, isOverflowing);
+    };
+
+    // Debounce identifier used for less-frequent triggers (resize, RO).
+    let debounceTimeoutId: ReturnType<typeof setTimeout> | null = null;
+    let rafId = 0;
+
+    const schedulePerformResizeDebounced = () => {
+      // Debounce expensive measurements similar to MUI to avoid doing them too frequently.
+      const DEBOUNCE_MS = 166; // ~6fps; good tradeoff for resize/RO events
+      if (debounceTimeoutId) {
+        clearTimeout(debounceTimeoutId);
+      }
+      debounceTimeoutId = setTimeout(() => {
+        if (rafId) {
+          cancelAnimationFrame(rafId);
+        }
+        rafId = requestAnimationFrame(performResize);
+        debounceTimeoutId = null;
+      }, DEBOUNCE_MS);
+    };
+
+    const schedulePerformResizeImmediate = () => {
+      // For input events we want a more immediate response; schedule via RAF.
+      if (debounceTimeoutId) {
+        clearTimeout(debounceTimeoutId);
+        debounceTimeoutId = null;
+      }
+      if (rafId) {
+        cancelAnimationFrame(rafId);
+      }
+      rafId = requestAnimationFrame(performResize);
+    };
+
+    rafId = requestAnimationFrame(performResize);
+
+    const onInput = () => {
+      schedulePerformResizeImmediate();
+    };
+
+    el.addEventListener('input', onInput);
+    window.addEventListener('resize', schedulePerformResizeDebounced);
+
+    let ro: ResizeObserver | null = null;
+    if (typeof ResizeObserver !== 'undefined') {
+      ro = new ResizeObserver(() => {
+        schedulePerformResizeDebounced();
+      });
+      try {
+        ro.observe(el);
+        if (el.parentElement) {
+          ro.observe(el.parentElement);
+        }
+      } catch (err) {
+        // ignore observation errors
+      }
+    }
+
+    return () => {
+      el.removeEventListener('input', onInput);
+      window.removeEventListener('resize', schedulePerformResizeDebounced);
+      if (rafId) {
+        cancelAnimationFrame(rafId);
+      }
+      if (debounceTimeoutId) {
+        clearTimeout(debounceTimeoutId);
+      }
+      if (ro) {
+        ro.disconnect();
+      }
+    };
+  }, [inputRef, minRows, maxRows, placeholder]);
+
+  const element = useRenderElement('textarea', componentProps, {
+    ref: forwardedRef || undefined,
+    state,
+    props: [
+      {
+        id,
+        disabled,
+        name,
+        ref: inputRef,
+        rows: minRows || 2,
+        'aria-labelledby': labelId,
+        style,
+        ...(isControlled ? { value } : { defaultValue }),
+        onChange(event) {
+          const inputValue = event.currentTarget.value;
+          setValue(inputValue, createChangeEventDetails('none', event.nativeEvent));
+          setDirty(inputValue !== validityData.initialValue);
+          setFilled(inputValue !== '');
+        },
+        onFocus() {
+          setFocused(true);
+        },
+        onBlur(event: React.FocusEvent<HTMLTextAreaElement>) {
+          setTouched(true);
+          setFocused(false);
+
+          if (validationMode === 'onBlur') {
+            commitValidation(event.currentTarget.value);
+          }
+        },
+        onKeyDown(event) {
+          if (
+            event.currentTarget.tagName === 'TEXTAREA' &&
+            event.key === 'Enter' &&
+            event.shiftKey === true
+          ) {
+            setTouched(true);
+            commitValidation(event.currentTarget.value);
+          }
+        },
+      },
+      getValidationProps(),
+      getInputValidationProps(),
+      elementProps,
+    ],
+    stateAttributesMapping: fieldValidityMapping,
+  });
+
+  return React.createElement(
+    React.Fragment,
+    null,
+    element,
+    React.createElement('textarea', {
+      'aria-hidden': true,
+      readOnly: true,
+      ref: hiddenTextareaRef,
+      tabIndex: -1,
+      style: {
+        visibility: 'hidden',
+        position: 'absolute',
+        overflow: 'hidden',
+        height: 0,
+        top: 0,
+        left: 0,
+        transform: 'translateZ(0)',
+        paddingTop: 0,
+        paddingBottom: 0,
+        ...(style as React.CSSProperties),
+      },
+    }),
+  );
+});
+
+export namespace Textarea {
+  export type State = FieldRoot.State;
+
+  export interface Props extends BaseUIComponentProps<'textarea', State> {
+    /**
+     * Enable automatic height resizing by setting the minimum number of rows.
+     */
+    minRows?: number;
+    /**
+     * Limit automatic height resizing to this many rows.
+     */
+    maxRows?: number;
+    /**
+     * Callback fired when the `value` changes. Use when controlled.
+     */
+    onValueChange?: (value: string, eventDetails: ChangeEventDetails) => void;
+    defaultValue?: React.ComponentProps<'textarea'>['defaultValue'];
+  }
+
+  export type ChangeEventReason = 'none';
+  export type ChangeEventDetails = BaseUIChangeEventDetails<ChangeEventReason>;
+}
diff --git a/packages/react/src/textarea/TextareaDataAttributes.ts b/packages/react/src/textarea/TextareaDataAttributes.ts
new file mode 100644
index 0000000000..2fc3190555
--- /dev/null
+++ b/packages/react/src/textarea/TextareaDataAttributes.ts
@@ -0,0 +1,30 @@
+export enum TextareaDataAttributes {
+  /**
+   * Present when the textarea is disabled.
+   */
+  disabled = 'data-disabled',
+  /**
+   * Present when the textarea is in valid state.
+   */
+  valid = 'data-valid',
+  /**
+   * Present when the textarea is in invalid state.
+   */
+  invalid = 'data-invalid',
+  /**
+   * Present when the textarea has been touched.
+   */
+  touched = 'data-touched',
+  /**
+   * Present when the textarea's value has changed.
+   */
+  dirty = 'data-dirty',
+  /**
+   * Present when the textarea is filled.
+   */
+  filled = 'data-filled',
+  /**
+   * Present when the textarea is focused.
+   */
+  focused = 'data-focused',
+}
diff --git a/packages/react/src/textarea/calculateTextareaHeight.ts b/packages/react/src/textarea/calculateTextareaHeight.ts
new file mode 100644
index 0000000000..47207cc81d
--- /dev/null
+++ b/packages/react/src/textarea/calculateTextareaHeight.ts
@@ -0,0 +1,116 @@
+export interface CalculateTextareaHeightResult {
+  outerHeightStyle: number;
+  isOverflowing: boolean;
+  rowsOccupied: number;
+}
+
+/**
+ * Calculate the desired outer height, whether content is overflowing and the rows occupied
+ * for an auto-resizing textarea. This mirrors the logic previously embedded inside
+ * Textarea.tsx so the layout effect can stay concise.
+ */
+export function calculateTextareaHeight(
+  el: HTMLTextAreaElement,
+  hidden: HTMLTextAreaElement,
+  placeholder?: string,
+  minRows?: number,
+  maxRows?: number,
+): CalculateTextareaHeightResult | null {
+  if (!el || !hidden) {
+    return null;
+  }
+
+  const getStyleValue = (str: string) => parseInt(str, 10) || 0;
+
+  const computedStyle = getComputedStyle(el);
+
+  let width = computedStyle.width;
+  if (!width || width === '0px') {
+    const rect = el.getBoundingClientRect();
+    width = rect.width ? `${rect.width}px` : width;
+  }
+
+  if (!width || width === '0px') {
+    return null;
+  }
+
+  const styleToCopy: string[] = [];
+  for (let i = 0; i < computedStyle.length; i += 1) {
+    const cssName = computedStyle[i];
+    if (!cssName) {
+      continue;
+    }
+
+    if (
+      cssName.includes('box-sizing') ||
+      cssName.includes('width') ||
+      cssName.includes('padding') ||
+      cssName.includes('border') ||
+      cssName.includes('font') ||
+      cssName.includes('letter-spacing') ||
+      cssName.includes('text-transform') ||
+      cssName.includes('text-indent') ||
+      cssName.includes('line-height') ||
+      cssName.includes('white-space')
+    ) {
+      styleToCopy.push(cssName);
+    }
+  }
+
+  hidden.style.width = width;
+  for (const propName of styleToCopy) {
+    hidden.style.setProperty(propName, computedStyle.getPropertyValue(propName));
+  }
+
+  hidden.style.whiteSpace =
+    computedStyle.whiteSpace === 'pre-wrap' || computedStyle.whiteSpace === 'pre-line'
+      ? computedStyle.whiteSpace
+      : 'pre-wrap';
+
+  hidden.value = el.value || placeholder || 'x';
+  if (hidden.value.slice(-1) === '\n') {
+    // Certain fonts which overflow the line height will cause the textarea
+    // to report a different scrollHeight depending on whether the last line
+    // is empty. Make it non-empty to avoid this issue.
+    hidden.value += ' ';
+  }
+
+  const boxSizing = computedStyle.boxSizing;
+  const paddingTop = getStyleValue(computedStyle.paddingTop);
+  const paddingBottom = getStyleValue(computedStyle.paddingBottom);
+  const padding = paddingTop + paddingBottom;
+  const border =
+    getStyleValue(computedStyle.borderBottomWidth) + getStyleValue(computedStyle.borderTopWidth);
+
+  const innerScrollHeight = hidden.scrollHeight;
+
+  hidden.value = 'x';
+  const singleRowScrollHeight = hidden.scrollHeight || 1;
+  const singleRowContentHeight = Math.max(singleRowScrollHeight - padding, 1);
+
+  const currentContentHeight = Math.max(innerScrollHeight - padding, 0);
+
+  let desiredContentHeight = currentContentHeight;
+  if (minRows) {
+    desiredContentHeight = Math.max(Number(minRows) * singleRowContentHeight, desiredContentHeight);
+  }
+  if (maxRows) {
+    desiredContentHeight = Math.min(Number(maxRows) * singleRowContentHeight, desiredContentHeight);
+  }
+  desiredContentHeight = Math.max(desiredContentHeight, singleRowContentHeight);
+
+  const outerHeightStyle =
+    boxSizing === 'border-box' ? desiredContentHeight + padding + border : desiredContentHeight;
+
+  const isOverflowing = currentContentHeight > desiredContentHeight + 1;
+
+  const rowsOccupied = currentContentHeight / singleRowContentHeight;
+
+  return {
+    outerHeightStyle,
+    isOverflowing,
+    rowsOccupied,
+  };
+}
+
+export default calculateTextareaHeight;
diff --git a/packages/react/src/textarea/index.ts b/packages/react/src/textarea/index.ts
new file mode 100644
index 0000000000..f4212c043e
--- /dev/null
+++ b/packages/react/src/textarea/index.ts
@@ -0,0 +1 @@
+export { Textarea } from './Textarea';