diff --git a/app/client/packages/design-system/widgets/src/components/Input/src/styles.module.css b/app/client/packages/design-system/widgets/src/components/Input/src/styles.module.css
index 15233295df..8260e1c651 100644
--- a/app/client/packages/design-system/widgets/src/components/Input/src/styles.module.css
+++ b/app/client/packages/design-system/widgets/src/components/Input/src/styles.module.css
@@ -51,6 +51,9 @@
   align-items: flex-start;
   resize: none;
   font-family: inherit;
+  max-height: var(--max-height);
+  padding-block: 0;
+  margin-block: var(--inner-spacing-1);
 }
 
 .input:autofill,
diff --git a/app/client/packages/design-system/widgets/src/components/TextArea/src/TextArea.tsx b/app/client/packages/design-system/widgets/src/components/TextArea/src/TextArea.tsx
index d004f2d797..4b009405a4 100644
--- a/app/client/packages/design-system/widgets/src/components/TextArea/src/TextArea.tsx
+++ b/app/client/packages/design-system/widgets/src/components/TextArea/src/TextArea.tsx
@@ -30,6 +30,7 @@ export function TextArea(props: TextAreaProps) {
     isReadOnly,
     isRequired,
     label,
+    maxRows,
     onChange,
     rows = 3,
     size,
@@ -44,9 +45,7 @@ export function TextArea(props: TextAreaProps) {
     () => {},
   );
 
-  const [textFieldHeight, setTextFieldHeightHeight] = useState<number | null>(
-    null,
-  );
+  const [textFieldHeight, setTextFieldHeight] = useState<number | null>(null);
 
   const onHeightChange = useCallback(() => {
     // Quiet textareas always grow based on their text content.
@@ -72,7 +71,7 @@ export function TextArea(props: TextAreaProps) {
       const paddingTop = parseFloat(computedStyle.paddingTop);
       const paddingBottom = parseFloat(computedStyle.paddingBottom);
 
-      setTextFieldHeightHeight(height + paddingTop + paddingBottom);
+      setTextFieldHeight(height + paddingTop + paddingBottom);
 
       input.style.height = `${
         // subtract comptued padding and border to get the actual content height
@@ -113,6 +112,9 @@ export function TextArea(props: TextAreaProps) {
     "--input-height": Boolean(textFieldHeight)
       ? `${textFieldHeight}px`
       : "auto",
+    "--max-height": Boolean(maxRows)
+      ? `calc(${maxRows} * var(--body-line-height))`
+      : "none",
   } as React.CSSProperties;
 
   return (
diff --git a/app/client/packages/design-system/widgets/src/components/TextArea/src/types.ts b/app/client/packages/design-system/widgets/src/components/TextArea/src/types.ts
index 613d22e475..2fe06e5c77 100644
--- a/app/client/packages/design-system/widgets/src/components/TextArea/src/types.ts
+++ b/app/client/packages/design-system/widgets/src/components/TextArea/src/types.ts
@@ -11,4 +11,5 @@ export interface TextAreaProps extends AriaTextFieldProps, FieldProps {
   fieldClassName?: string;
   inputClassName?: string;
   size?: Exclude<keyof typeof SIZES, "xSmall">;
+  maxRows?: number;
 }
diff --git a/app/client/packages/design-system/widgets/src/components/TextArea/stories/TextArea.stories.tsx b/app/client/packages/design-system/widgets/src/components/TextArea/stories/TextArea.stories.tsx
index 7cbd9126b4..d161257292 100644
--- a/app/client/packages/design-system/widgets/src/components/TextArea/stories/TextArea.stories.tsx
+++ b/app/client/packages/design-system/widgets/src/components/TextArea/stories/TextArea.stories.tsx
@@ -72,3 +72,9 @@ export const Validation: Story = {
     </Form>
   ),
 };
+
+export const MaxHeight: Story = {
+  args: {
+    maxRows: 8,
+  },
+};