diff --git a/src/components/CheckboxWithLabel.js b/src/components/CheckboxWithLabel.js
index 0a90a9be46e2..146e37ceb730 100644
--- a/src/components/CheckboxWithLabel.js
+++ b/src/components/CheckboxWithLabel.js
@@ -7,6 +7,7 @@ import variables from '@styles/variables';
 import Checkbox from './Checkbox';
 import FormHelpMessage from './FormHelpMessage';
 import PressableWithFeedback from './Pressable/PressableWithFeedback';
+import refPropTypes from './refPropTypes';
 import Text from './Text';
 
 /**
@@ -54,7 +55,7 @@ const propTypes = {
     defaultValue: PropTypes.bool,
 
     /** React ref being forwarded to the Checkbox input */
-    forwardedRef: PropTypes.func,
+    forwardedRef: refPropTypes,
 
     /** The ID used to uniquely identify the input in a Form */
     /* eslint-disable-next-line react/no-unused-prop-types */
diff --git a/src/components/Form/FormProvider.js b/src/components/Form/FormProvider.js
index fa0cc3ebd723..92c76da5936d 100644
--- a/src/components/Form/FormProvider.js
+++ b/src/components/Form/FormProvider.js
@@ -317,7 +317,7 @@ function FormProvider({validate, formID, shouldValidateOnBlur, shouldValidateOnC
                 errors={errors}
                 enabledWhenOffline={enabledWhenOffline}
             >
-                {children}
+                {_.isFunction(children) ? children({inputValues}) : children}
             </FormWrapper>
         </FormContext.Provider>
     );
diff --git a/src/pages/EnablePayments/AdditionalDetailsStep.js b/src/pages/EnablePayments/AdditionalDetailsStep.js
index 45738c376181..d7cabe144dd4 100644
--- a/src/pages/EnablePayments/AdditionalDetailsStep.js
+++ b/src/pages/EnablePayments/AdditionalDetailsStep.js
@@ -5,9 +5,10 @@ import React from 'react';
 import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
-import DatePicker from '@components/DatePicker';
-import Form from '@components/Form';
+import FormProvider from '@components/Form/FormProvider';
+import InputWrapper from '@components/Form/InputWrapper';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
+import NewDatePicker from '@components/NewDatePicker';
 import ScreenWrapper from '@components/ScreenWrapper';
 import Text from '@components/Text';
 import TextInput from '@components/TextInput';
@@ -178,7 +179,7 @@ function AdditionalDetailsStep({walletAdditionalDetails, translate, currentUserP
                         {translate('additionalDetailsStep.helpLink')}
                     </TextLink>
                 </View>
-                <Form
+                <FormProvider
                     formID={ONYXKEYS.WALLET_ADDITIONAL_DETAILS}
                     validate={validate}
                     onSubmit={activateWallet}
@@ -186,7 +187,8 @@ function AdditionalDetailsStep({walletAdditionalDetails, translate, currentUserP
                     submitButtonText={translate('common.saveAndContinue')}
                     style={[styles.mh5, styles.flexGrow1]}
                 >
-                    <TextInput
+                    <InputWrapper
+                        InputComponent={TextInput}
                         inputID="legalFirstName"
                         containerStyles={[styles.mt4]}
                         label={translate(fieldNameTranslationKeys.legalFirstName)}
@@ -195,7 +197,8 @@ function AdditionalDetailsStep({walletAdditionalDetails, translate, currentUserP
                         defaultValue={PersonalDetails.extractFirstAndLastNameFromAvailableDetails(currentUserPersonalDetails).firstName}
                         shouldSaveDraft
                     />
-                    <TextInput
+                    <InputWrapper
+                        InputComponent={TextInput}
                         inputID="legalLastName"
                         containerStyles={[styles.mt4]}
                         label={translate(fieldNameTranslationKeys.legalLastName)}
@@ -215,7 +218,8 @@ function AdditionalDetailsStep({walletAdditionalDetails, translate, currentUserP
                         streetTranslationKey={fieldNameTranslationKeys.addressStreet}
                         shouldSaveDraft
                     />
-                    <TextInput
+                    <InputWrapper
+                        InputComponent={TextInput}
                         inputID="phoneNumber"
                         containerStyles={[styles.mt4]}
                         inputMode={CONST.INPUT_MODE.TEL}
@@ -226,7 +230,7 @@ function AdditionalDetailsStep({walletAdditionalDetails, translate, currentUserP
                         placeholder={translate('common.phoneNumberPlaceholder')}
                         shouldSaveDraft
                     />
-                    <DatePicker
+                    <NewDatePicker
                         inputID="dob"
                         containerStyles={[styles.mt4]}
                         label={translate(fieldNameTranslationKeys.dob)}
@@ -235,7 +239,8 @@ function AdditionalDetailsStep({walletAdditionalDetails, translate, currentUserP
                         maxDate={maxDate}
                         shouldSaveDraft
                     />
-                    <TextInput
+                    <InputWrapper
+                        InputComponent={TextInput}
                         inputID="ssn"
                         containerStyles={[styles.mt4]}
                         label={translate(fieldNameTranslationKeys[shouldAskForFullSSN ? 'ssnFull9' : 'ssn'])}
@@ -244,7 +249,7 @@ function AdditionalDetailsStep({walletAdditionalDetails, translate, currentUserP
                         maxLength={shouldAskForFullSSN ? 9 : 4}
                         inputMode={CONST.INPUT_MODE.NUMERIC}
                     />
-                </Form>
+                </FormProvider>
             </View>
         </>
     );
diff --git a/src/pages/ReimbursementAccount/ACHContractStep.js b/src/pages/ReimbursementAccount/ACHContractStep.js
index 9dde145f3de6..b52a8c4c9a62 100644
--- a/src/pages/ReimbursementAccount/ACHContractStep.js
+++ b/src/pages/ReimbursementAccount/ACHContractStep.js
@@ -5,7 +5,8 @@ import React, {useState} from 'react';
 import {View} from 'react-native';
 import _ from 'underscore';
 import CheckboxWithLabel from '@components/CheckboxWithLabel';
-import Form from '@components/Form';
+import FormProvider from '@components/Form/FormProvider';
+import InputWrapper from '@components/Form/InputWrapper';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import ScreenWrapper from '@components/ScreenWrapper';
 import Text from '@components/Text';
@@ -157,7 +158,7 @@ function ACHContractStep(props) {
                 shouldShowGetAssistanceButton
                 guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_BANK_ACCOUNT}
             />
-            <Form
+            <FormProvider
                 formID={ONYXKEYS.REIMBURSEMENT_ACCOUNT}
                 validate={validate}
                 onSubmit={submit}
@@ -169,7 +170,8 @@ function ACHContractStep(props) {
                         <Text style={[styles.mb5]}>
                             <Text>{props.translate('beneficialOwnersStep.checkAllThatApply')}</Text>
                         </Text>
-                        <CheckboxWithLabel
+                        <InputWrapper
+                            InputComponent={CheckboxWithLabel}
                             accessibilityLabel={props.translate('beneficialOwnersStep.iOwnMoreThan25Percent')}
                             inputID="ownsMoreThan25Percent"
                             style={[styles.mb2]}
@@ -190,7 +192,8 @@ function ACHContractStep(props) {
                             defaultValue={props.getDefaultStateForField('ownsMoreThan25Percent', false)}
                             shouldSaveDraft
                         />
-                        <CheckboxWithLabel
+                        <InputWrapper
+                            InputComponent={CheckboxWithLabel}
                             accessibilityLabel={props.translate('beneficialOwnersStep.someoneOwnsMoreThan25Percent')}
                             inputID="hasOtherBeneficialOwners"
                             style={[styles.mb2]}
@@ -256,7 +259,8 @@ function ACHContractStep(props) {
                             </View>
                         )}
                         <Text style={[styles.mv5]}>{props.translate('beneficialOwnersStep.agreement')}</Text>
-                        <CheckboxWithLabel
+                        <InputWrapper
+                            InputComponent={CheckboxWithLabel}
                             accessibilityLabel={`${props.translate('common.iAcceptThe')} ${props.translate('beneficialOwnersStep.termsAndConditions')}`}
                             inputID="acceptTermsAndConditions"
                             style={[styles.mt4]}
@@ -269,7 +273,8 @@ function ACHContractStep(props) {
                             defaultValue={props.getDefaultStateForField('acceptTermsAndConditions', false)}
                             shouldSaveDraft
                         />
-                        <CheckboxWithLabel
+                        <InputWrapper
+                            InputComponent={CheckboxWithLabel}
                             accessibilityLabel={props.translate('beneficialOwnersStep.certifyTrueAndAccurate')}
                             inputID="certifyTrueInformation"
                             style={[styles.mt4]}
@@ -279,7 +284,7 @@ function ACHContractStep(props) {
                         />
                     </>
                 )}
-            </Form>
+            </FormProvider>
         </ScreenWrapper>
     );
 }
diff --git a/src/pages/ReimbursementAccount/AddressForm.js b/src/pages/ReimbursementAccount/AddressForm.js
index 0f7c878c9058..ce4df7ae665f 100644
--- a/src/pages/ReimbursementAccount/AddressForm.js
+++ b/src/pages/ReimbursementAccount/AddressForm.js
@@ -2,6 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import {View} from 'react-native';
 import AddressSearch from '@components/AddressSearch';
+import InputWrapper from '@components/Form/InputWrapper';
 import StatePicker from '@components/StatePicker';
 import TextInput from '@components/TextInput';
 import useThemeStyles from '@styles/useThemeStyles';
@@ -96,7 +97,8 @@ function AddressForm(props) {
     return (
         <>
             <View>
-                <AddressSearch
+                <InputWrapper
+                    InputComponent={AddressSearch}
                     inputID={props.inputKeys.street}
                     shouldSaveDraft={props.shouldSaveDraft}
                     label={props.translate(props.streetTranslationKey)}
@@ -111,7 +113,8 @@ function AddressForm(props) {
                     isLimitedToUSA
                 />
             </View>
-            <TextInput
+            <InputWrapper
+                InputComponent={TextInput}
                 inputID={props.inputKeys.city}
                 shouldSaveDraft={props.shouldSaveDraft}
                 label={props.translate('common.city')}
@@ -125,7 +128,8 @@ function AddressForm(props) {
             />
 
             <View style={[styles.mt4, styles.mhn5]}>
-                <StatePicker
+                <InputWrapper
+                    InputComponent={StatePicker}
                     inputID={props.inputKeys.state}
                     shouldSaveDraft={props.shouldSaveDraft}
                     value={props.values.state}
@@ -134,7 +138,8 @@ function AddressForm(props) {
                     errorText={props.errors.state ? props.translate('bankAccount.error.addressState') : ''}
                 />
             </View>
-            <TextInput
+            <InputWrapper
+                InputComponent={TextInput}
                 inputID={props.inputKeys.zipCode}
                 shouldSaveDraft={props.shouldSaveDraft}
                 label={props.translate('common.zip')}
diff --git a/src/pages/ReimbursementAccount/CompanyStep.js b/src/pages/ReimbursementAccount/CompanyStep.js
index 87d60daf7e6f..e31988fbb118 100644
--- a/src/pages/ReimbursementAccount/CompanyStep.js
+++ b/src/pages/ReimbursementAccount/CompanyStep.js
@@ -7,9 +7,10 @@ import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
 import CheckboxWithLabel from '@components/CheckboxWithLabel';
-import DatePicker from '@components/DatePicker';
-import Form from '@components/Form';
+import FormProvider from '@components/Form/FormProvider';
+import InputWrapper from '@components/Form/InputWrapper';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
+import NewDatePicker from '@components/NewDatePicker';
 import Picker from '@components/Picker';
 import ScreenWrapper from '@components/ScreenWrapper';
 import StatePicker from '@components/StatePicker';
@@ -152,7 +153,7 @@ function CompanyStep({reimbursementAccount, reimbursementAccountDraft, getDefaul
                 guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_BANK_ACCOUNT}
                 onBackButtonPress={onBackButtonPress}
             />
-            <Form
+            <FormProvider
                 formID={ONYXKEYS.REIMBURSEMENT_ACCOUNT}
                 validate={validate}
                 onSubmit={submit}
@@ -161,7 +162,8 @@ function CompanyStep({reimbursementAccount, reimbursementAccountDraft, getDefaul
                 style={[styles.mh5, styles.flexGrow1]}
             >
                 <Text>{translate('companyStep.subtitle')}</Text>
-                <TextInput
+                <InputWrapper
+                    InputComponent={TextInput}
                     label={translate('companyStep.legalBusinessName')}
                     accessibilityLabel={translate('companyStep.legalBusinessName')}
                     role={CONST.ACCESSIBILITY_ROLE.TEXT}
@@ -189,7 +191,8 @@ function CompanyStep({reimbursementAccount, reimbursementAccountDraft, getDefaul
                     shouldSaveDraft
                     streetTranslationKey="common.companyAddress"
                 />
-                <TextInput
+                <InputWrapper
+                    InputComponent={TextInput}
                     inputID="companyPhone"
                     label={translate('common.phoneNumber')}
                     accessibilityLabel={translate('common.phoneNumber')}
@@ -200,7 +203,8 @@ function CompanyStep({reimbursementAccount, reimbursementAccountDraft, getDefaul
                     defaultValue={getDefaultStateForField('companyPhone')}
                     shouldSaveDraft
                 />
-                <TextInput
+                <InputWrapper
+                    InputComponent={TextInput}
                     inputID="website"
                     label={translate('companyStep.companyWebsite')}
                     accessibilityLabel={translate('companyStep.companyWebsite')}
@@ -211,7 +215,8 @@ function CompanyStep({reimbursementAccount, reimbursementAccountDraft, getDefaul
                     hint={translate('common.websiteExample')}
                     inputMode={CONST.INPUT_MODE.URL}
                 />
-                <TextInput
+                <InputWrapper
+                    InputComponent={TextInput}
                     inputID="companyTaxID"
                     label={translate('companyStep.taxIDNumber')}
                     accessibilityLabel={translate('companyStep.taxIDNumber')}
@@ -225,7 +230,8 @@ function CompanyStep({reimbursementAccount, reimbursementAccountDraft, getDefaul
                     shouldUseDefaultValue={shouldDisableCompanyTaxID}
                 />
                 <View style={styles.mt4}>
-                    <Picker
+                    <InputWrapper
+                        InputComponent={Picker}
                         inputID="incorporationType"
                         label={translate('companyStep.companyType')}
                         items={_.map(_.keys(CONST.INCORPORATION_TYPES), (key) => ({value: key, label: translate(`companyStep.incorporationTypes.${key}`)}))}
@@ -235,7 +241,7 @@ function CompanyStep({reimbursementAccount, reimbursementAccountDraft, getDefaul
                     />
                 </View>
                 <View style={styles.mt4}>
-                    <DatePicker
+                    <NewDatePicker
                         inputID="incorporationDate"
                         label={translate('companyStep.incorporationDate')}
                         placeholder={translate('companyStep.incorporationDatePlaceholder')}
@@ -244,14 +250,16 @@ function CompanyStep({reimbursementAccount, reimbursementAccountDraft, getDefaul
                     />
                 </View>
                 <View style={[styles.mt4, styles.mhn5]}>
-                    <StatePicker
+                    <InputWrapper
+                        InputComponent={StatePicker}
                         inputID="incorporationState"
                         label={translate('companyStep.incorporationState')}
                         defaultValue={getDefaultStateForField('incorporationState')}
                         shouldSaveDraft
                     />
                 </View>
-                <CheckboxWithLabel
+                <InputWrapper
+                    InputComponent={CheckboxWithLabel}
                     accessibilityLabel={`${translate('companyStep.confirmCompanyIsNot')} ${translate('companyStep.listOfRestrictedBusinesses')}`}
                     inputID="hasNoConnectionToCannabis"
                     defaultValue={getDefaultStateForField('hasNoConnectionToCannabis', false)}
@@ -269,7 +277,7 @@ function CompanyStep({reimbursementAccount, reimbursementAccountDraft, getDefaul
                     style={[styles.mt4]}
                     shouldSaveDraft
                 />
-            </Form>
+            </FormProvider>
         </ScreenWrapper>
     );
 }
diff --git a/src/pages/ReimbursementAccount/IdentityForm.js b/src/pages/ReimbursementAccount/IdentityForm.js
index 16dbfb7b8c83..f762dbd28954 100644
--- a/src/pages/ReimbursementAccount/IdentityForm.js
+++ b/src/pages/ReimbursementAccount/IdentityForm.js
@@ -3,7 +3,8 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import {View} from 'react-native';
 import _ from 'underscore';
-import DatePicker from '@components/DatePicker';
+import InputWrapper from '@components/Form/InputWrapper';
+import NewDatePicker from '@components/NewDatePicker';
 import TextInput from '@components/TextInput';
 import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
@@ -142,7 +143,8 @@ function IdentityForm(props) {
         <View style={props.style}>
             <View style={[styles.flexRow]}>
                 <View style={[styles.flex2, styles.mr2]}>
-                    <TextInput
+                    <InputWrapper
+                        InputComponent={TextInput}
                         inputID={props.inputKeys.firstName}
                         shouldSaveDraft={props.shouldSaveDraft}
                         label={`${props.translate('common.firstName')}`}
@@ -155,7 +157,8 @@ function IdentityForm(props) {
                     />
                 </View>
                 <View style={[styles.flex2]}>
-                    <TextInput
+                    <InputWrapper
+                        InputComponent={TextInput}
                         inputID={props.inputKeys.lastName}
                         shouldSaveDraft={props.shouldSaveDraft}
                         label={`${props.translate('common.lastName')}`}
@@ -168,7 +171,7 @@ function IdentityForm(props) {
                     />
                 </View>
             </View>
-            <DatePicker
+            <NewDatePicker
                 inputID={props.inputKeys.dob}
                 shouldSaveDraft={props.shouldSaveDraft}
                 label={`${props.translate('common.dob')}`}
@@ -180,7 +183,8 @@ function IdentityForm(props) {
                 minDate={minDate}
                 maxDate={maxDate}
             />
-            <TextInput
+            <InputWrapper
+                InputComponent={TextInput}
                 inputID={props.inputKeys.ssnLast4}
                 shouldSaveDraft={props.shouldSaveDraft}
                 label={`${props.translate('common.ssnLast4')}`}
diff --git a/src/pages/ReimbursementAccount/RequestorStep.js b/src/pages/ReimbursementAccount/RequestorStep.js
index 4a3dd2f0917f..d894753d6025 100644
--- a/src/pages/ReimbursementAccount/RequestorStep.js
+++ b/src/pages/ReimbursementAccount/RequestorStep.js
@@ -3,7 +3,8 @@ import PropTypes from 'prop-types';
 import React, {useCallback, useMemo} from 'react';
 import {View} from 'react-native';
 import CheckboxWithLabel from '@components/CheckboxWithLabel';
-import Form from '@components/Form';
+import FormProvider from '@components/Form/FormProvider';
+import InputWrapper from '@components/Form/InputWrapper';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import ScreenWrapper from '@components/ScreenWrapper';
 import Text from '@components/Text';
@@ -132,7 +133,7 @@ const RequestorStep = React.forwardRef(({reimbursementAccount, shouldShowOnfido,
                 onBackButtonPress={onBackButtonPress}
                 shouldShowGetAssistanceButton
             />
-            <Form
+            <FormProvider
                 formID={ONYXKEYS.REIMBURSEMENT_ACCOUNT}
                 submitButtonText={translate('common.saveAndContinue')}
                 validate={validate}
@@ -162,7 +163,8 @@ const RequestorStep = React.forwardRef(({reimbursementAccount, shouldShowOnfido,
                     inputKeys={INPUT_KEYS}
                     shouldSaveDraft
                 />
-                <CheckboxWithLabel
+                <InputWrapper
+                    InputComponent={CheckboxWithLabel}
                     accessibilityLabel={translate('requestorStep.isControllingOfficer')}
                     inputID="isControllingOfficer"
                     defaultValue={getDefaultStateForField('isControllingOfficer', false)}
@@ -193,7 +195,7 @@ const RequestorStep = React.forwardRef(({reimbursementAccount, shouldShowOnfido,
                         {translate('common.termsOfService')}
                     </TextLink>
                 </Text>
-            </Form>
+            </FormProvider>
         </ScreenWrapper>
     );
 });