diff --git a/.changeset/text-area-auto-resize.md b/.changeset/text-area-auto-resize.md
new file mode 100644
index 0000000..60920ba
--- /dev/null
+++ b/.changeset/text-area-auto-resize.md
@@ -0,0 +1,5 @@
+---
+"@makeplane/propel": minor
+---
+
+Add `autoResize` (and optional `maxRows`) to `TextArea` and `TextAreaField` so the control grows with its value.
diff --git a/apps/docs/src/demos/text-area-field/auto-resize.tsx b/apps/docs/src/demos/text-area-field/auto-resize.tsx
new file mode 100644
index 0000000..0d3d447
--- /dev/null
+++ b/apps/docs/src/demos/text-area-field/auto-resize.tsx
@@ -0,0 +1,14 @@
+import { TextAreaField } from "@makeplane/propel/components/text-area-field";
+
+export default function AutoResizeDemo() {
+  return (
+    <TextAreaField
+      size="lg"
+      autoResize
+      maxRows={8}
+      rows={2}
+      label="Comment"
+      placeholder="Type to grow the field…"
+    />
+  );
+}
diff --git a/apps/docs/src/demos/text-area/auto-resize.tsx b/apps/docs/src/demos/text-area/auto-resize.tsx
new file mode 100644
index 0000000..5edf50f
--- /dev/null
+++ b/apps/docs/src/demos/text-area/auto-resize.tsx
@@ -0,0 +1,17 @@
+import { TextArea, TextAreaGroup } from "@makeplane/propel/components/text-area";
+
+export default function AutoResizeDemo() {
+  return (
+    <TextAreaGroup resize="none">
+      <TextArea
+        size="lg"
+        surface="field"
+        autoResize
+        maxRows={8}
+        rows={2}
+        aria-label="Comment"
+        placeholder="Type to grow the field…"
+      />
+    </TextAreaGroup>
+  );
+}
diff --git a/apps/docs/src/pages/components/text-area-field.mdx b/apps/docs/src/pages/components/text-area-field.mdx
index 65281ca..9eeb1d5 100644
--- a/apps/docs/src/pages/components/text-area-field.mdx
+++ b/apps/docs/src/pages/components/text-area-field.mdx
@@ -15,6 +15,8 @@ import InvalidDemo from "~/demos/text-area-field/invalid.tsx";
 import invalidSource from "~/demos/text-area-field/invalid.tsx?raw";
 import ResizeDemo from "~/demos/text-area-field/resize.tsx";
 import resizeSource from "~/demos/text-area-field/resize.tsx?raw";
+import AutoResizeDemo from "~/demos/text-area-field/auto-resize.tsx";
+import autoResizeSource from "~/demos/text-area-field/auto-resize.tsx?raw";
 import SizesDemo from "~/demos/text-area-field/sizes.tsx";
 import sizesSource from "~/demos/text-area-field/sizes.tsx?raw";
 
@@ -72,6 +74,15 @@ The `resize` prop controls the native drag handle: `vertical` allows height chan
   <ResizeDemo client:visible />
 </ComponentExample>
 
+### Auto resize
+
+`autoResize` grows the field with its value (size min-height as the floor) and turns the native
+resize handle off. `maxRows` caps the visible lines; further content scrolls.
+
+<ComponentExample code={autoResizeSource}>
+  <AutoResizeDemo client:visible />
+</ComponentExample>
+
 ### Invalid
 
 Setting `error` overrides `hint`, marks the field invalid (`aria-invalid`), and recolors the border to danger.
diff --git a/apps/docs/src/pages/components/text-area.mdx b/apps/docs/src/pages/components/text-area.mdx
index e611009..0e676af 100644
--- a/apps/docs/src/pages/components/text-area.mdx
+++ b/apps/docs/src/pages/components/text-area.mdx
@@ -11,6 +11,8 @@ import BasicDemo from "~/demos/text-area/basic.tsx";
 import basicSource from "~/demos/text-area/basic.tsx?raw";
 import ResizeDemo from "~/demos/text-area/resize.tsx";
 import resizeSource from "~/demos/text-area/resize.tsx?raw";
