diff --git a/packages/react/__tests__/exports.ts b/packages/react/__tests__/exports.ts
index fa75b7c0957..5600fefdf3b 100644
--- a/packages/react/__tests__/exports.ts
+++ b/packages/react/__tests__/exports.ts
@@ -26,7 +26,6 @@ describe('@aws-amplify/ui-react', () => {
           "FieldGroupIcon",
           "FieldGroupIconButton",
           "Flex",
-          "Form",
           "Grid",
           "Heading",
           "Icon",
diff --git a/packages/react/src/components/Authenticator/ConfirmSignIn/ConfirmSignIn.tsx b/packages/react/src/components/Authenticator/ConfirmSignIn/ConfirmSignIn.tsx
index d2546b5a261..c02fb60f175 100644
--- a/packages/react/src/components/Authenticator/ConfirmSignIn/ConfirmSignIn.tsx
+++ b/packages/react/src/components/Authenticator/ConfirmSignIn/ConfirmSignIn.tsx
@@ -7,8 +7,9 @@ import {
 } from '@aws-amplify/ui';
 
 import { useAuthenticator } from '..';
-import { Flex, Form, Heading } from '../../..';
+import { Flex, Heading } from '../../..';
 import { ConfirmationCodeInput, ConfirmSignInFooter } from '../shared';
+import { isInputOrSelectElement, isInputElement } from '../../../helpers/utils';
 
 export const ConfirmSignIn = (): JSX.Element => {
   const { _state, error, submitForm, updateForm } = useAuthenticator();
@@ -29,12 +30,19 @@ export const ConfirmSignIn = (): JSX.Element => {
         `Unexpected challengeName encountered in ConfirmSignIn: ${challengeName}`
       );
   }
+  const handleChange = (event: React.FormEvent<HTMLFormElement>) => {
+    if (isInputOrSelectElement(event.target)) {
+      let { name, type, value } = event.target;
+      if (
+        isInputElement(event.target) &&
+        type === 'checkbox' &&
+        !event.target.checked
+      ) {
+        value = undefined;
+      }
 
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    let { checked, name, type, value } = event.target;
-    if (type === 'checkbox' && !checked) value = undefined;
-
-    updateForm({ name, value });
+      updateForm({ name, value });
+    }
   };
 
   const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
@@ -43,7 +51,8 @@ export const ConfirmSignIn = (): JSX.Element => {
   };
 
   return (
-    <Form
+    <form
+      data-amplify-form=""
       data-amplify-authenticator-confirmsignin=""
       method="post"
       onChange={handleChange}
@@ -58,6 +67,6 @@ export const ConfirmSignIn = (): JSX.Element => {
 
         <ConfirmSignInFooter />
       </Flex>
-    </Form>
+    </form>
   );
 };
diff --git a/packages/react/src/components/Authenticator/ConfirmSignUp/ConfirmSignUp.tsx b/packages/react/src/components/Authenticator/ConfirmSignUp/ConfirmSignUp.tsx
index c02038083cc..f05c60bc93f 100644
--- a/packages/react/src/components/Authenticator/ConfirmSignUp/ConfirmSignUp.tsx
+++ b/packages/react/src/components/Authenticator/ConfirmSignUp/ConfirmSignUp.tsx
@@ -1,7 +1,9 @@
 import { translate } from '@aws-amplify/ui';
 
 import { useAuthenticator } from '../..';
-import { Button, Flex, Form, Heading } from '../../..';
+import { Button, Flex, Heading } from '../../..';
+import { isInputOrSelectElement, isInputElement } from '../../../helpers/utils';
+
 import {
   ConfirmationCodeInput,
   ConfirmationCodeInputProps,
@@ -11,11 +13,19 @@ import {
 export function ConfirmSignUp() {
   const { isPending, resendCode, submitForm, updateForm } = useAuthenticator();
 
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    let { checked, name, type, value } = event.target;
-    if (type === 'checkbox' && !checked) value = undefined;
+  const handleChange = (event: React.FormEvent<HTMLFormElement>) => {
+    if (isInputOrSelectElement(event.target)) {
+      let { name, type, value } = event.target;
+      if (
+        isInputElement(event.target) &&
+        type === 'checkbox' &&
+        !event.target.checked
+      ) {
+        value = undefined;
+      }
 
-    updateForm({ name, value });
+      updateForm({ name, value });
+    }
   };
 
   const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
@@ -30,7 +40,8 @@ export function ConfirmSignUp() {
 
   return (
     // TODO Automatically add these namespaces again from `useAmplify`
-    <Form
+    <form
+      data-amplify-form=""
       data-amplify-authenticator-confirmsignup=""
       method="post"
       onChange={handleChange}
@@ -60,6 +71,6 @@ export function ConfirmSignUp() {
           </Button>
         </Flex>
       </Flex>
-    </Form>
+    </form>
   );
 }
diff --git a/packages/react/src/components/Authenticator/ForceNewPassword/ForceNewPassword.tsx b/packages/react/src/components/Authenticator/ForceNewPassword/ForceNewPassword.tsx
index f7350ce2729..bff82b1fee3 100644
--- a/packages/react/src/components/Authenticator/ForceNewPassword/ForceNewPassword.tsx
+++ b/packages/react/src/components/Authenticator/ForceNewPassword/ForceNewPassword.tsx
@@ -1,18 +1,27 @@
 import { getActorContext, SignInContext, translate } from '@aws-amplify/ui';
 
 import { useAuthenticator } from '..';
-import { Button, Flex, Form, Heading, PasswordField, Text } from '../../..';
+import { Button, Flex, Heading, PasswordField, Text } from '../../..';
+import { isInputOrSelectElement, isInputElement } from '../../../helpers/utils';
 
 export const ForceNewPassword = (): JSX.Element => {
   const { _state, error, isPending, toSignIn, submitForm, updateForm } =
     useAuthenticator();
   const { validationError } = getActorContext(_state) as SignInContext;
 
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    let { checked, name, type, value } = event.target;
-    if (type === 'checkbox' && !checked) value = undefined;
+  const handleChange = (event: React.FormEvent<HTMLFormElement>) => {
+    if (isInputOrSelectElement(event.target)) {
+      let { name, type, value } = event.target;
+      if (
+        isInputElement(event.target) &&
+        type === 'checkbox' &&
+        !event.target.checked
+      ) {
+        value = undefined;
+      }
 
-    updateForm({ name, value });
+      updateForm({ name, value });
+    }
   };
 
   const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
@@ -21,7 +30,8 @@ export const ForceNewPassword = (): JSX.Element => {
   };
 
   return (
-    <Form
+    <form
+      data-amplify-form=""
       data-amplify-authenticator-forcenewpassword=""
       method="post"
       onChange={handleChange}
@@ -83,6 +93,6 @@ export const ForceNewPassword = (): JSX.Element => {
           {translate('Back to Sign In')}
         </Button>
       </Flex>
-    </Form>
+    </form>
   );
 };
diff --git a/packages/react/src/components/Authenticator/ResetPassword/ConfirmResetPassword.tsx b/packages/react/src/components/Authenticator/ResetPassword/ConfirmResetPassword.tsx
index 470b1e8d5f0..b9839a7f47f 100644
--- a/packages/react/src/components/Authenticator/ResetPassword/ConfirmResetPassword.tsx
+++ b/packages/react/src/components/Authenticator/ResetPassword/ConfirmResetPassword.tsx
@@ -5,12 +5,13 @@ import {
 } from '@aws-amplify/ui';
 
 import { useAuthenticator } from '..';
-import { Flex, Form, Heading, PasswordField, Text } from '../../..';
+import { Flex, Heading, PasswordField, Text } from '../../..';
 import {
   ConfirmationCodeInput,
   RemoteErrorMessage,
   TwoButtonSubmitFooter,
 } from '../shared';
+import { isInputOrSelectElement, isInputElement } from '../../../helpers/utils';
 
 export const ConfirmResetPassword = (): JSX.Element => {
   const { _state, submitForm, updateForm } = useAuthenticator();
@@ -20,11 +21,19 @@ export const ConfirmResetPassword = (): JSX.Element => {
   const passwordText = translate('New password');
   const confirmPasswordLabel = translate('Confirm Password');
 
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    let { checked, name, type, value } = event.target;
-    if (type === 'checkbox' && !checked) value = undefined;
+  const handleChange = (event: React.FormEvent<HTMLFormElement>) => {
+    if (isInputOrSelectElement(event.target)) {
+      let { name, type, value } = event.target;
+      if (
+        isInputElement(event.target) &&
+        type === 'checkbox' &&
+        !event.target.checked
+      ) {
+        value = undefined;
+      }
 
-    updateForm({ name, value });
+      updateForm({ name, value });
+    }
   };
 
   const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
@@ -33,7 +42,8 @@ export const ConfirmResetPassword = (): JSX.Element => {
   };
 
   return (
-    <Form
+    <form
+      data-amplify-form=""
       data-amplify-authenticator-confirmresetpassword=""
       method="post"
       onSubmit={handleSubmit}
@@ -77,6 +87,6 @@ export const ConfirmResetPassword = (): JSX.Element => {
           cancelButtonText={translate('Resend Code')}
         />
       </Flex>
-    </Form>
+    </form>
   );
 };
diff --git a/packages/react/src/components/Authenticator/ResetPassword/ResetPassword.tsx b/packages/react/src/components/Authenticator/ResetPassword/ResetPassword.tsx
index 1092048d95c..ac3bef0c4db 100644
--- a/packages/react/src/components/Authenticator/ResetPassword/ResetPassword.tsx
+++ b/packages/react/src/components/Authenticator/ResetPassword/ResetPassword.tsx
@@ -1,8 +1,9 @@
 import { getAliasInfoFromContext, translate } from '@aws-amplify/ui';
 
 import { useAuthenticator } from '..';
-import { Flex, Form, Heading, TextField } from '../../..';
+import { Flex, Heading, TextField } from '../../..';
 import { RemoteErrorMessage, TwoButtonSubmitFooter } from '../shared';
+import { isInputOrSelectElement, isInputElement } from '../../../helpers/utils';
 
 export const ResetPassword = (): JSX.Element => {
   const { isPending, submitForm, updateForm, _state } = useAuthenticator();
@@ -10,11 +11,19 @@ export const ResetPassword = (): JSX.Element => {
   const { label } = getAliasInfoFromContext(_state.context);
   const labelText = `Enter your ${label.toLowerCase()}`;
 
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    let { checked, name, type, value } = event.target;
-    if (type === 'checkbox' && !checked) value = undefined;
+  const handleChange = (event: React.FormEvent<HTMLFormElement>) => {
+    if (isInputOrSelectElement(event.target)) {
+      let { name, type, value } = event.target;
+      if (
+        isInputElement(event.target) &&
+        type === 'checkbox' &&
+        !event.target.checked
+      ) {
+        value = undefined;
+      }
 
-    updateForm({ name, value });
+      updateForm({ name, value });
+    }
   };
 
   const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
@@ -23,7 +32,8 @@ export const ResetPassword = (): JSX.Element => {
   };
 
   return (
-    <Form
+    <form
+      data-amplify-form=""
       data-amplify-authenticator-resetpassword=""
       method="post"
       onChange={handleChange}
@@ -57,6 +67,6 @@ export const ResetPassword = (): JSX.Element => {
           }
         />
       </Flex>
-    </Form>
+    </form>
   );
 };
diff --git a/packages/react/src/components/Authenticator/SetupTOTP/SetupTOTP.tsx b/packages/react/src/components/Authenticator/SetupTOTP/SetupTOTP.tsx
index 26ecd1a5c06..0d23e25d391 100644
--- a/packages/react/src/components/Authenticator/SetupTOTP/SetupTOTP.tsx
+++ b/packages/react/src/components/Authenticator/SetupTOTP/SetupTOTP.tsx
@@ -5,7 +5,9 @@ import QRCode from 'qrcode';
 import { useEffect, useState } from 'react';
 
 import { useAuthenticator } from '..';
-import { Flex, Form, Heading, Image } from '../../..';
+import { Flex, Heading, Image } from '../../..';
+import { isInputOrSelectElement, isInputElement } from '../../../helpers/utils';
+
 import {
   ConfirmationCodeInput,
   ConfirmSignInFooter,
@@ -44,11 +46,19 @@ export const SetupTOTP = (): JSX.Element => {
     generateQRCode(user);
   }, [user]);
 
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    let { checked, name, type, value } = event.target;
-    if (type === 'checkbox' && !checked) value = undefined;
+  const handleChange = (event: React.FormEvent<HTMLFormElement>) => {
+    if (isInputOrSelectElement(event.target)) {
+      let { name, type, value } = event.target;
+      if (
+        isInputElement(event.target) &&
+        type === 'checkbox' &&
+        !event.target.checked
+      ) {
+        value = undefined;
+      }
 
-    updateForm({ name, value });
+      updateForm({ name, value });
+    }
   };
 
   const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
@@ -57,7 +67,8 @@ export const SetupTOTP = (): JSX.Element => {
   };
 
   return (
-    <Form
+    <form
+      data-amplify-form=""
       data-amplify-authenticator-setup-totp=""
       method="post"
       onChange={handleChange}
@@ -85,6 +96,6 @@ export const SetupTOTP = (): JSX.Element => {
 
         <ConfirmSignInFooter />
       </Flex>
-    </Form>
+    </form>
   );
 };
diff --git a/packages/react/src/components/Authenticator/SignIn/SignIn.tsx b/packages/react/src/components/Authenticator/SignIn/SignIn.tsx
index 79da78e4c1e..29234621701 100644
--- a/packages/react/src/components/Authenticator/SignIn/SignIn.tsx
+++ b/packages/react/src/components/Authenticator/SignIn/SignIn.tsx
@@ -1,9 +1,10 @@
 import { translate } from '@aws-amplify/ui';
 
 import { useAuthenticator } from '..';
-import { Button, Flex, Form, Heading, PasswordField, View } from '../../..';
+import { Button, Flex, PasswordField, View } from '../../..';
 import { FederatedSignIn } from '../FederatedSignIn';
 import { RemoteErrorMessage, UserNameAlias } from '../shared';
+import { isInputElement, isInputOrSelectElement } from '../../../helpers/utils';
 
 export function SignIn() {
   const {
@@ -15,11 +16,19 @@ export function SignIn() {
     updateForm,
   } = useAuthenticator();
 
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    let { checked, name, type, value } = event.target;
-    if (type === 'checkbox' && !checked) value = undefined;
+  const handleChange = (event: React.FormEvent<HTMLFormElement>) => {
+    if (isInputOrSelectElement(event.target)) {
+      let { name, type, value } = event.target;
+      if (
+        isInputElement(event.target) &&
+        type === 'checkbox' &&
+        !event.target.checked
+      ) {
+        value = undefined;
+      }
 
-    updateForm({ name, value });
+      updateForm({ name, value });
+    }
   };
 
   const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
@@ -31,7 +40,8 @@ export function SignIn() {
     <View>
       <Header />
 
-      <Form
+      <form
+        data-amplify-form=""
         data-amplify-authenticator-signin=""
         method="post"
         onSubmit={handleSubmit}
@@ -66,7 +76,7 @@ export function SignIn() {
             {translate('Sign in')}
           </Button>
         </Flex>
-      </Form>
+      </form>
 
       <Footer />
     </View>
diff --git a/packages/react/src/components/Authenticator/SignUp/SignUp.tsx b/packages/react/src/components/Authenticator/SignUp/SignUp.tsx
index b4846bfd545..97df05d7a45 100644
--- a/packages/react/src/components/Authenticator/SignUp/SignUp.tsx
+++ b/packages/react/src/components/Authenticator/SignUp/SignUp.tsx
@@ -1,10 +1,11 @@
 import { translate } from '@aws-amplify/ui';
 
 import { useAuthenticator } from '..';
-import { Button, Flex, Form, View } from '../../..';
+import { Button, Flex, View } from '../../..';
 import { FederatedSignIn } from '../FederatedSignIn';
 import { RemoteErrorMessage } from '../shared';
 import { FormFields } from './FormFields';
+import { isInputOrSelectElement, isInputElement } from '../../../helpers/utils';
 
 export function SignUp() {
   const { components, hasValidationErrors, isPending, submitForm, updateForm } =
@@ -20,11 +21,19 @@ export function SignUp() {
 
   console.log({ components });
 
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    let { checked, name, type, value } = event.target;
-    if (type === 'checkbox' && !checked) value = undefined;
+  const handleChange = (event: React.FormEvent<HTMLFormElement>) => {
+    if (isInputOrSelectElement(event.target)) {
+      let { name, type, value } = event.target;
+      if (
+        isInputElement(event.target) &&
+        type === 'checkbox' &&
+        !event.target.checked
+      ) {
+        value = undefined;
+      }
 
-    updateForm({ name, value });
+      updateForm({ name, value });
+    }
   };
 
   const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
@@ -36,7 +45,8 @@ export function SignUp() {
     <View>
       <Header />
 
-      <Form
+      <form
+        data-amplify-form=""
         data-amplify-authenticator-signup=""
         method="post"
         onChange={handleChange}
@@ -63,7 +73,7 @@ export function SignUp() {
             {translate('Create Account')}
           </Button>
         </Flex>
-      </Form>
+      </form>
 
       <Footer />
     </View>
diff --git a/packages/react/src/components/Authenticator/VerifyUser/ConfirmVerifyUser.tsx b/packages/react/src/components/Authenticator/VerifyUser/ConfirmVerifyUser.tsx
index 6c706425c83..eded1e137f3 100644
--- a/packages/react/src/components/Authenticator/VerifyUser/ConfirmVerifyUser.tsx
+++ b/packages/react/src/components/Authenticator/VerifyUser/ConfirmVerifyUser.tsx
@@ -1,21 +1,30 @@
 import { translate } from '@aws-amplify/ui';
 
 import { useAuthenticator } from '..';
-import { Flex, Form, Heading } from '../../..';
+import { Flex, Heading } from '../../..';
 import {
   ConfirmationCodeInput,
   RemoteErrorMessage,
   TwoButtonSubmitFooter,
 } from '../shared';
+import { isInputOrSelectElement, isInputElement } from '../../../helpers/utils';
 
 export const ConfirmVerifyUser = (): JSX.Element => {
   const { submitForm, updateForm } = useAuthenticator();
 
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    let { checked, name, type, value } = event.target;
-    if (type === 'checkbox' && !checked) value = undefined;
-
-    updateForm({ name, value });
+  const handleChange = (event: React.FormEvent<HTMLFormElement>) => {
+    if (isInputOrSelectElement(event.target)) {
+      let { name, type, value } = event.target;
+      if (
+        isInputElement(event.target) &&
+        type === 'checkbox' &&
+        !event.target.checked
+      ) {
+        value = undefined;
+      }
+
+      updateForm({ name, value });
+    }
   };
 
   const handleSubmit = (event: React.ChangeEvent<HTMLFormElement>) => {
@@ -24,7 +33,8 @@ export const ConfirmVerifyUser = (): JSX.Element => {
   };
 
   return (
-    <Form
+    <form
+      data-amplify-form=""
       data-amplify-authenticator-confirmverifyuser=""
       method="post"
       onChange={handleChange}
@@ -46,6 +56,6 @@ export const ConfirmVerifyUser = (): JSX.Element => {
           cancelButtonSendType="SKIP"
         />
       </Flex>
-    </Form>
+    </form>
   );
 };
diff --git a/packages/react/src/components/Authenticator/VerifyUser/VerifyUser.tsx b/packages/react/src/components/Authenticator/VerifyUser/VerifyUser.tsx
index 8d630b2fb01..95bbbcd534f 100644
--- a/packages/react/src/components/Authenticator/VerifyUser/VerifyUser.tsx
+++ b/packages/react/src/components/Authenticator/VerifyUser/VerifyUser.tsx
@@ -9,8 +9,9 @@ import {
 } from '@aws-amplify/ui';
 
 import { useAuthenticator } from '..';
-import { Flex, Form, Heading, Radio, RadioGroupField } from '../../..';
+import { Flex, Heading, Radio, RadioGroupField } from '../../..';
 import { RemoteErrorMessage, TwoButtonSubmitFooter } from '../shared';
+import { isInputOrSelectElement, isInputElement } from '../../../helpers/utils';
 
 const censorContactInformation = (
   type: ContactMethod,
@@ -70,11 +71,19 @@ export const VerifyUser = (): JSX.Element => {
     </RadioGroupField>
   );
 
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    let { checked, name, type, value } = event.target;
-    if (type === 'checkbox' && !checked) value = undefined;
-
-    updateForm({ name, value });
+  const handleChange = (event: React.FormEvent<HTMLFormElement>) => {
+    if (isInputOrSelectElement(event.target)) {
+      let { name, type, value } = event.target;
+      if (
+        isInputElement(event.target) &&
+        type === 'checkbox' &&
+        !event.target.checked
+      ) {
+        value = undefined;
+      }
+
+      updateForm({ name, value });
+    }
   };
 
   const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
@@ -83,7 +92,8 @@ export const VerifyUser = (): JSX.Element => {
   };
 
   return (
-    <Form
+    <form
+      data-amplify-form=""
       data-amplify-authenticator-verifyuser=""
       method="post"
       onChange={handleChange}
@@ -104,6 +114,6 @@ export const VerifyUser = (): JSX.Element => {
           submitButtonText={footerSubmitText}
         />
       </Flex>
-    </Form>
+    </form>
   );
 };
diff --git a/packages/react/src/helpers/utils.ts b/packages/react/src/helpers/utils.ts
index f8ab896a79e..e1ffaa99484 100644
--- a/packages/react/src/helpers/utils.ts
+++ b/packages/react/src/helpers/utils.ts
@@ -1 +1,17 @@
 export const isDevelopment = () => process.env.NODE_ENV !== 'production';
+
+export const isInputOrSelectElement = (
+  target: unknown
+): target is HTMLInputElement | HTMLSelectElement => {
+  return isInputElement(target) || isSelectElement(target);
+};
+
+export const isInputElement = (target: unknown): target is HTMLInputElement => {
+  return (target as HTMLElement)?.nodeName === 'INPUT';
+};
+
+export const isSelectElement = (
+  target: unknown
+): target is HTMLInputElement => {
+  return (target as HTMLElement)?.nodeName === 'SELECT';
+};
diff --git a/packages/react/src/primitives/index.tsx b/packages/react/src/primitives/index.tsx
index 79157ede88b..55221d4fc32 100644
--- a/packages/react/src/primitives/index.tsx
+++ b/packages/react/src/primitives/index.tsx
@@ -3,7 +3,3 @@ export * from './hooks';
 
 export * from './shared';
 export * from './types';
-
-export function Form(props) {
-  return <form data-amplify-form="" {...props} />;
-}