From 95cea2c6320d18028ef7a4b0f5899e1266f94e46 Mon Sep 17 00:00:00 2001
From: Bartek Bak <bartek@cloudflare.com>
Date: Fri, 10 Jul 2026 10:55:28 +0100
Subject: [PATCH 1/4] feat(input-area): add auto resize support

---
 .changeset/tall-pandas-grow.md                |  5 ++
 .../src/components/demos/InputAreaDemo.tsx    | 14 +++++
 .../src/pages/components/input-area.mdx       | 11 ++++
 .../kumo/src/components/input/input-area.tsx  | 55 ++++++++++++++++--
 .../kumo/src/components/input/input.test.tsx  | 58 +++++++++++++++++--
 5 files changed, 134 insertions(+), 9 deletions(-)
 create mode 100644 .changeset/tall-pandas-grow.md

diff --git a/.changeset/tall-pandas-grow.md b/.changeset/tall-pandas-grow.md
new file mode 100644
index 0000000000..af256497f7
--- /dev/null
+++ b/.changeset/tall-pandas-grow.md
@@ -0,0 +1,5 @@
+---
+"@cloudflare/kumo": minor
+---
+
+Add auto-resize support to InputArea and Textarea.
diff --git a/packages/kumo-docs-astro/src/components/demos/InputAreaDemo.tsx b/packages/kumo-docs-astro/src/components/demos/InputAreaDemo.tsx
index 8b4afdc6fe..ce9311d9c7 100644
--- a/packages/kumo-docs-astro/src/components/demos/InputAreaDemo.tsx
+++ b/packages/kumo-docs-astro/src/components/demos/InputAreaDemo.tsx
@@ -80,6 +80,20 @@ export function InputAreaRowsDemo() {
   );
 }
 
