From 2aca352ac26129828813b85521e28766d59600fa Mon Sep 17 00:00:00 2001
From: Arpit Jain <arpitjain099@gmail.com>
Date: Thu, 18 Jun 2026 10:28:10 +0900
Subject: [PATCH 1/3] Restrict TextArea resizing to vertical axis

Signed-off-by: Arpit Jain <arpitjain099@gmail.com>
---
 src/components/TextInput/text-area.test.tsx | 7 +++++++
 src/components/TextInput/text-area.tsx      | 5 ++++-
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/components/TextInput/text-area.test.tsx b/src/components/TextInput/text-area.test.tsx
index 66d5c390a1..b2e4c1f280 100644
--- a/src/components/TextInput/text-area.test.tsx
+++ b/src/components/TextInput/text-area.test.tsx
@@ -47,4 +47,11 @@ describe('<TextArea />', () => {
     expect(textInput).toHaveClass('a-text-input');
     expect(textInput).not.toHaveClass('a-text-input--success');
   });
+
+  it('restricts resizing to the vertical axis', () => {
+    render(<TextArea id='enabled' />);
+
+    const textArea = screen.getByTestId('textAreaInput');
+    expect(textArea).toHaveStyle({ resize: 'vertical' });
+  });
 });
diff --git a/src/components/TextInput/text-area.tsx b/src/components/TextInput/text-area.tsx
index 445d1ba896..07fb6051f3 100644
--- a/src/components/TextInput/text-area.tsx
+++ b/src/components/TextInput/text-area.tsx
@@ -38,6 +38,8 @@ export const TextArea = forwardRef(
     }: JSX.IntrinsicElements['textarea'] & TextAreaType,
     reference: Ref<HTMLTextAreaElement>,
   ): ReactElement => {
+    const { style, ...restProperties } = properties;
+
     const onChangeHandler: ChangeEventHandler<HTMLTextAreaElement> = (
       event,
     ) => {
@@ -62,7 +64,8 @@ export const TextArea = forwardRef(
           disabled={isDisabled}
           data-testid='textAreaInput'
           ref={reference}
-          {...properties}
+          style={{ ...style, resize: 'vertical' }}
+          {...restProperties}
         />
       </div>
     );

From adb96acbd7d35badbfaaf350821fbc2fd2bc0a1e Mon Sep 17 00:00:00 2001
From: Richard Dinh <1038306+flacoman91@users.noreply.github.com>
Date: Thu, 18 Jun 2026 06:54:53 -0700
Subject: [PATCH 2/3] updating styles for input full-width

---
 src/components/TextInput/cfpb-text-input.scss |  2 +
 src/components/TextInput/text-area.test.tsx   |  8 ++++
 src/components/TextInput/text-area.tsx        | 44 +++++++++++--------
 src/components/TextInput/text-input.tsx       | 23 ++++------
 4 files changed, 44 insertions(+), 33 deletions(-)
 create mode 100644 src/components/TextInput/cfpb-text-input.scss

diff --git a/src/components/TextInput/cfpb-text-input.scss b/src/components/TextInput/cfpb-text-input.scss
new file mode 100644
index 0000000000..74c0214b62
--- /dev/null
+++ b/src/components/TextInput/cfpb-text-input.scss
@@ -0,0 +1,2 @@
+@use '@cfpb/cfpb-design-system/src/components/cfpb-forms/form-field';
+@use '@cfpb/cfpb-design-system/src/components/cfpb-forms/text-input';
diff --git a/src/components/TextInput/text-area.test.tsx b/src/components/TextInput/text-area.test.tsx
index b2e4c1f280..0bece231ae 100644
--- a/src/components/TextInput/text-area.test.tsx
+++ b/src/components/TextInput/text-area.test.tsx
@@ -28,6 +28,14 @@ describe('<TextArea />', () => {
 
     const textInput = screen.getByTestId('textAreaInput');
     expect(textInput).toHaveClass('a-text-input--full');
+    expect(textInput.parentElement).toHaveClass('m-form-field');
+  });
+
+  it('does not wrap in m-form-field by default', () => {
+    render(<TextArea id='enabled' />);
+
+    const textArea = screen.getByTestId('textAreaInput');
+    expect(textArea.parentElement).not.toHaveClass('m-form-field');
   });
 
   it('applies validation status modifiers', () => {
diff --git a/src/components/TextInput/text-area.tsx b/src/components/TextInput/text-area.tsx
index 07fb6051f3..35149539eb 100644
--- a/src/components/TextInput/text-area.tsx
+++ b/src/components/TextInput/text-area.tsx
@@ -7,6 +7,7 @@ import {
   type Ref,
 } from 'react';
 import { noOp as onNoOp } from '../../utils/no-op';
+import './cfpb-text-input.scss';
 import {
   getTextInputStatusClass,
   type TextInputStatusType,
@@ -28,7 +29,7 @@ export const TextArea = forwardRef(
   (
     {
       id,
-      className = '',
+      className,
       status,
       placeholder = 'Placeholder text',
       isFullWidth = false,
@@ -49,25 +50,32 @@ export const TextArea = forwardRef(
 
     const classes = [
       'a-text-input',
+      className,
       getTextInputStatusClass(status),
-      isFullWidth ? 'a-text-input--full' : '',
-      className || '',
-    ].filter((x) => x.length);
+    ];
 
-    return (
-      <div className='m-form-field'>
-        <textarea
-          className={classNames(classes)}
-          id={id}
-          placeholder={placeholder}
-          onChange={onChangeHandler}
-          disabled={isDisabled}
-          data-testid='textAreaInput'
-          ref={reference}
-          style={{ ...style, resize: 'vertical' }}
-          {...restProperties}
-        />
-      </div>
+    if (isFullWidth) {
+      classes.push('a-text-input--full');
+    }
+
+    const textarea = (
+      <textarea
+        className={classNames(classes)}
+        id={id}
+        placeholder={placeholder}
+        onChange={onChangeHandler}
+        disabled={isDisabled}
+        data-testid='textAreaInput'
+        ref={reference}
+        style={{ ...style, resize: 'vertical' }}
+        {...restProperties}
+      />
+    );
+
+    return isFullWidth ? (
+      <div className='m-form-field'>{textarea}</div>
+    ) : (
+      textarea
     );
   },
 );
diff --git a/src/components/TextInput/text-input.tsx b/src/components/TextInput/text-input.tsx
index a17a8fedc5..90686c79d7 100644
--- a/src/components/TextInput/text-input.tsx
+++ b/src/components/TextInput/text-input.tsx
@@ -5,6 +5,7 @@ import {
   type ComponentPropsWithoutRef,
   type ReactNode,
 } from 'react';
+import './cfpb-text-input.scss';
 import type { TextInputStatusType } from './text-input-status';
 import { getTextInputStatusClass } from './text-input-status';
 
@@ -65,23 +66,9 @@ export const TextInput = forwardRef<HTMLInputElement, TextInputProperties>(
 
     if (isFullWidth) {
       classes.push('a-text-input--full');
-      return (
-        <div className='m-form-field'>
-          <input
-            data-testid='textInput'
-            className={classnames(classes)}
-            disabled={isDisabled}
-            id={id}
-            name={name}
-            type={type}
-            ref={reference}
-            {...otherInputProperties}
-          />
-        </div>
-      );
     }
 
-    return (
+    const input = (
       <input
         data-testid='textInput'
         className={classnames(classes)}
@@ -93,6 +80,12 @@ export const TextInput = forwardRef<HTMLInputElement, TextInputProperties>(
         {...otherInputProperties}
       />
     );
+
+    return isFullWidth ? (
+      <div className='m-form-field'>{input}</div>
+    ) : (
+      input
+    );
   },
 );
 

From b220f8e441d3b4d0ebd99f30628791b7202b82a7 Mon Sep 17 00:00:00 2001
From: Richard Dinh <1038306+flacoman91@users.noreply.github.com>
Date: Thu, 18 Jun 2026 07:55:41 -0700
Subject: [PATCH 3/3] linting nags

---
 src/components/TextInput/text-area.test.tsx | 6 +++---
 src/components/TextInput/text-area.tsx      | 4 +++-
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/components/TextInput/text-area.test.tsx b/src/components/TextInput/text-area.test.tsx
index 0bece231ae..b8f5e2f9a4 100644
--- a/src/components/TextInput/text-area.test.tsx
+++ b/src/components/TextInput/text-area.test.tsx
@@ -28,14 +28,14 @@ describe('<TextArea />', () => {
 
     const textInput = screen.getByTestId('textAreaInput');
     expect(textInput).toHaveClass('a-text-input--full');
-    expect(textInput.parentElement).toHaveClass('m-form-field');
+    expect(screen.getByTestId('text-area-field')).toContainElement(textInput);
   });
 
   it('does not wrap in m-form-field by default', () => {
     render(<TextArea id='enabled' />);
 
-    const textArea = screen.getByTestId('textAreaInput');
-    expect(textArea.parentElement).not.toHaveClass('m-form-field');
+    expect(screen.queryByTestId('text-area-field')).not.toBeInTheDocument();
+    expect(screen.getByTestId('textAreaInput')).toBeInTheDocument();
   });
 
   it('applies validation status modifiers', () => {
diff --git a/src/components/TextInput/text-area.tsx b/src/components/TextInput/text-area.tsx
index 35149539eb..5e24c50b92 100644
--- a/src/components/TextInput/text-area.tsx
+++ b/src/components/TextInput/text-area.tsx
@@ -73,7 +73,9 @@ export const TextArea = forwardRef(
     );
 
     return isFullWidth ? (
-      <div className='m-form-field'>{textarea}</div>
+      <div className='m-form-field' data-testid='text-area-field'>
+        {textarea}
+      </div>
     ) : (
       textarea
     );