diff --git a/packages/text-area/src/TextArea/TextArea.spec.tsx b/packages/text-area/src/TextArea/TextArea.spec.tsx
index 4f981577dc..1c37c9b0df 100644
--- a/packages/text-area/src/TextArea/TextArea.spec.tsx
+++ b/packages/text-area/src/TextArea/TextArea.spec.tsx
@@ -190,6 +190,11 @@ describe('packages/text-area', () => {
       <TextArea label="Some label" />;
       <TextArea aria-labelledby="some-id" />;
     });
+
+    test('TextArea takes a ref for a HTMLTextAreaElement', () => {
+      const ref = React.createRef<HTMLTextAreaElement>();
+      render(<TextArea label="Some label" ref={ref} />);
+    });
   });
   /* eslint-enable jest/no-disabled-tests */
 });
diff --git a/packages/text-input/src/TextInput/TextInput.spec.tsx b/packages/text-input/src/TextInput/TextInput.spec.tsx
index 09a219f840..4d1114bdbe 100644
--- a/packages/text-input/src/TextInput/TextInput.spec.tsx
+++ b/packages/text-input/src/TextInput/TextInput.spec.tsx
@@ -245,6 +245,11 @@ describe('packages/text-input', () => {
       <TextInput type="search" label="some label" />;
       <TextInput type="search" aria-labelledby="some label" />;
     });
+
+    test('TextInput takes a ref for a HTMLInputElement', () => {
+      const ref = React.createRef<HTMLInputElement>();
+      render(<TextInput label="some label" ref={ref} />);
+    });
   });
   /* eslint-enable jest/no-disabled-tests */
 });
diff --git a/packages/text-input/src/TextInput/TextInput.tsx b/packages/text-input/src/TextInput/TextInput.tsx
index 82b17e0cb1..082674d0e8 100644
--- a/packages/text-input/src/TextInput/TextInput.tsx
+++ b/packages/text-input/src/TextInput/TextInput.tsx
@@ -12,11 +12,12 @@ import { textInputStyle } from './TextInput.styles';
 import {
   SizeVariant,
   State,
-  TextInputComponentType,
   TextInputProps,
   TextInputType,
 } from './TextInput.types';
 
+type TextInput = React.ForwardRefExoticComponent<TextInputProps>;
+
 /**
  *
  * ```
@@ -39,7 +40,7 @@ import {
  * @param props.sizeVariant determines the size of the text and the height of the input.
  */
 
-const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
+const TextInput: TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
   (
     {
       label,
@@ -182,7 +183,7 @@ const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
       </FormField>
     );
   },
-) as TextInputComponentType;
+);
 
 TextInput.displayName = 'TextInput';
 
diff --git a/packages/text-input/src/TextInput/TextInput.types.ts b/packages/text-input/src/TextInput/TextInput.types.ts
index 8f253a4539..7a011e8b08 100644
--- a/packages/text-input/src/TextInput/TextInput.types.ts
+++ b/packages/text-input/src/TextInput/TextInput.types.ts
@@ -70,7 +70,7 @@ interface TextInputTypeProp {
   type?: TextInputType;
 }
 export interface BaseTextInputProps
-  extends Omit<React.ComponentPropsWithoutRef<'input'>, AriaLabels>,
+  extends Omit<React.ComponentPropsWithRef<'input'>, AriaLabels>,
     DarkModeProps,
     LgIdProps {
   /**
@@ -159,6 +159,3 @@ export type TextInputProps = Either<
   BaseTextInputProps & AriaLabelProps & TextInputTypeProp,
   AriaLabels
 >;
-
-export type TextInputComponentType =
-  React.ForwardRefExoticComponent<TextInputProps>;