+export function InputAreaAutoResizeDemo() {
+  return (
+    <InputArea
+      label="Configuration value"
+      defaultValue={
+        "Review the configuration changes.\n\nAdd follow-up notes here.\n\n"
+      }
+      autoResize
+      description="Resizes vertically with content size"
+      rows={2}
+    />
+  );
+}
+
 export function InputAreaOptionalFieldDemo() {
   return (
     <InputArea
diff --git a/packages/kumo-docs-astro/src/pages/components/input-area.mdx b/packages/kumo-docs-astro/src/pages/components/input-area.mdx
index e1ddabfa71..c74839e478 100644
--- a/packages/kumo-docs-astro/src/pages/components/input-area.mdx
+++ b/packages/kumo-docs-astro/src/pages/components/input-area.mdx
@@ -17,6 +17,7 @@ import {
   InputAreaDisabledDemo,
   InputAreaBareDemo,
   InputAreaRowsDemo,
+  InputAreaAutoResizeDemo,
   InputAreaOptionalFieldDemo,
   InputAreaLabelTooltipDemo,
   InputAreaReactNodeLabelDemo,
@@ -142,6 +143,16 @@ export default function Example() {
   <InputAreaDisabledDemo client:visible />
 </ComponentExample>
 
+### Auto Resize
+
+<p>
+  Use `autoResize` to let the textarea grow vertically as users type or paste
+  multi-line content.
+</p>
+<ComponentExample demo="InputAreaAutoResizeDemo">
+  <InputAreaAutoResizeDemo client:visible />
+</ComponentExample>
+
 ### Bare InputArea
 
 <p>
diff --git a/packages/kumo/src/components/input/input-area.tsx b/packages/kumo/src/components/input/input-area.tsx
index be0c14a32a..4d7e5ad570 100644
--- a/packages/kumo/src/components/input/input-area.tsx
+++ b/packages/kumo/src/components/input/input-area.tsx
@@ -1,9 +1,13 @@
 import { inputVariants } from "./input";
 import { cn } from "../../utils/cn";
-import { useCallback, type ReactNode } from "react";
+import { useCallback, useLayoutEffect, useRef, type ReactNode } from "react";
 import * as React from "react";
 import { Field as FieldBase } from "@base-ui/react/field";
-import { Field as KumoField, normalizeFieldError, type FieldErrorMatch } from "../field/field";
+import {
+  Field as KumoField,
+  normalizeFieldError,
+  type FieldErrorMatch,
+} from "../field/field";
 
 export const InputArea = React.forwardRef<HTMLTextAreaElement, InputAreaProps>(
   (props, ref) => {
@@ -17,6 +21,7 @@ export const InputArea = React.forwardRef<HTMLTextAreaElement, InputAreaProps>(
       labelTooltip,
       description,
       error,
+      autoResize = false,
       ...inputProps
     } = props;
 
@@ -35,17 +40,55 @@ export const InputArea = React.forwardRef<HTMLTextAreaElement, InputAreaProps>(
 
     // Extract required from inputProps to pass to Field for label decoration
     const { required } = inputProps;
+    const textareaRef = useRef<HTMLTextAreaElement | null>(null);
+
+    const resizeTextarea = useCallback(
+      (textarea = textareaRef.current) => {
+        if (!textarea) return;
+
+        if (!autoResize) {
+          textarea.style.height = "";
+          return;
+        }
+
+        textarea.style.height = "auto";
+        textarea.style.height = `${textarea.scrollHeight}px`;
+      },
+      [autoResize],
+    );
+
+    const setTextareaRef = useCallback(
+      (node: HTMLTextAreaElement | null) => {
+        textareaRef.current = node;
+
+        if (typeof ref === "function") {
+          ref(node);
+        } else if (ref) {
+          ref.current = node;
+        }
+
+        resizeTextarea(node);
+      },
+      [ref, resizeTextarea],
+    );
+
+    useLayoutEffect(() => {
+      resizeTextarea();
+    }, [resizeTextarea, inputProps.value, inputProps.defaultValue]);
+
     const handleChange = useCallback(
       (event: React.ChangeEvent<HTMLTextAreaElement>) => {
         onChange?.(event);
         onValueChange?.(event.target.value);
+        resizeTextarea(event.currentTarget);
       },
-      [onChange, onValueChange],
+      [onChange, onValueChange, resizeTextarea],
     );
 
     const textareaClassName = cn(
       inputVariants({ size, variant, focusIndicator: true }),
       "h-auto py-2", // Input variant always comes with size, but it does not apply for textarea
+      autoResize && "resize-none overflow-hidden",
       className,
     );
 
@@ -65,7 +108,7 @@ export const InputArea = React.forwardRef<HTMLTextAreaElement, InputAreaProps>(
             render={(controlProps) => (
               <textarea
                 {...controlProps}
-                ref={ref}
+                ref={setTextareaRef}
                 className={textareaClassName}
                 onChange={handleChange}
                 {...inputProps}
@@ -79,7 +122,7 @@ export const InputArea = React.forwardRef<HTMLTextAreaElement, InputAreaProps>(
     // Render bare textarea without Field wrapper
     return (
       <textarea
-        ref={ref}
+        ref={setTextareaRef}
         className={textareaClassName}
         onChange={handleChange}
         {...inputProps}
@@ -114,6 +157,8 @@ export type InputAreaProps = {
   description?: ReactNode;
   /** Error message or validation error object */
   error?: string | { message: ReactNode; match: FieldErrorMatch };
+  /** Automatically resize the textarea based on its content. */
+  autoResize?: boolean;
 
   // Finally, spread the native input props (least important)
 } & Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "size">;
diff --git a/packages/kumo/src/components/input/input.test.tsx b/packages/kumo/src/components/input/input.test.tsx
index 2503cff713..cd4a6f3411 100644
--- a/packages/kumo/src/components/input/input.test.tsx
+++ b/packages/kumo/src/components/input/input.test.tsx
@@ -1,12 +1,13 @@
 import { describe, expect, it, vi } from "vitest";
 import { createRef } from "react";
-import { render, screen } from "@testing-library/react";
+import { fireEvent, render, screen } from "@testing-library/react";
 import {
   Input,
   inputVariants,
   KUMO_INPUT_VARIANTS,
   KUMO_INPUT_DEFAULT_VARIANTS,
 } from "./input";
+import { InputArea } from "./input-area";
 
 describe("Input", () => {
   // Rendering
@@ -148,9 +149,7 @@ describe("Input", () => {
   });
 
   it("renders description without label", () => {
-    render(
-      <Input aria-label="Email" description="Enter your work email" />,
-    );
+    render(<Input aria-label="Email" description="Enter your work email" />);
     expect(screen.getByText("Enter your work email")).toBeTruthy();
   });
 
@@ -228,3 +227,54 @@ describe("Input", () => {
     expect(KUMO_INPUT_DEFAULT_VARIANTS.variant).toBe("default");
   });
 });
+
+describe("InputArea", () => {
+  it("auto-resizes to its scrollHeight when autoResize is true", () => {
+    const scrollHeight = vi
+      .spyOn(HTMLTextAreaElement.prototype, "scrollHeight", "get")
+      .mockReturnValue(80);
+
+    render(
+      <InputArea aria-label="Notes" autoResize defaultValue="Initial value" />,
+    );
+
+    const textarea = screen.getByRole("textbox");
+    expect(textarea.style.height).toBe("80px");
+    expect(textarea.className).toContain("resize-none");
+    expect(textarea.className).toContain("overflow-hidden");
+
+    scrollHeight.mockRestore();
+  });
+
+  it("auto-resizes on change and preserves value callbacks", () => {
+    const scrollHeight = vi
+      .spyOn(HTMLTextAreaElement.prototype, "scrollHeight", "get")
+      .mockReturnValue(96);
+    const onChange = vi.fn();
+    const onValueChange = vi.fn();
+
+    render(
+      <InputArea
+        aria-label="Notes"
+        autoResize
+        onChange={onChange}
+        onValueChange={onValueChange}
+      />,
+    );
+
+    const textarea = screen.getByRole("textbox");
+    fireEvent.change(textarea, { target: { value: "Longer value" } });
+
+    expect(textarea.style.height).toBe("96px");
+    expect(onChange).toHaveBeenCalledOnce();
+    expect(onValueChange).toHaveBeenCalledWith("Longer value");
+
+    scrollHeight.mockRestore();
+  });
+
+  it("forwards ref to the underlying textarea with autoResize", () => {
+    const ref = createRef<HTMLTextAreaElement>();
+    render(<InputArea ref={ref} aria-label="Notes" autoResize />);
+    expect(ref.current).toBeInstanceOf(HTMLTextAreaElement);
+  });
+});

From 94d76e7e4331ac691e45ebc05398cbe5cee101df Mon Sep 17 00:00:00 2001
From: Matt Rothenberg <mattrothenberg@gmail.com>
Date: Fri, 10 Jul 2026 06:56:19 -0400
Subject: [PATCH 2/4] fix(input-area): harden autoResize measurement and add
 maxRows

- No-op entirely when autoResize is off so a user's manual drag-resize
  is never clobbered by value changes; restore inline styles when the
  prop toggles off
- Add maxRows: clamp growth via computed line-height and flip
  overflow-y to auto past the clamp so content stays scrollable
- Account for box-sizing and borders when converting scrollHeight to
  an explicit height
- Re-measure on inline-size changes via ResizeObserver so rewrapped
  content keeps the correct height
- Avoid the React 18 SSR useLayoutEffect warning and honor React 19
  callback-ref cleanups

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../src/components/demos/InputAreaDemo.tsx    |   3 +-
 .../src/pages/components/input-area.mdx       |   3 +-
 .../kumo/src/components/input/input-area.tsx  | 174 +++++++++++++++---
 .../kumo/src/components/input/input.test.tsx  |  59 +++++-
 4 files changed, 207 insertions(+), 32 deletions(-)

diff --git a/packages/kumo-docs-astro/src/components/demos/InputAreaDemo.tsx b/packages/kumo-docs-astro/src/components/demos/InputAreaDemo.tsx
index ce9311d9c7..f66e7d7aae 100644
--- a/packages/kumo-docs-astro/src/components/demos/InputAreaDemo.tsx
+++ b/packages/kumo-docs-astro/src/components/demos/InputAreaDemo.tsx
@@ -88,7 +88,8 @@ export function InputAreaAutoResizeDemo() {
         "Review the configuration changes.\n\nAdd follow-up notes here.\n\n"
       }
       autoResize
-      description="Resizes vertically with content size"
+      maxRows={8}
+      description="Resizes vertically with content size, up to 8 rows"
       rows={2}
     />
   );
diff --git a/packages/kumo-docs-astro/src/pages/components/input-area.mdx b/packages/kumo-docs-astro/src/pages/components/input-area.mdx
index c74839e478..fed7f8310c 100644
--- a/packages/kumo-docs-astro/src/pages/components/input-area.mdx
+++ b/packages/kumo-docs-astro/src/pages/components/input-area.mdx
@@ -147,7 +147,8 @@ export default function Example() {
 
 <p>
   Use `autoResize` to let the textarea grow vertically as users type or paste
-  multi-line content.
+  multi-line content. `rows` sets the minimum height, and the optional
+  `maxRows` caps growth — content beyond the cap scrolls.
 </p>
 <ComponentExample demo="InputAreaAutoResizeDemo">
   <InputAreaAutoResizeDemo client:visible />
diff --git a/packages/kumo/src/components/input/input-area.tsx b/packages/kumo/src/components/input/input-area.tsx
index 4d7e5ad570..ee9e2daca3 100644
--- a/packages/kumo/src/components/input/input-area.tsx
+++ b/packages/kumo/src/components/input/input-area.tsx
@@ -1,6 +1,12 @@
 import { inputVariants } from "./input";
 import { cn } from "../../utils/cn";
-import { useCallback, useLayoutEffect, useRef, type ReactNode } from "react";
+import {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  type ReactNode,
+} from "react";
 import * as React from "react";
 import { Field as FieldBase } from "@base-ui/react/field";
 import {
@@ -9,6 +15,121 @@ import {
   type FieldErrorMatch,
 } from "../field/field";
 
+// useLayoutEffect warns when rendered with react-dom/server (React 18);
+// fall back to useEffect on the server where neither runs anyway.
+const useIsomorphicLayoutEffect =
+  typeof window !== "undefined" ? useLayoutEffect : useEffect;
+
+function parsePx(value: string): number {
+  const parsed = Number.parseFloat(value);
+  return Number.isNaN(parsed) ? 0 : parsed;
+}
+
+/**
+ * Measures the content height of a textarea and applies it as an explicit
+ * height, optionally clamped to `maxRows`. Handles box-sizing/borders and
+ * container width changes (rewrapping).
+ */
+function useTextareaAutoResize({
+  enabled,
+  maxRows,
+}: {
+  enabled: boolean;
+  maxRows?: number;
+}) {
+  const textareaRef = useRef<HTMLTextAreaElement | null>(null);
+  const enabledRef = useRef(enabled);
+  enabledRef.current = enabled;
+  const maxRowsRef = useRef(maxRows);
+  maxRowsRef.current = maxRows;
+
+  const resize = useCallback(() => {
+    const textarea = textareaRef.current;
+    if (!enabledRef.current || !textarea || typeof window === "undefined")
+      return;
+
+    const style = window.getComputedStyle(textarea);
+    const borders =
+      parsePx(style.borderTopWidth) + parsePx(style.borderBottomWidth);
+    const padding =
+      parsePx(style.paddingTop) + parsePx(style.paddingBottom);
+    const isBorderBox = style.boxSizing === "border-box";
+
+    // Collapsing to `auto` lets scrollHeight report the true content height
+    // (needed to shrink); measure-then-write happens within a single layout
+    // pass, before paint.
+    textarea.style.height = "auto";
+    // scrollHeight = content + padding. Convert to the height the current
+    // box-sizing expects: border-box needs borders added, content-box needs
+    // padding removed.
+    let height = isBorderBox
+      ? textarea.scrollHeight + borders
+      : textarea.scrollHeight - padding;
+
+    const currentMaxRows = maxRowsRef.current;
+    if (currentMaxRows && currentMaxRows > 0) {
+      const lineHeight =
+        style.lineHeight === "normal"
+          ? parsePx(style.fontSize) * 1.2
+          : parsePx(style.lineHeight);
+      let maxHeight = lineHeight * currentMaxRows;
+      if (isBorderBox) maxHeight += padding + borders;
+
+      if (height > maxHeight) {
+        height = maxHeight;
+        // Content exceeds the clamp — it must stay scrollable.
+        textarea.style.overflowY = "auto";
+      } else {
+        textarea.style.overflowY = "hidden";
+      }
+    } else {
+      textarea.style.overflowY = "hidden";
+    }
+
+    textarea.style.height = `${height}px`;
+  }, []);
+
+  // Re-measure after every commit while enabled: covers controlled value
+  // changes, size/variant/className changes, and anything else that reflows.
+  // Two extra synchronous layouts per render is cheap for a textarea and
+  // immune to stale-dependency bugs.
+  useIsomorphicLayoutEffect(() => {
+    if (enabled) resize();
+  });
+
+  // Setup/teardown per node while enabled. Restores inline styles when
+  // autoResize turns off or on unmount so the manual resize handle behavior
+  // returns untouched.
+  useIsomorphicLayoutEffect(() => {
+    if (!enabled) return;
+    const textarea = textareaRef.current;
+    if (!textarea) return;
+
+    // Width changes rewrap content and change the required height. Only
+    // react to inline-size changes — our own height writes also fire the
+    // observer and would otherwise cause redundant resize passes.
+    let lastWidth = textarea.clientWidth;
+    const observer =
+      typeof ResizeObserver !== "undefined"
+        ? new ResizeObserver(() => {
+            if (textarea.clientWidth !== lastWidth) {
+              lastWidth = textarea.clientWidth;
+              resize();
+            }
+          })
+        : null;
+    observer?.observe(textarea);
+
+    return () => {
+      observer?.disconnect();
+      textarea.style.height = "";
+      textarea.style.overflowY = "";
+    };
+  }, [enabled, resize]);
+
+  return { textareaRef, resize };
+}
+
 export const InputArea = React.forwardRef<HTMLTextAreaElement, InputAreaProps>(
   (props, ref) => {
     const {
@@ -22,6 +143,7 @@ export const InputArea = React.forwardRef<HTMLTextAreaElement, InputAreaProps>(
       description,
       error,
       autoResize = false,
+      maxRows,
       ...inputProps
     } = props;
 
@@ -40,55 +162,47 @@ export const InputArea = React.forwardRef<HTMLTextAreaElement, InputAreaProps>(
 
     // Extract required from inputProps to pass to Field for label decoration
     const { required } = inputProps;
-    const textareaRef = useRef<HTMLTextAreaElement | null>(null);
-
-    const resizeTextarea = useCallback(
-      (textarea = textareaRef.current) => {
-        if (!textarea) return;
-
-        if (!autoResize) {
-          textarea.style.height = "";
-          return;
-        }
-
-        textarea.style.height = "auto";
-        textarea.style.height = `${textarea.scrollHeight}px`;
-      },
-      [autoResize],
-    );
+    const { textareaRef, resize } = useTextareaAutoResize({
+      enabled: autoResize,
+      maxRows,
+    });
 
+    // Forwarded ref may be a React 19 callback ref returning a cleanup
+    // function — honor it instead of calling ref(null) on detach.
+    const refCleanup = useRef<(() => void) | void>(undefined);
     const setTextareaRef = useCallback(
       (node: HTMLTextAreaElement | null) => {
         textareaRef.current = node;
 
         if (typeof ref === "function") {
-          ref(node);
+          if (node) {
+            refCleanup.current = ref(node) as (() => void) | void;
+          } else if (refCleanup.current) {
+            refCleanup.current();
+            refCleanup.current = undefined;
+          } else {
+            ref(null);
+          }
         } else if (ref) {
           ref.current = node;
         }
-
-        resizeTextarea(node);
       },
-      [ref, resizeTextarea],
+      [ref, textareaRef],
     );
 
-    useLayoutEffect(() => {
-      resizeTextarea();
-    }, [resizeTextarea, inputProps.value, inputProps.defaultValue]);
-
     const handleChange = useCallback(
       (event: React.ChangeEvent<HTMLTextAreaElement>) => {
         onChange?.(event);
         onValueChange?.(event.target.value);
-        resizeTextarea(event.currentTarget);
+        resize();
       },
-      [onChange, onValueChange, resizeTextarea],
+      [onChange, onValueChange, resize],
     );
 
     const textareaClassName = cn(
       inputVariants({ size, variant, focusIndicator: true }),
       "h-auto py-2", // Input variant always comes with size, but it does not apply for textarea
-      autoResize && "resize-none overflow-hidden",
+      autoResize && "resize-none",
       className,
     );
 
@@ -157,8 +271,10 @@ export type InputAreaProps = {
   description?: ReactNode;
   /** Error message or validation error object */
   error?: string | { message: ReactNode; match: FieldErrorMatch };
-  /** Automatically resize the textarea based on its content. */
+  /** Automatically resize the textarea based on its content. The `rows` prop acts as the minimum height. */
   autoResize?: boolean;
+  /** Maximum number of rows to grow to when `autoResize` is enabled; content beyond this scrolls. */
+  maxRows?: number;
 
   // Finally, spread the native input props (least important)
 } & Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "size">;
diff --git a/packages/kumo/src/components/input/input.test.tsx b/packages/kumo/src/components/input/input.test.tsx
index cd4a6f3411..1d7cb2e6f1 100644
--- a/packages/kumo/src/components/input/input.test.tsx
+++ b/packages/kumo/src/components/input/input.test.tsx
@@ -241,7 +241,64 @@ describe("InputArea", () => {
     const textarea = screen.getByRole("textbox");
     expect(textarea.style.height).toBe("80px");
     expect(textarea.className).toContain("resize-none");
-    expect(textarea.className).toContain("overflow-hidden");
+    expect(textarea.style.overflowY).toBe("hidden");
+
+    scrollHeight.mockRestore();
+  });
+
+  it("does not touch inline height when autoResize is false", () => {
+    const { rerender } = render(
+      <InputArea aria-label="Notes" value="one" onChange={() => {}} />,
+    );
+
+    const textarea = screen.getByRole("textbox") as HTMLTextAreaElement;
+    // Simulate the user dragging the native resize handle
+    textarea.style.height = "240px";
+
+    rerender(
+      <InputArea aria-label="Notes" value="one two" onChange={() => {}} />,
+    );
+    fireEvent.change(textarea, { target: { value: "one two three" } });
+
+    expect(textarea.style.height).toBe("240px");
+  });
+
+  it("clamps to maxRows and becomes scrollable past the clamp", () => {
+    const scrollHeight = vi
+      .spyOn(HTMLTextAreaElement.prototype, "scrollHeight", "get")
+      .mockReturnValue(200);
+
+    render(
+      <InputArea
+        aria-label="Notes"
+        autoResize
+        maxRows={5}
+        style={{ lineHeight: "20px" }}
+        defaultValue="Lots of content"
+      />,
+    );
+
+    const textarea = screen.getByRole("textbox");
+    expect(textarea.style.height).toBe("100px");
+    expect(textarea.style.overflowY).toBe("auto");
+
+    scrollHeight.mockRestore();
+  });
+
+  it("restores inline styles when autoResize is turned off", () => {
+    const scrollHeight = vi
+      .spyOn(HTMLTextAreaElement.prototype, "scrollHeight", "get")
+      .mockReturnValue(80);
+
+    const { rerender } = render(
+      <InputArea aria-label="Notes" autoResize defaultValue="Initial" />,
+    );
+    const textarea = screen.getByRole("textbox");
+    expect(textarea.style.height).toBe("80px");
+
+    rerender(<InputArea aria-label="Notes" defaultValue="Initial" />);
+    expect(textarea.style.height).toBe("");
+    expect(textarea.style.overflowY).toBe("");
 
     scrollHeight.mockRestore();
   });

From 211664ecc24f63ecd5cb33f4dd0e6a28d03a0924 Mon Sep 17 00:00:00 2001
From: Matt Rothenberg <mattrothenberg@gmail.com>
Date: Fri, 10 Jul 2026 07:08:09 -0400
Subject: [PATCH 3/4] fix(input-area): address review feedback on resize perf
 and line-height parsing

- Skip the change-handler resize for controlled inputs; the post-render
  layout effect already re-measures, so this halves forced layouts per
  keystroke
- Treat a unitless computed line-height (e.g. "1.5") as a font-size
  multiplier instead of pixels so the maxRows clamp stays correct
- Add tests for unitless line-height and unmount style cleanup

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../kumo/src/components/input/input-area.tsx  | 21 +++++++---
 .../kumo/src/components/input/input.test.tsx  | 41 +++++++++++++++++++
 2 files changed, 57 insertions(+), 5 deletions(-)

diff --git a/packages/kumo/src/components/input/input-area.tsx b/packages/kumo/src/components/input/input-area.tsx
index ee9e2daca3..c6b918c779 100644
--- a/packages/kumo/src/components/input/input-area.tsx
+++ b/packages/kumo/src/components/input/input-area.tsx
@@ -68,10 +68,16 @@ function useTextareaAutoResize({
 
     const currentMaxRows = maxRowsRef.current;
     if (currentMaxRows && currentMaxRows > 0) {
+      // Computed line-height is normally a px value, but some environments
+      // (e.g. jsdom) can return "normal" or a unitless multiplier like "1.5".
+      const fontSize = parsePx(style.fontSize);
+      const rawLineHeight = style.lineHeight;
       const lineHeight =
-        style.lineHeight === "normal"
-          ? parsePx(style.fontSize) * 1.2
-          : parsePx(style.lineHeight);
+        rawLineHeight === "normal" || rawLineHeight === ""
+          ? fontSize * 1.2
+          : rawLineHeight.endsWith("px")
+            ? parsePx(rawLineHeight)
+            : parsePx(rawLineHeight) * fontSize;
       let maxHeight = lineHeight * currentMaxRows;
       if (isBorderBox) maxHeight += padding + borders;
 
@@ -190,13 +196,18 @@ export const InputArea = React.forwardRef<HTMLTextAreaElement, InputAreaProps>(
       [ref, textareaRef],
     );
 
+    // Controlled inputs re-render on every keystroke, so the post-render
+    // layout effect already re-measures; resizing here too would force a
+    // second synchronous layout. Uncontrolled inputs don't re-render, so the
+    // change handler is their only resize trigger.
+    const isControlled = inputProps.value !== undefined;
     const handleChange = useCallback(
       (event: React.ChangeEvent<HTMLTextAreaElement>) => {
         onChange?.(event);
         onValueChange?.(event.target.value);
-        resize();
+        if (!isControlled) resize();
       },
-      [onChange, onValueChange, resize],
+      [onChange, onValueChange, resize, isControlled],
     );
 
     const textareaClassName = cn(
diff --git a/packages/kumo/src/components/input/input.test.tsx b/packages/kumo/src/components/input/input.test.tsx
index 1d7cb2e6f1..792ac102a6 100644
--- a/packages/kumo/src/components/input/input.test.tsx
+++ b/packages/kumo/src/components/input/input.test.tsx
@@ -285,6 +285,47 @@ describe("InputArea", () => {
     scrollHeight.mockRestore();
   });
 
+  it("treats a unitless line-height as a font-size multiplier for maxRows", () => {
+    const scrollHeight = vi
+      .spyOn(HTMLTextAreaElement.prototype, "scrollHeight", "get")
+      .mockReturnValue(500);
+
+    render(
+      <InputArea
+        aria-label="Notes"
+        autoResize
+        maxRows={4}
+        style={{ lineHeight: "1.5", fontSize: "16px" }}
+        defaultValue="Lots of content"
+      />,
+    );
+
+    // 1.5 * 16px * 4 rows = 96px, not 1.5px * 4 rows
+    const textarea = screen.getByRole("textbox");
+    expect(textarea.style.height).toBe("96px");
+    expect(textarea.style.overflowY).toBe("auto");
+
+    scrollHeight.mockRestore();
+  });
+
+  it("clears inline styles on unmount", () => {
+    const scrollHeight = vi
+      .spyOn(HTMLTextAreaElement.prototype, "scrollHeight", "get")
+      .mockReturnValue(80);
+
+    const { unmount } = render(
+      <InputArea aria-label="Notes" autoResize defaultValue="Initial" />,
+    );
+    const textarea = screen.getByRole("textbox") as HTMLTextAreaElement;
+    expect(textarea.style.height).toBe("80px");
+
+    unmount();
+    expect(textarea.style.height).toBe("");
+    expect(textarea.style.overflowY).toBe("");
+
+    scrollHeight.mockRestore();
+  });
+
   it("restores inline styles when autoResize is turned off", () => {
     const scrollHeight = vi
       .spyOn(HTMLTextAreaElement.prototype, "scrollHeight", "get")

From d26c469012ba642013a18711d350720b2f184b7b Mon Sep 17 00:00:00 2001
From: Matt Rothenberg <mrothenberg@cloudflare.com>
Date: Fri, 10 Jul 2026 11:46:20 -0400
Subject: [PATCH 4/4] feat(input-area): refine auto resize behavior

---
 .../src/components/demos/InputAreaDemo.tsx    |  2 +-
 .../src/pages/components/input-area.mdx       |  2 +-
 .../kumo/src/components/input/input-area.tsx  | 37 ++++++++++++++-----
 .../kumo/src/components/input/input.test.tsx  | 25 +++++++++++++
 4 files changed, 55 insertions(+), 11 deletions(-)

diff --git a/packages/kumo-docs-astro/src/components/demos/InputAreaDemo.tsx b/packages/kumo-docs-astro/src/components/demos/InputAreaDemo.tsx
index f66e7d7aae..b4f9696153 100644
--- a/packages/kumo-docs-astro/src/components/demos/InputAreaDemo.tsx
+++ b/packages/kumo-docs-astro/src/components/demos/InputAreaDemo.tsx
@@ -88,9 +88,9 @@ export function InputAreaAutoResizeDemo() {
         "Review the configuration changes.\n\nAdd follow-up notes here.\n\n"
       }
       autoResize
+      minRows={2}
       maxRows={8}
       description="Resizes vertically with content size, up to 8 rows"
-      rows={2}
     />
   );
 }
diff --git a/packages/kumo-docs-astro/src/pages/components/input-area.mdx b/packages/kumo-docs-astro/src/pages/components/input-area.mdx
index fed7f8310c..8c1eb3a2c8 100644
--- a/packages/kumo-docs-astro/src/pages/components/input-area.mdx
+++ b/packages/kumo-docs-astro/src/pages/components/input-area.mdx
@@ -147,7 +147,7 @@ export default function Example() {
 
 <p>
   Use `autoResize` to let the textarea grow vertically as users type or paste
-  multi-line content. `rows` sets the minimum height, and the optional
+  multi-line content. `minRows` sets the minimum height, and the optional
   `maxRows` caps growth — content beyond the cap scrolls.
 </p>
 <ComponentExample demo="InputAreaAutoResizeDemo">
diff --git a/packages/kumo/src/components/input/input-area.tsx b/packages/kumo/src/components/input/input-area.tsx
index c6b918c779..1ff1e78b60 100644
--- a/packages/kumo/src/components/input/input-area.tsx
+++ b/packages/kumo/src/components/input/input-area.tsx
@@ -32,14 +32,18 @@ function parsePx(value: string): number {
  */
 function useTextareaAutoResize({
   enabled,
+  minRows,
   maxRows,
 }: {
   enabled: boolean;
+  minRows: number;
   maxRows?: number;
 }) {
   const textareaRef = useRef<HTMLTextAreaElement | null>(null);
   const enabledRef = useRef(enabled);
   enabledRef.current = enabled;
+  const minRowsRef = useRef(minRows);
+  minRowsRef.current = minRows;
   const maxRowsRef = useRef(maxRows);
   maxRowsRef.current = maxRows;
 
@@ -66,8 +70,9 @@ function useTextareaAutoResize({
       ? textarea.scrollHeight + borders
       : textarea.scrollHeight - padding;
 
+    const currentMinRows = minRowsRef.current;
     const currentMaxRows = maxRowsRef.current;
-    if (currentMaxRows && currentMaxRows > 0) {
+    if (currentMinRows > 0 || (currentMaxRows && currentMaxRows > 0)) {
       // Computed line-height is normally a px value, but some environments
       // (e.g. jsdom) can return "normal" or a unitless multiplier like "1.5".
       const fontSize = parsePx(style.fontSize);
@@ -78,13 +83,19 @@ function useTextareaAutoResize({
           : rawLineHeight.endsWith("px")
             ? parsePx(rawLineHeight)
             : parsePx(rawLineHeight) * fontSize;
-      let maxHeight = lineHeight * currentMaxRows;
-      if (isBorderBox) maxHeight += padding + borders;
+      const boxSpacing = isBorderBox ? padding + borders : 0;
+      const minHeight = lineHeight * currentMinRows + boxSpacing;
+      height = Math.max(height, minHeight);
 
-      if (height > maxHeight) {
-        height = maxHeight;
-        // Content exceeds the clamp — it must stay scrollable.
-        textarea.style.overflowY = "auto";
+      if (currentMaxRows && currentMaxRows > 0) {
+        const maxHeight = lineHeight * currentMaxRows + boxSpacing;
+        if (height > maxHeight) {
+          height = maxHeight;
+          // Content exceeds the clamp — it must stay scrollable.
+          textarea.style.overflowY = "auto";
+        } else {
+          textarea.style.overflowY = "hidden";
+        }
       } else {
         textarea.style.overflowY = "hidden";
       }
@@ -149,7 +160,9 @@ export const InputArea = React.forwardRef<HTMLTextAreaElement, InputAreaProps>(
       description,
       error,
       autoResize = false,
+      minRows = 1,
       maxRows,
+      rows,
       ...inputProps
     } = props;
 
@@ -170,6 +183,7 @@ export const InputArea = React.forwardRef<HTMLTextAreaElement, InputAreaProps>(
     const { required } = inputProps;
     const { textareaRef, resize } = useTextareaAutoResize({
       enabled: autoResize,
+      minRows,
       maxRows,
     });
 
@@ -213,7 +227,8 @@ export const InputArea = React.forwardRef<HTMLTextAreaElement, InputAreaProps>(
     const textareaClassName = cn(
       inputVariants({ size, variant, focusIndicator: true }),
       "h-auto py-2", // Input variant always comes with size, but it does not apply for textarea
-      autoResize && "resize-none",
+      autoResize &&
+        "w-full field-sizing-content resize-none scroll-pb-2 [scrollbar-color:var(--color-kumo-line)_transparent] [scrollbar-width:thin] [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar]:bg-transparent [&::-webkit-scrollbar-track]:my-2 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-kumo-line [&::-webkit-scrollbar-corner]:bg-transparent",
       className,
     );
 
@@ -236,6 +251,7 @@ export const InputArea = React.forwardRef<HTMLTextAreaElement, InputAreaProps>(
                 ref={setTextareaRef}
                 className={textareaClassName}
                 onChange={handleChange}
+                rows={autoResize ? minRows : rows}
                 {...inputProps}
               />
             )}
@@ -250,6 +266,7 @@ export const InputArea = React.forwardRef<HTMLTextAreaElement, InputAreaProps>(
         ref={setTextareaRef}
         className={textareaClassName}
         onChange={handleChange}
+        rows={autoResize ? minRows : rows}
         {...inputProps}
       />
     );
@@ -282,8 +299,10 @@ export type InputAreaProps = {
   description?: ReactNode;
   /** Error message or validation error object */
   error?: string | { message: ReactNode; match: FieldErrorMatch };
-  /** Automatically resize the textarea based on its content. The `rows` prop acts as the minimum height. */
+  /** Automatically resize the textarea based on its content. */
   autoResize?: boolean;
+  /** Minimum number of rows to display when `autoResize` is enabled. @default 1 */
+  minRows?: number;
   /** Maximum number of rows to grow to when `autoResize` is enabled; content beyond this scrolls. */
   maxRows?: number;
 
diff --git a/packages/kumo/src/components/input/input.test.tsx b/packages/kumo/src/components/input/input.test.tsx
index 792ac102a6..302a967e77 100644
--- a/packages/kumo/src/components/input/input.test.tsx
+++ b/packages/kumo/src/components/input/input.test.tsx
@@ -241,6 +241,7 @@ describe("InputArea", () => {
     const textarea = screen.getByRole("textbox");
     expect(textarea.style.height).toBe("80px");
     expect(textarea.className).toContain("resize-none");
+    expect(textarea.className).toContain("field-sizing-content");
     expect(textarea.style.overflowY).toBe("hidden");
 
     scrollHeight.mockRestore();
@@ -261,6 +262,8 @@ describe("InputArea", () => {
     fireEvent.change(textarea, { target: { value: "one two three" } });
 
     expect(textarea.style.height).toBe("240px");
+    expect(textarea.className).not.toContain("field-sizing-content");
+    expect(textarea.className).not.toContain("[scrollbar-width:thin]");
   });
 
   it("clamps to maxRows and becomes scrollable past the clamp", () => {
@@ -285,6 +288,28 @@ describe("InputArea", () => {
     scrollHeight.mockRestore();
   });
 
+  it("clamps to minRows when content is shorter", () => {
+    const scrollHeight = vi
+      .spyOn(HTMLTextAreaElement.prototype, "scrollHeight", "get")
+      .mockReturnValue(20);
+
+    render(
+      <InputArea
+        aria-label="Notes"
+        autoResize
+        minRows={3}
+        style={{ lineHeight: "20px" }}
+      />,
+    );
+
+    const textarea = screen.getByRole("textbox");
+    expect(textarea.getAttribute("rows")).toBe("3");
+    expect(textarea.style.height).toBe("60px");
+    expect(textarea.style.overflowY).toBe("hidden");
+
+    scrollHeight.mockRestore();
+  });
+
   it("treats a unitless line-height as a font-size multiplier for maxRows", () => {
     const scrollHeight = vi
       .spyOn(HTMLTextAreaElement.prototype, "scrollHeight", "get")