+import AutoResizeDemo from "~/demos/text-area/auto-resize.tsx";
+import autoResizeSource from "~/demos/text-area/auto-resize.tsx?raw";
 import SizesDemo from "~/demos/text-area/sizes.tsx";
 import sizesSource from "~/demos/text-area/sizes.tsx?raw";
 import SurfacesDemo from "~/demos/text-area/surfaces.tsx";
@@ -85,6 +87,16 @@ axes. The leaf itself is never resizable.
   <ResizeDemo client:visible />
 </ComponentExample>
 
+### Auto resize
+
+`autoResize` grows the control with its value, using the size min-height as the floor. Pair it with
+`TextAreaGroup` `resize="none"` so the native drag handle does not fight the content height.
+`maxRows` caps the visible lines; further content scrolls.
+
+<ComponentExample code={autoResizeSource}>
+  <AutoResizeDemo client:visible />
+</ComponentExample>
+
 ### With description
 
 <ComponentExample code={withDescriptionSource}>
diff --git a/packages/propel/src/components/text-area-field/text-area-field.stories.tsx b/packages/propel/src/components/text-area-field/text-area-field.stories.tsx
index 1625226..74ac214 100644
--- a/packages/propel/src/components/text-area-field/text-area-field.stories.tsx
+++ b/packages/propel/src/components/text-area-field/text-area-field.stories.tsx
@@ -110,6 +110,46 @@ export const Scroll: Story = {
   ),
 };
 
