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('', () => {
expect(textInput).toHaveClass('a-text-input');
expect(textInput).not.toHaveClass('a-text-input--success');
});
+
+ it('restricts resizing to the vertical axis', () => {
+ render();
+
+ 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,
): ReactElement => {
+ const { style, ...restProperties } = properties;
+
const onChangeHandler: ChangeEventHandler = (
event,
) => {
@@ -62,7 +64,8 @@ export const TextArea = forwardRef(
disabled={isDisabled}
data-testid='textAreaInput'
ref={reference}
- {...properties}
+ style={{ ...style, resize: 'vertical' }}
+ {...restProperties}
/>
);