diff --git a/packages/components/src/Input/BaseInput.tsx b/packages/components/src/Input/BaseInput.tsx
index 2ab34c963..d81825f9d 100644
--- a/packages/components/src/Input/BaseInput.tsx
+++ b/packages/components/src/Input/BaseInput.tsx
@@ -9,8 +9,8 @@ import {
   useRef,
   useState
 } from 'react';
-import { ElementTypeProp } from 'src/utils/types';
 
+import { ElementTypeProp } from '../utils/types';
 import { Field, FieldProps, useFieldProps } from '../Field';
 import { HelperTextProps } from '../HelperText';
 import { LabelProps } from '../Label';
diff --git a/packages/components/src/Input/Input.tsx b/packages/components/src/Input/Input.tsx
index 6e98e54dd..68664fde5 100644
--- a/packages/components/src/Input/Input.tsx
+++ b/packages/components/src/Input/Input.tsx
@@ -12,14 +12,19 @@ type Props = {
   onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
 };
 
-type InheritAttrs = Omit<BaseInputProps, keyof Props | 'errorMessageProps' | 'descriptionProps' | 'inputProps'>;
+type InheritAttrs = Omit<
+  BaseInputProps,
+  keyof Props | 'errorMessageProps' | 'descriptionProps' | 'inputProps' | 'elementType'
+>;
 
 type AriaAttrs = Omit<AriaTextFieldOptions<'input'>, (keyof Props & InheritAttrs) | 'onChange'>;
 
 type InputProps = Props & InheritAttrs & AriaAttrs;
 
+const elementType = 'input';
+
 const Input = forwardRef<HTMLInputElement, InputProps>(
-  ({ isInvalid, onValueChange, onChange, elementType = 'input', ...props }, ref): JSX.Element => {
+  ({ isInvalid, onValueChange, onChange, ...props }, ref): JSX.Element => {
     const inputRef = useDOMRef(ref);
     // We are specifing `validationState` so that when there are errors, `aria-invalid` is set to `true`
     const { inputProps, descriptionProps, errorMessageProps, labelProps } = useTextField(
diff --git a/packages/components/src/NumberInput/NumberInput.tsx b/packages/components/src/NumberInput/NumberInput.tsx
index dbed9a969..fcdcc664a 100644
--- a/packages/components/src/NumberInput/NumberInput.tsx
+++ b/packages/components/src/NumberInput/NumberInput.tsx
@@ -20,15 +20,21 @@ type Props = {
   value?: string | number;
   defaultValue?: string | number;
   onValueChange?: (value: string | number) => void;
+  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
   inputMode?: 'numeric' | 'decimal';
 };
 
-type InheritAttrs = Omit<BaseInputProps, keyof Props | 'errorMessageProps' | 'descriptionProps' | 'inputProps'>;
+type InheritAttrs = Omit<
+  BaseInputProps,
+  keyof Props | 'errorMessageProps' | 'descriptionProps' | 'inputProps' | 'elementType'
+>;
 
 type AriaAttrs = Omit<AriaTextFieldOptions<'input'>, keyof (Props & InheritAttrs)>;
 
 type NumberInputProps = Props & InheritAttrs & AriaAttrs;
 
+const elementType = 'input';
+
 // FIXME: some event are running duplicate
 const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
   (
@@ -56,7 +62,8 @@ const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
         inputMode,
         isInvalid: isInvalid || !!props.errorMessage,
         value: value,
-        autoComplete: 'off'
+        autoComplete: 'off',
+        inputElementType: elementType
       },
       inputRef
     );
@@ -72,6 +79,7 @@ const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
         ref={inputRef}
         autoCorrect='off'
         descriptionProps={descriptionProps}
+        elementType={elementType}
         errorMessageProps={errorMessageProps}
         inputProps={mergeProps(inputProps, { onChange: handleChange })}
         labelProps={labelProps}
diff --git a/packages/components/src/TextArea/TextArea.tsx b/packages/components/src/TextArea/TextArea.tsx
index 7aa56b5e2..bc1f66f70 100644
--- a/packages/components/src/TextArea/TextArea.tsx
+++ b/packages/components/src/TextArea/TextArea.tsx
@@ -12,14 +12,19 @@ type Props = {
   onChange?: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
 };
 
-type InheritAttrs = Omit<BaseInputProps, keyof Props | 'errorMessageProps' | 'descriptionProps' | 'inputProps'>;
+type InheritAttrs = Omit<
+  BaseInputProps,
+  keyof Props | 'errorMessageProps' | 'descriptionProps' | 'inputProps' | 'elementType'
+>;
 
 type AriaAttrs = Omit<AriaTextFieldOptions<'textarea'>, (keyof Props & InheritAttrs) | 'onChange'>;
 
 type TextAreaProps = Props & InheritAttrs & AriaAttrs;
 
+const elementType = 'textarea';
+
 const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
-  ({ isInvalid, onValueChange, onChange, elementType = 'textarea', ...props }, ref): JSX.Element => {
+  ({ isInvalid, onValueChange, onChange, ...props }, ref): JSX.Element => {
     const inputRef = useDOMRef(ref);
     // We are specifing `validationState` so that when there are errors, `aria-invalid` is set to `true`
     const { inputProps, descriptionProps, errorMessageProps, labelProps } = useTextField(