+/**
+ * `autoResize` grows the field with its value and turns the native resize handle off. `maxRows`
+ * caps the visible lines; further content scrolls.
+ */
+export const AutoResize: Story = {
+  args: {
+    label: "Comment",
+    autoResize: true,
+    maxRows: 6,
+    rows: 2,
+    placeholder: "Type to grow the field…",
+  },
+  render: (args) => (
+    <div className="w-80">
+      <TextAreaField {...args} />
+    </div>
+  ),
+};
+
+/**
+ * Interaction test: typing additional lines grows a `TextAreaField` past its initial height, and
+ * the wrapping group stays `resize: none`.
+ */
+export const AutoResizeGrowsWithContent: Story = {
+  ...AutoResize,
+  tags: ["!dev", "!autodocs", "!manifest"],
+  play: async ({ canvas, userEvent }) => {
+    const textarea = canvas.getByRole<HTMLTextAreaElement>("textbox", { name: "Comment" });
+    const group = textarea.parentElement;
+    if (group == null) throw new Error("expected a TextAreaGroup wrapper");
+    await expect(getComputedStyle(group).resize).toBe("none");
+    const initial = textarea.getBoundingClientRect().height;
+    await userEvent.type(
+      textarea,
+      "one{Enter}two{Enter}three{Enter}four{Enter}five{Enter}six{Enter}seven",
+    );
+    await expect(textarea.getBoundingClientRect().height).toBeGreaterThan(initial);
+  },
+};
+
 /** The error treatment: danger border, danger helper text, and `aria-invalid`. */
 export const Invalid: Story = {
   args: {
diff --git a/packages/propel/src/components/text-area-field/text-area-field.tsx b/packages/propel/src/components/text-area-field/text-area-field.tsx
index 6ff2e81..94a6f94 100644
--- a/packages/propel/src/components/text-area-field/text-area-field.tsx
+++ b/packages/propel/src/components/text-area-field/text-area-field.tsx
@@ -14,11 +14,24 @@ export type TextAreaFieldProps = Omit<TextAreaProps, "size" | "surface"> & {
   /** Size scale. `lg` | `xl` | `2xl`. */
   size: InputSize;
   /**
-   * Native resize handle on the bordered frame.
+   * Native resize handle on the bordered frame. Forced to `none` when `autoResize` is set, so the
+   * drag handle does not fight content-driven height.
    *
    * @default "vertical"
    */
   resize?: TextAreaResize;
+  /**
+   * Grow the control with its value, using the size min-height as the floor. Disables the native
+   * resize handle.
+   *
+   * @default false
+   */
+  autoResize?: boolean;
+  /**
+   * Maximum visible lines when `autoResize` is set. Further lines scroll inside the control.
+   * Unbounded when omitted.
+   */
+  maxRows?: number;
   /** Label text shown above the control. */
   label?: string;
   /** Marks the field required: adds a `*` asterisk and sets `required`. */
@@ -36,7 +49,8 @@ export type TextAreaFieldProps = Omit<TextAreaProps, "size" | "surface"> & {
 
 /**
  * Multi-line text field built on Base UI `Field`, rendering the control as a `<textarea>`. Vertical
- * layout only.
+ * layout only. `autoResize` grows the control with its value and disables the native resize
+ * handle.
  */
 export function TextAreaField({
   size,
@@ -48,6 +62,7 @@ export function TextAreaField({
   error,
   disabled,
   resize,
+  autoResize = false,
   ...controlProps
 }: TextAreaFieldProps) {
   return (
@@ -60,8 +75,14 @@ export function TextAreaField({
         orientation="vertical"
       />
       <FieldControlContent orientation="vertical" size={size}>
-        <TextAreaGroup resize={resize}>
-          <TextArea required={required} size={size} surface="field" {...controlProps} />
+        <TextAreaGroup resize={autoResize ? "none" : resize}>
+          <TextArea
+            required={required}
+            size={size}
+            surface="field"
+            autoResize={autoResize}
+            {...controlProps}
+          />
         </TextAreaGroup>
         <FieldHelperText size={size} hint={hint} error={error} />
       </FieldControlContent>
diff --git a/packages/propel/src/components/text-area/text-area.stories.tsx b/packages/propel/src/components/text-area/text-area.stories.tsx
index 84ea928..6690127 100644
--- a/packages/propel/src/components/text-area/text-area.stories.tsx
+++ b/packages/propel/src/components/text-area/text-area.stories.tsx
@@ -148,6 +148,88 @@ export const ResizeBothOnFrameInteraction: Story = {
   },
 };
 
+/**
+ * `autoResize` grows the control with its value. Pair it with `TextAreaGroup` `resize="none"` so
+ * the native drag handle does not fight content-driven height. `maxRows` caps the visible lines and
+ * further content scrolls.
+ */
+export const AutoResize: Story = {
+  argTypes: { "aria-label": { control: false } },
+  args: {
+    autoResize: true,
+    rows: 2,
+    "aria-label": "Comment",
+    placeholder: "Type to grow the field…",
+  },
+  render: (args) => (
+    <TextAreaGroup resize="none">
+      <TextArea {...args} />
+    </TextAreaGroup>
+  ),
+};
+
+/**
+ * Interaction test: typing additional lines grows the control past its size min-height, and
+ * clearing the value returns it to that floor rather than collapsing to a single line. Tagged out
+ * of the sidebar/docs/manifest while still running under the default `test` tag.
+ */
+export const AutoResizeGrowsWithContent: Story = {
+  ...AutoResize,
+  tags: ["!dev", "!autodocs", "!manifest"],
+  play: async ({ canvas, userEvent }) => {
+    const textarea = canvas.getByRole<HTMLTextAreaElement>("textbox", { name: "Comment" });
+    const initial = textarea.getBoundingClientRect().height;
+    await userEvent.type(
+      textarea,
+      "one{Enter}two{Enter}three{Enter}four{Enter}five{Enter}six{Enter}seven",
+    );
+    const grown = textarea.getBoundingClientRect().height;
+    await expect(grown).toBeGreaterThan(initial);
+    await userEvent.clear(textarea);
+    await expect(textarea.getBoundingClientRect().height).toBeCloseTo(initial, 0);
+  },
+};
+
+/**
+ * Interaction test: an empty auto-resizing field stays on the size `min-height` (the same floor as
+ * a non-auto-resize field), rather than collapsing to a single line.
+ */
+export const AutoResizeKeepsSizeMinHeight: Story = {
+  ...AutoResize,
+  tags: ["!dev", "!autodocs", "!manifest"],
+  play: async ({ canvas }) => {
+    const textarea = canvas.getByRole<HTMLTextAreaElement>("textbox", { name: "Comment" });
+    const rootPx = parseFloat(getComputedStyle(textarea.ownerDocument.documentElement).fontSize);
+    // `lg` field floor: `--textarea-min-height-lg` = 4.75rem (76px at a 16px root).
+    const minHeight = 4.75 * (Number.isFinite(rootPx) ? rootPx : 16);
+    await expect(textarea.getBoundingClientRect().height).toBeCloseTo(minHeight, 0);
+  },
+};
+
+/**
+ * Interaction test: `maxRows` caps the visible height; further lines keep the same box and scroll
+ * inside it.
+ */
+export const AutoResizeMaxRowsCapsHeight: Story = {
+  tags: ["!dev", "!autodocs", "!manifest"],
+  args: {
+    autoResize: true,
+    maxRows: 3,
+    rows: 1,
+    surface: "embedded",
+    "aria-label": "Comment",
+  },
+  render: (args) => <TextArea {...args} />,
+  play: async ({ canvas, userEvent }) => {
+    const textarea = canvas.getByRole<HTMLTextAreaElement>("textbox", { name: "Comment" });
+    await userEvent.type(textarea, "a{Enter}b{Enter}c");
+    const atCap = textarea.getBoundingClientRect().height;
+    await userEvent.type(textarea, "{Enter}d{Enter}e{Enter}f{Enter}g");
+    await expect(textarea.getBoundingClientRect().height).toBe(atCap);
+    await expect(textarea.scrollHeight).toBeGreaterThan(textarea.clientHeight);
+  },
+};
+
 export const FieldComposition: Story = {
   tags: ["!dev", "!autodocs", "!manifest"],
   args: { rows: 3 },
diff --git a/packages/propel/src/components/text-area/text-area.tsx b/packages/propel/src/components/text-area/text-area.tsx
index 09eaecc..2804a39 100644
--- a/packages/propel/src/components/text-area/text-area.tsx
+++ b/packages/propel/src/components/text-area/text-area.tsx
@@ -1,5 +1,5 @@
 import { Field as BaseField } from "@base-ui/react/field";
-import type * as React from "react";
+import * as React from "react";
 
 import {
   TextArea as TextAreaElement,
@@ -18,6 +18,131 @@ type NativeTextAreaProps = Omit<
   keyof BaseFieldControlProps | "children" | "className" | "style"
 >;
 
+function assignRef<T>(ref: React.Ref<T> | undefined, node: T | null) {
+  if (typeof ref === "function") ref(node);
+  else if (ref != null) (ref as React.RefObject<T | null>).current = node;
+}
+
+function lineHeightPx(computed: CSSStyleDeclaration): number {
+  const parsed = parseFloat(computed.lineHeight);
+  return Number.isFinite(parsed) ? parsed : parseFloat(computed.fontSize) * 1.2;
+}
+
+function borderYPx(computed: CSSStyleDeclaration): number {
+  return parseFloat(computed.borderTopWidth) + parseFloat(computed.borderBottomWidth);
+}
+
+function paddingYPx(computed: CSSStyleDeclaration): number {
+  return parseFloat(computed.paddingTop) + parseFloat(computed.paddingBottom);
+}
+
+// Last-resort default, used only when the `min-h-(--textarea-min-height-*)` class on the element
+// fails to resolve to a real computed value. Must match `--textarea-min-height-*` in
+// `styles/variables.css`.
+const TEXT_AREA_DEFAULT_MIN_HEIGHT_REM: Record<TextAreaSize, number> = {
+  md: 3.75,
+  lg: 4.75,
+  xl: 6.375,
+  "2xl": 5.625,
+};
+
+function defaultMinHeightPx(element: HTMLTextAreaElement, size: TextAreaSize): number {
+  const rootPx = parseFloat(getComputedStyle(element.ownerDocument.documentElement).fontSize);
+  return TEXT_AREA_DEFAULT_MIN_HEIGHT_REM[size] * (Number.isFinite(rootPx) ? rootPx : 16);
+}
+
+/** Match content height, honoring the size `min-height` as the floor and `maxRows` as the cap. */
+function syncTextAreaHeight(
+  element: HTMLTextAreaElement,
+  maxRows: number | undefined,
+  size: TextAreaSize,
+  surface: TextAreaSurface,
+) {
+  const previousOverflowY = element.style.overflowY;
+  // Assumes `box-sizing: border-box` — Tailwind's own Preflight default, which every other class on
+  // this leaf (padding, min-height) already assumes — so `height` is the whole visual box and
+  // border always adds in.
+  element.style.minHeight = "";
+  const computed = getComputedStyle(element);
+  const borderY = borderYPx(computed);
+  // Prefer the computed `min-h-(--textarea-min-height-*)` class so an app/theme override of that
+  // custom property is honored; fall back to the JS default only if it fails to resolve (e.g. the
+  // custom property isn't defined in this page's CSS at all).
+  const computedMinHeight = parseFloat(computed.minHeight);
+  const minHeight =
+    surface === "field"
+      ? computedMinHeight > 0
+        ? computedMinHeight
+        : defaultMinHeightPx(element, size)
+      : 0;
+  element.style.minHeight = minHeight > 0 ? `${minHeight}px` : "";
+
+  element.style.overflowY = "hidden";
+  element.style.height = "auto";
+
+  let next = element.scrollHeight + borderY;
+  if (minHeight > 0) {
+    next = Math.max(next, minHeight);
+  }
+
+  if (maxRows != null) {
+    const maxHeight = lineHeightPx(computed) * maxRows + paddingYPx(computed) + borderY;
+    next = Math.min(next, Math.max(maxHeight, minHeight));
+  }
+
+  element.style.height = `${next}px`;
+  element.style.overflowY = previousOverflowY;
+}
+
+function useTextAreaAutoResize(
+  elementRef: React.RefObject<HTMLTextAreaElement | null>,
+  enabled: boolean,
+  maxRows: number | undefined,
+  value: React.ComponentProps<"textarea">["value"],
+  size: TextAreaSize,
+  surface: TextAreaSurface,
+) {
+  const sync = React.useCallback(() => {
+    const element = elementRef.current;
+    if (element == null) return;
+    if (!enabled) {
+      element.style.height = "";
+      element.style.minHeight = "";
+      return;
+    }
+    syncTextAreaHeight(element, maxRows, size, surface);
+  }, [elementRef, enabled, maxRows, size, surface]);
+
+  React.useLayoutEffect(() => {
+    sync();
+  }, [sync, value]);
+
+  React.useLayoutEffect(() => {
+    const element = elementRef.current;
+    if (element == null || !enabled) return;
+
+    // `sync()` never changes the element's own size in a way that reproduces here: it converges to
+    // the same explicit height in one pass, so a self-triggered notification is a no-op, not a loop.
+    const observer = new ResizeObserver(() => {
+      sync();
+    });
+    observer.observe(element);
+
+    const form = element.form;
+    const onReset = () => {
+      requestAnimationFrame(sync);
+    };
+    form?.addEventListener("reset", onReset);
+
+    return () => {
+      observer.disconnect();
+      form?.removeEventListener("reset", onReset);
+    };
+  }, [elementRef, enabled, sync]);
+
+  return sync;
+}
+
 // `size` is omitted from `Field.Control`'s input-shaped props: its native `size` (width in
 // characters) would collide with the styling axis below.
 export type TextAreaProps = Omit<BaseFieldControlProps, "className" | "style" | "render" | "size"> &
@@ -26,6 +151,19 @@ export type TextAreaProps = Omit<BaseFieldControlProps, "className" | "style" |
     size: TextAreaSize;
     /** Control presentation for standalone fields or embedded composer surfaces. */
     surface: TextAreaSurface;
+    /**
+     * Grow the control with its value, using the size min-height as the floor. Pair the `field`
+     * surface with `TextAreaGroup` `resize="none"` so the native drag handle does not fight
+     * content-driven height.
+     *
+     * @default false
+     */
+    autoResize?: boolean;
+    /**
+     * Maximum visible lines when `autoResize` is set. Further lines scroll inside the control.
+     * Unbounded when omitted.
+     */
+    maxRows?: number;
     /** The default value of the textarea. Use when uncontrolled. */
     defaultValue?: React.ComponentProps<"textarea">["defaultValue"];
     /** The value of the textarea. Use when controlled. */
@@ -37,10 +175,47 @@ export type TextAreaProps = Omit<BaseFieldControlProps, "className" | "style" |
  * grafted onto the styled `elements` `TextArea` element (rule 1a) — behavior part outer, styled
  * part as the render target. Base UI ships no textarea control, so `Field.Control` renders the
  * styled `<textarea>` directly (this replaces the former `base/text-area` wrapper). Pair the
- * `field` surface with `TextAreaGroup`, which owns the native `resize` handle.
+ * `field` surface with `TextAreaGroup`, which owns the native `resize` handle. `autoResize` grows
+ * the control with its value; the ready-made `TextAreaField` turns the native handle off when it is
+ * set.
  */
-export function TextArea({ size, surface, ...props }: TextAreaProps) {
+export function TextArea({
+  size,
+  surface,
+  autoResize = false,
+  maxRows,
+  ref,
+  onInput,
+  ...props
+}: TextAreaProps) {
+  const textareaRef = React.useRef<HTMLTextAreaElement>(null);
+  const syncHeight = useTextAreaAutoResize(
+    textareaRef,
+    autoResize,
+    maxRows,
+    props.value,
+    size,
+    surface,
+  );
+  const setRef = React.useCallback(
+    (node: Element | null) => {
+      textareaRef.current = node instanceof HTMLTextAreaElement ? node : null;
+      assignRef(ref, node);
+    },
+    [ref],
+  );
+
   return (
-    <BaseField.Control {...props} render={<TextAreaElement size={size} surface={surface} />} />
+    <BaseField.Control
+      {...props}
+      onInput={(event) => {
+        // `onInput` rather than `onChange`: Field.Control already owns `onChange` for dirty/validity
+        // tracking, and replacing it would drop that. The value is in the DOM by `input`.
+        onInput?.(event);
+        syncHeight();
+      }}
+      ref={setRef}
+      render={<TextAreaElement size={size} surface={surface} autoResize={autoResize} />}
+    />
   );
 }
diff --git a/packages/propel/src/elements/text-area/text-area-group.tsx b/packages/propel/src/elements/text-area/text-area-group.tsx
index c4e2e3f..562ff91 100644
--- a/packages/propel/src/elements/text-area/text-area-group.tsx
+++ b/packages/propel/src/elements/text-area/text-area-group.tsx
@@ -17,7 +17,8 @@ export type TextAreaGroupProps = Omit<useRender.ComponentProps<"div">, "classNam
  * focus/error border treatments, and the native `resize` handle so growth carries the chrome with
  * the content. Children should be that single leaf only — the field surface is `min-w-full`, so a
  * sibling inside the frame overflows. Put attach/submit controls outside the group, or use the
- * `embedded` / `inline` surfaces (no group) for composer rows.
+ * `embedded` / `inline` surfaces (no group) for composer rows. Pair `autoResize` on the leaf with
+ * `resize="none"` so the native drag handle does not fight content-driven height.
  *
  * @default resize = "vertical"
  */
diff --git a/packages/propel/src/elements/text-area/text-area.stories.tsx b/packages/propel/src/elements/text-area/text-area.stories.tsx
index cf10897..b46512b 100644
--- a/packages/propel/src/elements/text-area/text-area.stories.tsx
+++ b/packages/propel/src/elements/text-area/text-area.stories.tsx
@@ -113,6 +113,45 @@ export const Surfaces: Story = {
   ),
 };
 
+/**
+ * `autoResize` toggles this leaf's visual state only (`h-auto` instead of `h-full`, plus
+ * `data-auto-resize` for state-scoped styling) — it does not grow the leaf on its own; `elements`
+ * holds no behavior (tier rules). Overflowing content here scrolls instead of growing the box —
+ * pair `autoResize` with the `components` `TextArea`/`TextAreaField`, which grafts the actual
+ * resize behavior onto this same styled leaf, to see it grow.
+ */
+export const AutoResize: Story = {
+  argTypes: { "aria-label": { control: false } },
+  args: {
+    autoResize: true,
+    rows: 2,
+    defaultValue: [
+      "This leaf only carries autoResize's visual state.",
+      "Its content scrolls instead of growing the box.",
+      "The components TextArea grafts the real resize.",
+      "See its own AutoResize story for that behavior.",
+    ].join("\n"),
+  },
+  render: (args) => (
+    <TextAreaGroup resize="none">
+      <TextArea {...args} />
+    </TextAreaGroup>
+  ),
+};
+
+/**
+ * CSS canary (rule 2b): `autoResize` marks the leaf with `data-auto-resize`. Tagged out of the
+ * sidebar/docs/manifest while still running under the default `test` tag.
+ */
+export const AutoResizeCanary: Story = {
+  ...AutoResize,
+  tags: ["!dev", "!autodocs", "!manifest"],
+  play: async ({ canvas }) => {
+    const textarea = canvas.getByRole("textbox", { name: "Comment" });
+    await expect(textarea).toHaveAttribute("data-auto-resize");
+  },
+};
+
 /**
  * `TextAreaGroup`'s `resize` controls the native drag handle on the bordered frame: `none` locks
  * the size, `vertical` allows height changes, `both` frees both axes. The leaf stays
diff --git a/packages/propel/src/elements/text-area/text-area.tsx b/packages/propel/src/elements/text-area/text-area.tsx
index 18c859e..d00df2a 100644
--- a/packages/propel/src/elements/text-area/text-area.tsx
+++ b/packages/propel/src/elements/text-area/text-area.tsx
@@ -16,11 +16,13 @@ export type TextAreaProps = Omit<useRender.ComponentProps<"textarea">, "classNam
 /**
  * The styled multi-line textarea leaf. Base-UI-agnostic — graft the Base UI `Field.Control`
  * behavior in `components` via `<BaseField.Control render={<TextArea/>} />`. Compose the `field`
- * surface inside a `TextAreaGroup` frame (the group owns `resize`).
+ * surface inside a `TextAreaGroup` frame (the group owns `resize`). Pair `autoResize` with
+ * `resize="none"` on that frame so the native drag handle does not fight content-driven height.
  */
-export function TextArea({ size, surface, render, ...props }: TextAreaProps) {
+export function TextArea({ size, surface, autoResize = false, render, ...props }: TextAreaProps) {
   const defaultProps: useRender.ElementProps<"textarea"> = {
-    className: textAreaVariants({ size, surface }),
+    className: textAreaVariants({ size, surface, autoResize }),
+    ...(autoResize ? { "data-auto-resize": "" } : null),
   };
   return useRender({ defaultTagName: "textarea", render, props: mergeProps(defaultProps, props) });
 }
diff --git a/packages/propel/src/elements/text-area/variants.ts b/packages/propel/src/elements/text-area/variants.ts
index 88e1799..e8cac84 100644
--- a/packages/propel/src/elements/text-area/variants.ts
+++ b/packages/propel/src/elements/text-area/variants.ts
@@ -41,6 +41,8 @@ export type TextAreaGroupVariantProps = StrictVariantProps<
 type TextAreaGroupVariantConfig = VariantProps<typeof textAreaGroupVariants>;
 export type TextAreaResize = NonNullable<TextAreaGroupVariantConfig["resize"]>;
 
+const textAreaDefaultVariants = { autoResize: false } as const;
+
 export const textAreaVariants = cva(
   cx(
     // The leaf never owns the resize handle — `TextAreaGroup` does — so it stays `resize-none`.
@@ -57,11 +59,12 @@ export const textAreaVariants = cva(
         "2xl": "text-body-md-regular",
       },
       surface: {
-        // `field` fills the bordered `TextAreaGroup` frame (`h-full w-full`) so growing the
-        // frame's native resize handle carries the leaf with it. `embedded` owns its full-width
-        // composer chrome alone; `inline` sits beside sibling controls and needs `min-w-0 flex-1`
-        // to shrink instead. Each surface owns its width utilities outright.
-        field: "h-full w-full min-w-full px-3 py-2",
+        // `field` fills the bordered `TextAreaGroup` frame (`w-full`) so growing the frame's
+        // native resize handle carries the leaf with it (`h-full` is the non-autoResize compound
+        // below). `embedded` owns its full-width composer chrome alone; `inline` sits beside
+        // sibling controls and needs `min-w-0 flex-1` to shrink instead. Each surface owns its
+        // width utilities outright.
+        field: "w-full min-w-full px-3 py-2",
         // These `leading-*` deliberately override the size composite's 1.54/1.2 line-height:
         // prose in a comment box (`embedded`) and inline editing read tighter than a bordered
         // form field. The override is deterministic, not order-dependent — a `leading-*` utility
@@ -70,6 +73,16 @@ export const textAreaVariants = cva(
         embedded: "w-full min-w-full p-3 leading-snug",
         inline: "min-w-0 flex-1 leading-tight",
       },
+      /**
+       * Visual state only — this leaf does not grow itself. Pair with the `components` `TextArea`/
+       * `TextAreaField`, which syncs an explicit pixel height in JS on every input (no CSS
+       * `field-sizing` path — an inline `height` always wins over it, so a CSS-only class would be
+       * dead weight) and grows the control with its content above the size `min-height`.
+       */
+      autoResize: {
+        false: "",
+        true: "",
+      },
     },
     // Min-heights are whole multiples of each size's own rendered line box (12px×1.2 = 14.4,
     // 13px×1.54 ≈ 20, 14px×1.54 ≈ 21.6, 16px×1.54 ≈ 24.6) — 3/3/4/3 visible lines. The old
@@ -80,7 +93,13 @@ export const textAreaVariants = cva(
       { surface: "field", size: "lg", class: "min-h-(--textarea-min-height-lg)" },
       { surface: "field", size: "xl", class: "min-h-(--textarea-min-height-xl)" },
       { surface: "field", size: "2xl", class: "min-h-(--textarea-min-height-2xl)" },
+      // The native resize handle on `TextAreaGroup` sets an explicit height on the frame; `h-full`
+      // lets the leaf fill that. Auto-resize sizes the leaf from its content instead, so the frame
+      // wraps it (`h-auto`) while the size `min-height` compounds above stay the floor.
+      { surface: "field", autoResize: false, class: "h-full" },
+      { surface: "field", autoResize: true, class: "h-auto" },
     ],
+    defaultVariants: textAreaDefaultVariants,
   },
 );
 
@@ -88,4 +107,7 @@ type TextAreaVariantConfig = VariantProps<typeof textAreaVariants>;
 
 export type TextAreaSize = NonNullable<TextAreaVariantConfig["size"]>;
 export type TextAreaSurface = NonNullable<TextAreaVariantConfig["surface"]>;
-export type TextAreaVariantProps = StrictVariantProps<typeof textAreaVariants>;
+export type TextAreaVariantProps = StrictVariantProps<
+  typeof textAreaVariants,
+  keyof typeof textAreaDefaultVariants
+>;
diff --git a/packages/propel/src/internal/textarea-min-height.test.ts b/packages/propel/src/internal/textarea-min-height.test.ts
new file mode 100644
index 0000000..95d6d50
--- /dev/null
+++ b/packages/propel/src/internal/textarea-min-height.test.ts
@@ -0,0 +1,39 @@
+import { readFileSync } from "node:fs";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+import { describe, expect, it } from "vitest";
+
+const dirname = path.dirname(fileURLToPath(import.meta.url));
+const variablesCss = readFileSync(path.join(dirname, "../styles/variables.css"), "utf8");
+const textAreaSource = readFileSync(
+  path.join(dirname, "../components/text-area/text-area.tsx"),
+  "utf8",
+);
+
+const SIZES = ["md", "lg", "xl", "2xl"] as const;
+
+/**
+ * `text-area.tsx`'s `TEXT_AREA_DEFAULT_MIN_HEIGHT_REM` is the fallback used only when the computed
+ * `min-h-(--textarea-min-height-*)` class fails to resolve. Nothing else keeps it in sync with
+ * `--textarea-min-height-*` (variables.css) — this catches either side drifting from the other.
+ */
+describe("TEXT_AREA_DEFAULT_MIN_HEIGHT_REM mirrors --textarea-min-height-* in variables.css", () => {
+  const block = /TEXT_AREA_DEFAULT_MIN_HEIGHT_REM[^{]*\{([^}]*)\}/.exec(textAreaSource);
+  if (block == null) {
+    throw new Error("TEXT_AREA_DEFAULT_MIN_HEIGHT_REM table not found in text-area.tsx");
+  }
+  const jsTable = block[1];
+
+  it.each(SIZES)("%s: JS constant matches the CSS custom property", (size) => {
+    const jsMatch = new RegExp(`^\\s*"?${size}"?:\\s*([\\d.]+)`, "m").exec(jsTable);
+    expect(jsMatch, `${size} missing from TEXT_AREA_DEFAULT_MIN_HEIGHT_REM`).not.toBeNull();
+
+    const cssMatch = new RegExp(`--textarea-min-height-${size}:\\s*([\\d.]+)rem`).exec(
+      variablesCss,
+    );
+    expect(cssMatch, `--textarea-min-height-${size} missing from variables.css`).not.toBeNull();
+
+    expect(Number(jsMatch![1])).toBe(Number(cssMatch![1]));
+  });
+});