diff --git a/demo/collections/CustomComponents/components/fields/Text/Field/index.tsx b/demo/collections/CustomComponents/components/fields/Text/Field/index.tsx
index 580486d2cf..371e8c4876 100644
--- a/demo/collections/CustomComponents/components/fields/Text/Field/index.tsx
+++ b/demo/collections/CustomComponents/components/fields/Text/Field/index.tsx
@@ -1,5 +1,5 @@
-import React, { useCallback, useState } from 'react';
-import TextInput from '../../../../../../../src/admin/components/forms/field-types/Text';
+import React, { useCallback } from 'react';
+import TextInput from '../../../../../../../src/admin/components/forms/field-types/Text/Input';
 import { Props as TextFieldType } from '../../../../../../../src/admin/components/forms/field-types/Text/types';
 import useField from '../../../../../../../src/admin/components/forms/useField';
 
@@ -7,29 +7,35 @@ const Text: React.FC<TextFieldType> = (props) => {
   const {
     path,
     name,
-    label
+    label,
   } = props;
 
-  const {
-    value,
-    setValue
-  } = useField({
-    path
+  const field = useField({
+    path,
   });
 
+  const {
+    showError,
+    value,
+    setValue,
+  } = field;
+
   const onChange = useCallback((incomingValue) => {
     const valueWithoutSpaces = incomingValue.replace(/\s/g, '');
-    setValue(valueWithoutSpaces)
-  }, [])
+    setValue(valueWithoutSpaces);
+  }, [
+    setValue,
+  ]);
 
   return (
     <TextInput
       name={name}
-      label={label}
       value={value as string}
+      label={label}
       onChange={onChange}
+      showError={showError}
     />
-  )
+  );
 };
 
 export default Text;
diff --git a/src/admin/components/forms/field-types/Text/Input.tsx b/src/admin/components/forms/field-types/Text/Input.tsx
new file mode 100644
index 0000000000..f3988fb07f
--- /dev/null
+++ b/src/admin/components/forms/field-types/Text/Input.tsx
@@ -0,0 +1,84 @@
+import React from 'react';
+import Label from '../../Label';
+import Error from '../../Error';
+import FieldDescription from '../../FieldDescription';
+import { TextField } from '../../../../../fields/config/types';
+import { Description } from '../../FieldDescription/types';
+// import { FieldType } from '../../useField/types';
+
+import './index.scss';
+
+export type TextInputProps = Omit<TextField, 'type'> & {
+  showError: boolean
+  errorMessage?: string
+  readOnly?: boolean
+  path?: string
+  required?: boolean
+  value?: string
+  description?: Description
+  onChange?: (e) => void
+  placeholder?: string
+  style?: React.CSSProperties
+  width?: string
+}
+
+const TextInput: React.FC<TextInputProps> = (props) => {
+  const {
+    showError,
+    errorMessage,
+    placeholder,
+    readOnly,
+    path,
+    label,
+    required,
+    value,
+    onChange,
+    description,
+    style,
+    width,
+  } = props;
+
+  const classes = [
+    'field-type',
+    'text',
+    showError && 'error',
+    readOnly && 'read-only',
+  ].filter(Boolean).join(' ');
+
+  return (
+    <div
+      className={classes}
+      style={{
+        ...style,
+        width,
+      }}
+    >
+      <Error
+        showError={showError}
+        message={errorMessage}
+      />
+      <Label
+        htmlFor={path}
+        label={label}
+        required={required}
+      />
+      <input
+        value={value}
+        onChange={(e) => {
+          onChange(e.target.value);
+        }}
+        disabled={readOnly}
+        placeholder={placeholder}
+        type="text"
+        id={path}
+        name={path}
+      />
+      <FieldDescription
+        value={value}
+        description={description}
+      />
+    </div>
+  );
+};
+
+export default TextInput;
diff --git a/src/admin/components/forms/field-types/Text/index.tsx b/src/admin/components/forms/field-types/Text/index.tsx
index aa6f044203..f1705d35f8 100644
--- a/src/admin/components/forms/field-types/Text/index.tsx
+++ b/src/admin/components/forms/field-types/Text/index.tsx
@@ -1,11 +1,9 @@
-import React, { useCallback, useEffect } from 'react';
+import React from 'react';
 import useField from '../../useField';
 import withCondition from '../../withCondition';
-import Label from '../../Label';
-import Error from '../../Error';
 import { text } from '../../../../../fields/validations';
 import { Props } from './types';
-import FieldDescription from '../../FieldDescription';
+import TextInput from './Input';
 
 import './index.scss';
 
@@ -24,13 +22,11 @@ const Text: React.FC<Props> = (props) => {
       description,
       condition,
     } = {},
-    value: valueFromProps,
-    onChange: onChangeFromProps,
   } = props;
 
   const path = pathFromProps || name;
 
-  const fieldType = useField<string>({
+  const field = useField<string>({
     path,
     validate,
     enableDebouncedValue: true,
@@ -38,64 +34,27 @@ const Text: React.FC<Props> = (props) => {
   });
 
   const {
-    value: valueFromContext,
+    value,
     showError,
     setValue,
     errorMessage,
-  } = fieldType;
-
-  const onChange = useCallback((e) => {
-    const { value: incomingValue } = e.target;
-    if (typeof onChangeFromProps === 'function') {
-      onChangeFromProps(incomingValue);
-    } else {
-      setValue(e);
-    }
-  }, [
-    onChangeFromProps,
-    setValue,
-  ]);
-
-  const classes = [
-    'field-type',
-    'text',
-    showError && 'error',
-    readOnly && 'read-only',
-  ].filter(Boolean).join(' ');
-
-  const value = valueFromProps || valueFromContext || '';
+  } = field;
 
   return (
-    <div
-      className={classes}
-      style={{
-        ...style,
-        width,
-      }}
-    >
-      <Error
-        showError={showError}
-        message={errorMessage}
-      />
-      <Label
-        htmlFor={path}
-        label={label}
-        required={required}
-      />
-      <input
-        value={value}
-        onChange={onChange}
-        disabled={readOnly}
-        placeholder={placeholder}
-        type="text"
-        id={path}
-        name={path}
-      />
-      <FieldDescription
-        value={value}
-        description={description}
-      />
-    </div>
+    <TextInput
+      name={name}
+      onChange={setValue}
+      showError={showError}
+      errorMessage={errorMessage}
+      required={required}
+      label={label}
+      value={value}
+      placeholder={placeholder}
+      readOnly={readOnly}
+      style={style}
+      width={width}
+      description={description}
+    />
   );
 };
 
diff --git a/src/fields/config/types.ts b/src/fields/config/types.ts
index 10e9713f81..a8fb9caeba 100644
--- a/src/fields/config/types.ts
+++ b/src/fields/config/types.ts
@@ -99,8 +99,6 @@ export type TextField = FieldBase & {
     placeholder?: string
     autoComplete?: string
   }
-  value?: string
-  onChange?: (value: string) => void
 }
 
 export type EmailField = FieldBase & {