From 266c3274d03e4fd52c692eeef1ee9248dcf66189 Mon Sep 17 00:00:00 2001
From: Hulpoi George-Valentin <7074307+GeorgeHulpoi@users.noreply.github.com>
Date: Wed, 8 Nov 2023 14:40:31 -0500
Subject: [PATCH] feat: Custom Error, Label, and before/after field components
 (#3747)

Co-authored-by: Dan Ribbens <dan.ribbens@gmail.com>
---
 docs/admin/components.mdx                     | 106 ++++++++++++++++++
 .../forms/field-types/Checkbox/Input.tsx      |  16 ++-
 .../forms/field-types/Checkbox/index.tsx      |  19 +++-
 .../forms/field-types/Code/index.tsx          |  12 +-
 .../forms/field-types/DateTime/Input.tsx      |  20 +++-
 .../forms/field-types/DateTime/index.tsx      |  13 ++-
 .../forms/field-types/Email/index.tsx         |  36 +++---
 .../forms/field-types/JSON/index.tsx          |  22 +++-
 .../forms/field-types/Number/index.tsx        |  57 ++++++----
 .../forms/field-types/Point/index.tsx         |  73 +++++++-----
 .../forms/field-types/RadioGroup/Input.tsx    |  15 ++-
 .../forms/field-types/RadioGroup/index.tsx    |   3 +
 .../forms/field-types/Relationship/index.tsx  |  12 +-
 .../forms/field-types/Select/Input.tsx        |  15 ++-
 .../forms/field-types/Select/index.tsx        |   3 +
 .../forms/field-types/Text/Input.tsx          |  47 +++++---
 .../forms/field-types/Text/index.tsx          |  16 ++-
 .../forms/field-types/Textarea/Input.tsx      |  21 +++-
 .../forms/field-types/Textarea/index.tsx      |   5 +
 .../forms/field-types/Upload/Input.tsx        |  15 ++-
 .../forms/field-types/Upload/index.tsx        |  12 +-
 packages/payload/src/fields/config/schema.ts  |  80 +++++++++++++
 packages/payload/src/fields/config/types.ts   |  66 +++++++++++
 test/fields/collections/Text/AfterInput.tsx   |   9 ++
 test/fields/collections/Text/BeforeInput.tsx  |   9 ++
 test/fields/collections/Text/CustomError.tsx  |  15 +++
 test/fields/collections/Text/CustomLabel.tsx  |  13 +++
 test/fields/collections/Text/index.ts         |  78 ++++++++-----
 test/fields/collections/Text/shared.ts        |   6 +
 test/fields/e2e.spec.ts                       |  70 +++++++++---
 test/fields/int.spec.ts                       |   2 +-
 test/fields/seed.ts                           |  10 +-
 32 files changed, 729 insertions(+), 167 deletions(-)
 create mode 100644 test/fields/collections/Text/AfterInput.tsx
 create mode 100644 test/fields/collections/Text/BeforeInput.tsx
 create mode 100644 test/fields/collections/Text/CustomError.tsx
 create mode 100644 test/fields/collections/Text/CustomLabel.tsx
 create mode 100644 test/fields/collections/Text/shared.ts

diff --git a/docs/admin/components.mdx b/docs/admin/components.mdx
index 7ebd82f3c7..a1f44664cb 100644
--- a/docs/admin/components.mdx
+++ b/docs/admin/components.mdx
@@ -432,6 +432,15 @@ All Payload fields support the ability to swap in your own React components. So,
 | **`Cell`**   | Used in the `List` view's table to represent a table-based preview of the data stored in the field. [More](#cell-component) |
 | **`Field`**  | Swap out the field itself within all `Edit` views. [More](#field-component)                                                 |
 
+As an alternative to replacing the entire Field component, you may want to keep the majority of the default Field component and only swap components within. This allows you to replace the **`Label`** or **`Error`** within a field component or add additional components inside the field with **`BeforeInput`** or **`AfterInput`**. **`BeforeInput`** and **`AfterInput`** are allowed in any fields that don't contain other fields, except [UI](/docs/fields/ui) and [Rich Text](/docs/fields/rich-text).
+
+| Component         | Description                                                                                                     |
+| ----------------- | --------------------------------------------------------------------------------------------------------------- |
+| **`Label`**       | Override the default Label in the Field Component. [More](#label-component)                                     |
+| **`Error`**       | Override the default Label in the Field Component. [More](#error-component)                                     |
+| **`BeforeInput`** | An array of elements that will be added before `input`/`textarea` elements. [More](#afterinput-and-beforeinput) |
+| **`AfterInput`**  | An array of elements that will be added after `input`/`textarea` elements. [More](#afterinput-and-beforeinput)  |
+
 ## Cell Component
 
 These are the props that will be passed to your custom Cell to use in your own components.
@@ -487,6 +496,103 @@ const CustomTextField: React.FC<Props> = ({ path }) => {
   components, including the <strong>useField</strong> hook, [click here](/docs/admin/hooks).
 </Banner>
 
+## Label Component
+
+These are the props that will be passed to your custom Label.
+
+| Property         | Description                                                      |
+| ---------------- | ---------------------------------------------------------------- |
+| **`htmlFor`**    | Property used to set `for` attribute for label.                  |
+| **`label`**      | Label value provided in field, it can be used with i18n.         |
+| **`required`**   | A boolean value that represents if the field is required or not. |
+
+#### Example
+
+```tsx
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+
+import { getTranslation } from 'payload/utilities/getTranslation'
+
+type Props = {
+  htmlFor?: string
+  label?: Record<string, string> | false | string
+  required?: boolean
+}
+
+const CustomLabel: React.FC<Props> = (props) => {
+  const { htmlFor, label, required = false } = props
+
+  const { i18n } = useTranslation()
+
+  if (label) {
+    return (<span>
+      {getTranslation(label, i18n)}
+      {required && <span className="required">*</span>}
+    </span>);
+  } 
+
+  return null
+}
+```
+
+## Error Component
+
+These are the props that will be passed to your custom Error.
+
+| Property         | Description                                                   |
+| ---------------- | ------------------------------------------------------------- |
+| **`message`**    | The error message.                                            |
+| **`showError`**  | A boolean value that represents if the error should be shown. |
+
+#### Example
+
+```tsx
+import React from 'react'
+
+type Props = {
+  message: string
+  showError?: boolean
+}
+
+const CustomError: React.FC<Props> = (props) => {
+  const { message, showError } = props
+
+  if (showError) {
+    return <p style={{color: 'red'}}>{message}</p>
+  } else return null;
+}
+```
+
+## AfterInput and BeforeInput
+
+With these properties you can add multiple components before and after the input element. For example, you can add an absolutely positioned button to clear the current field value.
+
+#### Example
+
+```tsx
+import React from 'react'
+import './style.scss'
+
+const ClearButton: React.FC = () => {
+  return <button onClick={() => {/* ... */}}>X</button>
+}
+
+const fieldField: Field = {
+  name: 'title',
+  type: 'text',
+  admin: {
+    components: {
+      AfterInput: [
+        <ClearButton />
+      ]
+    }
+  }
+}
+
+export default titleField;
+```
+
 ## Custom providers
 
 As your admin customizations gets more complex you may want to share state between fields or other components. You can add custom providers to do add your own context to any Payload app for use in other custom components within the admin panel. Within your config add `admin.components.providers`, these can be used to share context or provide other custom functionality. Read the [React context](https://reactjs.org/docs/context.html) docs to learn more.
diff --git a/packages/payload/src/admin/components/forms/field-types/Checkbox/Input.tsx b/packages/payload/src/admin/components/forms/field-types/Checkbox/Input.tsx
index 38a9f35695..d4cc638d44 100644
--- a/packages/payload/src/admin/components/forms/field-types/Checkbox/Input.tsx
+++ b/packages/payload/src/admin/components/forms/field-types/Checkbox/Input.tsx
@@ -1,13 +1,18 @@
 import React from 'react'
 
+import type { Props as LabelProps } from '../../Label/types'
+
 import Check from '../../../icons/Check'
 import Line from '../../../icons/Line'
-import Label from '../../Label'
+import DefaultLabel from '../../Label'
 import './index.scss'
 
 const baseClass = 'checkbox-input'
 
 type CheckboxInputProps = {
+  AfterInput?: React.ReactElement<any>[]
+  BeforeInput?: React.ReactElement<any>[]
+  Label?: React.ComponentType<LabelProps>
   'aria-label'?: string
   checked?: boolean
   className?: string
@@ -25,6 +30,9 @@ export const CheckboxInput: React.FC<CheckboxInputProps> = (props) => {
   const {
     id,
     name,
+    AfterInput,
+    BeforeInput,
+    Label,
     'aria-label': ariaLabel,
     checked,
     className,
@@ -36,6 +44,8 @@ export const CheckboxInput: React.FC<CheckboxInputProps> = (props) => {
     required,
   } = props
 
+  const LabelComp = Label || DefaultLabel
+
   return (
     <div
       className={[
@@ -48,6 +58,7 @@ export const CheckboxInput: React.FC<CheckboxInputProps> = (props) => {
         .join(' ')}
     >
       <div className={`${baseClass}__input`}>
+        {BeforeInput}
         <input
           aria-label={ariaLabel}
           defaultChecked={Boolean(checked)}
@@ -58,12 +69,13 @@ export const CheckboxInput: React.FC<CheckboxInputProps> = (props) => {
           ref={inputRef}
           type="checkbox"
         />
+        {AfterInput}
         <span className={`${baseClass}__icon ${!partialChecked ? 'check' : 'partial'}`}>
           {!partialChecked && <Check />}
           {partialChecked && <Line />}
         </span>
       </div>
-      {label && <Label htmlFor={id} label={label} required={required} />}
+      {label && <LabelComp htmlFor={id} label={label} required={required} />}
     </div>
   )
 }
diff --git a/packages/payload/src/admin/components/forms/field-types/Checkbox/index.tsx b/packages/payload/src/admin/components/forms/field-types/Checkbox/index.tsx
index 670475ecfc..9b3507d2fe 100644
--- a/packages/payload/src/admin/components/forms/field-types/Checkbox/index.tsx
+++ b/packages/payload/src/admin/components/forms/field-types/Checkbox/index.tsx
@@ -5,7 +5,7 @@ import type { Props } from './types'
 
 import { checkbox } from '../../../../../fields/validations'
 import { getTranslation } from '../../../../../utilities/getTranslation'
-import Error from '../../Error'
+import DefaultError from '../../Error'
 import FieldDescription from '../../FieldDescription'
 import useField from '../../useField'
 import withCondition from '../../withCondition'
@@ -18,7 +18,15 @@ const baseClass = 'checkbox'
 const Checkbox: React.FC<Props> = (props) => {
   const {
     name,
-    admin: { className, condition, description, readOnly, style, width } = {},
+    admin: {
+      className,
+      condition,
+      description,
+      readOnly,
+      style,
+      width,
+      components: { Error, Label, BeforeInput, AfterInput } = {},
+    } = {},
     disableFormData,
     label,
     onChange,
@@ -27,6 +35,8 @@ const Checkbox: React.FC<Props> = (props) => {
     validate = checkbox,
   } = props
 
+  const ErrorComp = Error || DefaultError
+
   const { i18n } = useTranslation()
 
   const path = pathFromProps || name
@@ -72,7 +82,7 @@ const Checkbox: React.FC<Props> = (props) => {
       }}
     >
       <div className={`${baseClass}__error-wrap`}>
-        <Error alignCaret="left" message={errorMessage} showError={showError} />
+        <ErrorComp alignCaret="left" message={errorMessage} showError={showError} />
       </div>
       <CheckboxInput
         checked={Boolean(value)}
@@ -81,6 +91,9 @@ const Checkbox: React.FC<Props> = (props) => {
         name={path}
         onToggle={onToggle}
         readOnly={readOnly}
+        Label={Label}
+        BeforeInput={BeforeInput}
+        AfterInput={AfterInput}
         required={required}
       />
       <FieldDescription description={description} value={value} />
diff --git a/packages/payload/src/admin/components/forms/field-types/Code/index.tsx b/packages/payload/src/admin/components/forms/field-types/Code/index.tsx
index e1d484eb52..9dbef2c80f 100644
--- a/packages/payload/src/admin/components/forms/field-types/Code/index.tsx
+++ b/packages/payload/src/admin/components/forms/field-types/Code/index.tsx
@@ -4,9 +4,9 @@ import type { Props } from './types'
 
 import { code } from '../../../../../fields/validations'
 import { CodeEditor } from '../../../elements/CodeEditor'
-import Error from '../../Error'
+import DefaultError from '../../Error'
 import FieldDescription from '../../FieldDescription'
-import Label from '../../Label'
+import DefaultLabel from '../../Label'
 import useField from '../../useField'
 import withCondition from '../../withCondition'
 import './index.scss'
@@ -31,6 +31,7 @@ const Code: React.FC<Props> = (props) => {
       readOnly,
       style,
       width,
+      components: { Error, Label } = {},
     } = {},
     label,
     path: pathFromProps,
@@ -38,6 +39,9 @@ const Code: React.FC<Props> = (props) => {
     validate = code,
   } = props
 
+  const ErrorComp = Error || DefaultError
+  const LabelComp = Label || DefaultLabel
+
   const path = pathFromProps || name
 
   const memoizedValidate = useCallback(
@@ -69,8 +73,8 @@ const Code: React.FC<Props> = (props) => {
         width,
       }}
     >
-      <Error message={errorMessage} showError={showError} />
-      <Label htmlFor={`field-${path}`} label={label} required={required} />
+      <ErrorComp message={errorMessage} showError={showError} />
+      <LabelComp htmlFor={`field-${path}`} label={label} required={required} />
       <CodeEditor
         defaultLanguage={prismToMonacoLanguageMap[language] || language}
         onChange={readOnly ? () => null : (val) => setValue(val)}
diff --git a/packages/payload/src/admin/components/forms/field-types/DateTime/Input.tsx b/packages/payload/src/admin/components/forms/field-types/DateTime/Input.tsx
index 81a77001f9..43abbb0a8c 100644
--- a/packages/payload/src/admin/components/forms/field-types/DateTime/Input.tsx
+++ b/packages/payload/src/admin/components/forms/field-types/DateTime/Input.tsx
@@ -6,9 +6,9 @@ import type { Description } from '../../FieldDescription/types'
 
 import { getTranslation } from '../../../../../utilities/getTranslation'
 import DatePicker from '../../../elements/DatePicker'
-import Error from '../../Error'
+import DefaultError from '../../Error'
 import FieldDescription from '../../FieldDescription'
-import Label from '../../Label'
+import DefaultLabel from '../../Label'
 import { fieldBaseClass } from '../shared'
 import './index.scss'
 
@@ -16,6 +16,12 @@ const baseClass = 'date-time-field'
 
 export type DateTimeInputProps = Omit<DateField, 'admin' | 'name' | 'type'> & {
   className?: string
+  components: {
+    AfterInput?: React.ReactElement<any>[]
+    BeforeInput?: React.ReactElement<any>[]
+    Error?: React.ComponentType<any>
+    Label?: React.ComponentType<any>
+  }
   datePickerProps?: DateField['admin']['date']
   description?: Description
   errorMessage?: string
@@ -33,6 +39,7 @@ export type DateTimeInputProps = Omit<DateField, 'admin' | 'name' | 'type'> & {
 export const DateTimeInput: React.FC<DateTimeInputProps> = (props) => {
   const {
     className,
+    components: { AfterInput, BeforeInput, Error, Label } = {},
     datePickerProps,
     description,
     errorMessage,
@@ -48,6 +55,9 @@ export const DateTimeInput: React.FC<DateTimeInputProps> = (props) => {
     width,
   } = props
 
+  const ErrorComp = Error || DefaultError
+  const LabelComp = Label || DefaultLabel
+
   const { i18n } = useTranslation()
 
   return (
@@ -67,10 +77,11 @@ export const DateTimeInput: React.FC<DateTimeInputProps> = (props) => {
       }}
     >
       <div className={`${baseClass}__error-wrap`}>
-        <Error message={errorMessage} showError={showError} />
+        <ErrorComp message={errorMessage} showError={showError} />
       </div>
-      <Label htmlFor={path} label={label} required={required} />
+      <LabelComp htmlFor={path} label={label} required={required} />
       <div className={`${baseClass}__input-wrapper`} id={`field-${path.replace(/\./g, '__')}`}>
+        {BeforeInput}
         <DatePicker
           {...datePickerProps}
           onChange={onChange}
@@ -78,6 +89,7 @@ export const DateTimeInput: React.FC<DateTimeInputProps> = (props) => {
           readOnly={readOnly}
           value={value}
         />
+        {AfterInput}
       </div>
       <FieldDescription description={description} value={value} />
     </div>
diff --git a/packages/payload/src/admin/components/forms/field-types/DateTime/index.tsx b/packages/payload/src/admin/components/forms/field-types/DateTime/index.tsx
index 4f6760f99c..65418cfa32 100644
--- a/packages/payload/src/admin/components/forms/field-types/DateTime/index.tsx
+++ b/packages/payload/src/admin/components/forms/field-types/DateTime/index.tsx
@@ -11,7 +11,17 @@ import './index.scss'
 const DateTime: React.FC<Props> = (props) => {
   const {
     name,
-    admin: { className, condition, date, description, placeholder, readOnly, style, width } = {},
+    admin: {
+      className,
+      components,
+      condition,
+      date,
+      description,
+      placeholder,
+      readOnly,
+      style,
+      width,
+    } = {},
     label,
     path: pathFromProps,
     required,
@@ -36,6 +46,7 @@ const DateTime: React.FC<Props> = (props) => {
   return (
     <DateTimeInput
       className={className}
+      components={components}
       datePickerProps={date}
       description={description}
       errorMessage={errorMessage}
diff --git a/packages/payload/src/admin/components/forms/field-types/Email/index.tsx b/packages/payload/src/admin/components/forms/field-types/Email/index.tsx
index fc2b02f72b..d5adf7e88f 100644
--- a/packages/payload/src/admin/components/forms/field-types/Email/index.tsx
+++ b/packages/payload/src/admin/components/forms/field-types/Email/index.tsx
@@ -5,9 +5,9 @@ import type { Props } from './types'
 
 import { email } from '../../../../../fields/validations'
 import { getTranslation } from '../../../../../utilities/getTranslation'
-import Error from '../../Error'
+import DefaultError from '../../Error'
 import FieldDescription from '../../FieldDescription'
-import Label from '../../Label'
+import DefaultLabel from '../../Label'
 import useField from '../../useField'
 import withCondition from '../../withCondition'
 import './index.scss'
@@ -25,6 +25,7 @@ const Email: React.FC<Props> = (props) => {
       readOnly,
       style,
       width,
+      components: { Error, Label, BeforeInput, AfterInput } = {},
     } = {},
     label,
     path: pathFromProps,
@@ -51,6 +52,9 @@ const Email: React.FC<Props> = (props) => {
 
   const { errorMessage, setValue, showError, value } = fieldType
 
+  const ErrorComp = Error || DefaultError
+  const LabelComp = Label || DefaultLabel
+
   return (
     <div
       className={[fieldBaseClass, 'email', className, showError && 'error', readOnly && 'read-only']
@@ -61,18 +65,22 @@ const Email: React.FC<Props> = (props) => {
         width,
       }}
     >
-      <Error message={errorMessage} showError={showError} />
-      <Label htmlFor={`field-${path.replace(/\./g, '__')}`} label={label} required={required} />
-      <input
-        autoComplete={autoComplete}
-        disabled={Boolean(readOnly)}
-        id={`field-${path.replace(/\./g, '__')}`}
-        name={path}
-        onChange={setValue}
-        placeholder={getTranslation(placeholder, i18n)}
-        type="email"
-        value={(value as string) || ''}
-      />
+      <ErrorComp message={errorMessage} showError={showError} />
+      <LabelComp htmlFor={`field-${path.replace(/\./g, '__')}`} label={label} required={required} />
+      <div className="input-wrapper">
+        {BeforeInput}
+        <input
+          autoComplete={autoComplete}
+          disabled={Boolean(readOnly)}
+          id={`field-${path.replace(/\./g, '__')}`}
+          name={path}
+          onChange={setValue}
+          placeholder={getTranslation(placeholder, i18n)}
+          type="email"
+          value={(value as string) || ''}
+        />
+        {AfterInput}
+      </div>
       <FieldDescription description={description} value={value} />
     </div>
   )
diff --git a/packages/payload/src/admin/components/forms/field-types/JSON/index.tsx b/packages/payload/src/admin/components/forms/field-types/JSON/index.tsx
index 20b2d8625c..198b6ce24c 100644
--- a/packages/payload/src/admin/components/forms/field-types/JSON/index.tsx
+++ b/packages/payload/src/admin/components/forms/field-types/JSON/index.tsx
@@ -4,9 +4,9 @@ import type { Props } from './types'
 
 import { json } from '../../../../../fields/validations'
 import { CodeEditor } from '../../../elements/CodeEditor'
-import Error from '../../Error'
+import DefaultError from '../../Error'
 import FieldDescription from '../../FieldDescription'
-import Label from '../../Label'
+import DefaultLabel from '../../Label'
 import useField from '../../useField'
 import withCondition from '../../withCondition'
 import './index.scss'
@@ -17,13 +17,25 @@ const baseClass = 'json-field'
 const JSONField: React.FC<Props> = (props) => {
   const {
     name,
-    admin: { className, condition, description, editorOptions, readOnly, style, width } = {},
+    admin: {
+      className,
+      condition,
+      description,
+      editorOptions,
+      readOnly,
+      style,
+      width,
+      components: { Error, Label } = {},
+    } = {},
     label,
     path: pathFromProps,
     required,
     validate = json,
   } = props
 
+  const ErrorComp = Error || DefaultError
+  const LabelComp = Label || DefaultLabel
+
   const path = pathFromProps || name
   const [stringValue, setStringValue] = useState<string>()
   const [jsonError, setJsonError] = useState<string>()
@@ -76,8 +88,8 @@ const JSONField: React.FC<Props> = (props) => {
         width,
       }}
     >
-      <Error message={errorMessage} showError={showError} />
-      <Label htmlFor={`field-${path}`} label={label} required={required} />
+      <ErrorComp message={errorMessage} showError={showError} />
+      <LabelComp htmlFor={`field-${path}`} label={label} required={required} />
       <CodeEditor
         defaultLanguage="json"
         onChange={handleChange}
diff --git a/packages/payload/src/admin/components/forms/field-types/Number/index.tsx b/packages/payload/src/admin/components/forms/field-types/Number/index.tsx
index a22fb591dd..a6ef7c7c39 100644
--- a/packages/payload/src/admin/components/forms/field-types/Number/index.tsx
+++ b/packages/payload/src/admin/components/forms/field-types/Number/index.tsx
@@ -8,9 +8,9 @@ import { number } from '../../../../../fields/validations'
 import { getTranslation } from '../../../../../utilities/getTranslation'
 import { isNumber } from '../../../../../utilities/isNumber'
 import ReactSelect from '../../../elements/ReactSelect'
-import Error from '../../Error'
+import DefaultError from '../../Error'
 import FieldDescription from '../../FieldDescription'
-import Label from '../../Label'
+import DefaultLabel from '../../Label'
 import useField from '../../useField'
 import withCondition from '../../withCondition'
 import './index.scss'
@@ -19,7 +19,17 @@ import { fieldBaseClass } from '../shared'
 const NumberField: React.FC<Props> = (props) => {
   const {
     name,
-    admin: { className, condition, description, placeholder, readOnly, step, style, width } = {},
+    admin: {
+      className,
+      condition,
+      description,
+      placeholder,
+      readOnly,
+      step,
+      style,
+      width,
+      components: { Error, Label, BeforeInput, AfterInput } = {},
+    } = {},
     hasMany,
     label,
     max,
@@ -31,6 +41,9 @@ const NumberField: React.FC<Props> = (props) => {
     validate = number,
   } = props
 
+  const ErrorComp = Error || DefaultError
+  const LabelComp = Label || DefaultLabel
+
   const { i18n, t } = useTranslation()
 
   const path = pathFromProps || name
@@ -118,8 +131,8 @@ const NumberField: React.FC<Props> = (props) => {
         width,
       }}
     >
-      <Error message={errorMessage} showError={showError} />
-      <Label htmlFor={`field-${path.replace(/\./g, '__')}`} label={label} required={required} />
+      <ErrorComp message={errorMessage} showError={showError} />
+      <LabelComp htmlFor={`field-${path.replace(/\./g, '__')}`} label={label} required={required} />
       {hasMany ? (
         <ReactSelect
           className={`field-${path.replace(/\./g, '__')}`}
@@ -148,21 +161,25 @@ const NumberField: React.FC<Props> = (props) => {
           value={valueToRender as Option[]}
         />
       ) : (
-        <input
-          disabled={readOnly}
-          id={`field-${path.replace(/\./g, '__')}`}
-          name={path}
-          onChange={handleChange}
-          onWheel={(e) => {
-            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-            // @ts-ignore
-            e.target.blur()
-          }}
-          placeholder={getTranslation(placeholder, i18n)}
-          step={step}
-          type="number"
-          value={typeof value === 'number' ? value : ''}
-        />
+        <div className="input-wrapper">
+          {BeforeInput}
+          <input
+            disabled={readOnly}
+            id={`field-${path.replace(/\./g, '__')}`}
+            name={path}
+            onChange={handleChange}
+            onWheel={(e) => {
+              // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+              // @ts-ignore
+              e.target.blur()
+            }}
+            placeholder={getTranslation(placeholder, i18n)}
+            step={step}
+            type="number"
+            value={typeof value === 'number' ? value : ''}
+          />
+          {AfterInput}
+        </div>
       )}
 
       <FieldDescription description={description} value={value} />
diff --git a/packages/payload/src/admin/components/forms/field-types/Point/index.tsx b/packages/payload/src/admin/components/forms/field-types/Point/index.tsx
index 0edb99202c..77ac8cb2ff 100644
--- a/packages/payload/src/admin/components/forms/field-types/Point/index.tsx
+++ b/packages/payload/src/admin/components/forms/field-types/Point/index.tsx
@@ -5,9 +5,9 @@ import type { Props } from './types'
 
 import { point } from '../../../../../fields/validations'
 import { getTranslation } from '../../../../../utilities/getTranslation'
-import Error from '../../Error'
+import DefaultError from '../../Error'
 import FieldDescription from '../../FieldDescription'
-import Label from '../../Label'
+import DefaultLabel from '../../Label'
 import useField from '../../useField'
 import withCondition from '../../withCondition'
 import './index.scss'
@@ -18,13 +18,26 @@ const baseClass = 'point'
 const PointField: React.FC<Props> = (props) => {
   const {
     name,
-    admin: { className, condition, description, placeholder, readOnly, step, style, width } = {},
+    admin: {
+      className,
+      condition,
+      description,
+      placeholder,
+      readOnly,
+      step,
+      style,
+      width,
+      components: { Error, Label, BeforeInput, AfterInput } = {},
+    } = {},
     label,
     path: pathFromProps,
     required,
     validate = point,
   } = props
 
+  const ErrorComp = Error || DefaultError
+  const LabelComp = Label || DefaultLabel
+
   const path = pathFromProps || name
 
   const { i18n, t } = useTranslation('fields')
@@ -76,41 +89,49 @@ const PointField: React.FC<Props> = (props) => {
         width,
       }}
     >
-      <Error message={errorMessage} showError={showError} />
+      <ErrorComp message={errorMessage} showError={showError} />
       <ul className={`${baseClass}__wrap`}>
         <li>
-          <Label
+          <LabelComp
             htmlFor={`field-longitude-${path.replace(/\./g, '__')}`}
             label={`${getTranslation(label || name, i18n)} - ${t('longitude')}`}
             required={required}
           />
-          <input
-            disabled={readOnly}
-            id={`field-longitude-${path.replace(/\./g, '__')}`}
-            name={`${path}.longitude`}
-            onChange={(e) => handleChange(e, 0)}
-            placeholder={getTranslation(placeholder, i18n)}
-            step={step}
-            type="number"
-            value={value && typeof value[0] === 'number' ? value[0] : ''}
-          />
+          <div className="input-wrapper">
+            {BeforeInput}
+            <input
+              disabled={readOnly}
+              id={`field-longitude-${path.replace(/\./g, '__')}`}
+              name={`${path}.longitude`}
+              onChange={(e) => handleChange(e, 0)}
+              placeholder={getTranslation(placeholder, i18n)}
+              step={step}
+              type="number"
+              value={value && typeof value[0] === 'number' ? value[0] : ''}
+            />
+            {AfterInput}
+          </div>
         </li>
         <li>
-          <Label
+          <LabelComp
             htmlFor={`field-latitude-${path.replace(/\./g, '__')}`}
             label={`${getTranslation(label || name, i18n)} - ${t('latitude')}`}
             required={required}
           />
-          <input
-            disabled={readOnly}
-            id={`field-latitude-${path.replace(/\./g, '__')}`}
-            name={`${path}.latitude`}
-            onChange={(e) => handleChange(e, 1)}
-            placeholder={getTranslation(placeholder, i18n)}
-            step={step}
-            type="number"
-            value={value && typeof value[1] === 'number' ? value[1] : ''}
-          />
+          <div className="input-wrapper">
+            {BeforeInput}
+            <input
+              disabled={readOnly}
+              id={`field-latitude-${path.replace(/\./g, '__')}`}
+              name={`${path}.latitude`}
+              onChange={(e) => handleChange(e, 1)}
+              placeholder={getTranslation(placeholder, i18n)}
+              step={step}
+              type="number"
+              value={value && typeof value[1] === 'number' ? value[1] : ''}
+            />
+            {AfterInput}
+          </div>
         </li>
       </ul>
       <FieldDescription description={description} value={value} />
diff --git a/packages/payload/src/admin/components/forms/field-types/RadioGroup/Input.tsx b/packages/payload/src/admin/components/forms/field-types/RadioGroup/Input.tsx
index 2216e38626..f0e9bdb0c9 100644
--- a/packages/payload/src/admin/components/forms/field-types/RadioGroup/Input.tsx
+++ b/packages/payload/src/admin/components/forms/field-types/RadioGroup/Input.tsx
@@ -5,9 +5,9 @@ import type { Description } from '../../FieldDescription/types'
 import type { OnChange } from './types'
 
 import { optionIsObject } from '../../../../../fields/config/types'
-import Error from '../../Error'
+import DefaultError from '../../Error'
 import FieldDescription from '../../FieldDescription'
-import Label from '../../Label'
+import DefaultLabel from '../../Label'
 import RadioInput from './RadioInput'
 import './index.scss'
 import { fieldBaseClass } from '../shared'
@@ -28,6 +28,8 @@ export type RadioGroupInputProps = Omit<RadioField, 'type'> & {
   style?: React.CSSProperties
   value?: string
   width?: string
+  Error?: React.ComponentType<any>
+  Label?: React.ComponentType<any>
 }
 
 const RadioGroupInput: React.FC<RadioGroupInputProps> = (props) => {
@@ -47,8 +49,13 @@ const RadioGroupInput: React.FC<RadioGroupInputProps> = (props) => {
     style,
     value,
     width,
+    Error,
+    Label,
   } = props
 
+  const ErrorComp = Error || DefaultError
+  const LabelComp = Label || DefaultLabel
+
   const path = pathFromProps || name
 
   return (
@@ -69,9 +76,9 @@ const RadioGroupInput: React.FC<RadioGroupInputProps> = (props) => {
       }}
     >
       <div className={`${baseClass}__error-wrap`}>
-        <Error message={errorMessage} showError={showError} />
+        <ErrorComp message={errorMessage} showError={showError} />
       </div>
-      <Label htmlFor={`field-${path}`} label={label} required={required} />
+      <LabelComp htmlFor={`field-${path}`} label={label} required={required} />
       <ul className={`${baseClass}--group`} id={`field-${path.replace(/\./g, '__')}`}>
         {options.map((option) => {
           let optionValue = ''
diff --git a/packages/payload/src/admin/components/forms/field-types/RadioGroup/index.tsx b/packages/payload/src/admin/components/forms/field-types/RadioGroup/index.tsx
index bff9761f33..116cad9dae 100644
--- a/packages/payload/src/admin/components/forms/field-types/RadioGroup/index.tsx
+++ b/packages/payload/src/admin/components/forms/field-types/RadioGroup/index.tsx
@@ -18,6 +18,7 @@ const RadioGroup: React.FC<Props> = (props) => {
       readOnly,
       style,
       width,
+      components: { Error, Label } = {},
     } = {},
     label,
     options,
@@ -57,6 +58,8 @@ const RadioGroup: React.FC<Props> = (props) => {
       style={style}
       value={value}
       width={width}
+      Error={Error}
+      Label={Label}
     />
   )
 }
diff --git a/packages/payload/src/admin/components/forms/field-types/Relationship/index.tsx b/packages/payload/src/admin/components/forms/field-types/Relationship/index.tsx
index f4a684f30e..f9e7e294e1 100644
--- a/packages/payload/src/admin/components/forms/field-types/Relationship/index.tsx
+++ b/packages/payload/src/admin/components/forms/field-types/Relationship/index.tsx
@@ -15,10 +15,10 @@ import { useAuth } from '../../../utilities/Auth'
 import { useConfig } from '../../../utilities/Config'
 import { GetFilterOptions } from '../../../utilities/GetFilterOptions'
 import { useLocale } from '../../../utilities/Locale'
-import Error from '../../Error'
+import DefaultError from '../../Error'
 import FieldDescription from '../../FieldDescription'
 import { useFormProcessing } from '../../Form/context'
-import Label from '../../Label'
+import DefaultLabel from '../../Label'
 import useField from '../../useField'
 import withCondition from '../../withCondition'
 import { fieldBaseClass } from '../shared'
@@ -46,6 +46,7 @@ const Relationship: React.FC<Props> = (props) => {
       readOnly,
       style,
       width,
+      components: { Error, Label } = {},
     } = {},
     filterOptions,
     hasMany,
@@ -56,6 +57,9 @@ const Relationship: React.FC<Props> = (props) => {
     validate = relationship,
   } = props
 
+  const ErrorComp = Error || DefaultError
+  const LabelComp = Label || DefaultLabel
+
   const config = useConfig()
 
   const {
@@ -412,8 +416,8 @@ const Relationship: React.FC<Props> = (props) => {
         width,
       }}
     >
-      <Error message={errorMessage} showError={showError} />
-      <Label htmlFor={pathOrName} label={label} required={required} />
+      <ErrorComp message={errorMessage} showError={showError} />
+      <LabelComp htmlFor={pathOrName} label={label} required={required} />
       <GetFilterOptions
         {...{
           filterOptions,
diff --git a/packages/payload/src/admin/components/forms/field-types/Select/Input.tsx b/packages/payload/src/admin/components/forms/field-types/Select/Input.tsx
index 88600d9a8e..e06d1df4ac 100644
--- a/packages/payload/src/admin/components/forms/field-types/Select/Input.tsx
+++ b/packages/payload/src/admin/components/forms/field-types/Select/Input.tsx
@@ -7,9 +7,9 @@ import type { Description } from '../../FieldDescription/types'
 
 import { getTranslation } from '../../../../../utilities/getTranslation'
 import ReactSelect from '../../../elements/ReactSelect'
-import Error from '../../Error'
+import DefaultError from '../../Error'
 import FieldDescription from '../../FieldDescription'
-import Label from '../../Label'
+import DefaultLabel from '../../Label'
 import { fieldBaseClass } from '../shared'
 import './index.scss'
 
@@ -29,6 +29,8 @@ export type SelectInputProps = Omit<SelectField, 'options' | 'type' | 'value'> &
   style?: React.CSSProperties
   value?: string | string[]
   width?: string
+  Error?: React.ComponentType<any>
+  Label?: React.ComponentType<any>
 }
 
 const SelectInput: React.FC<SelectInputProps> = (props) => {
@@ -50,10 +52,15 @@ const SelectInput: React.FC<SelectInputProps> = (props) => {
     style,
     value,
     width,
+    Error,
+    Label,
   } = props
 
   const { i18n } = useTranslation()
 
+  const ErrorComp = Error || DefaultError
+  const LabelComp = Label || DefaultLabel
+
   let valueToRender = defaultValue
 
   if (hasMany && Array.isArray(value)) {
@@ -89,8 +96,8 @@ const SelectInput: React.FC<SelectInputProps> = (props) => {
         width,
       }}
     >
-      <Error message={errorMessage} showError={showError} />
-      <Label htmlFor={`field-${path.replace(/\./g, '__')}`} label={label} required={required} />
+      <ErrorComp message={errorMessage} showError={showError} />
+      <LabelComp htmlFor={`field-${path.replace(/\./g, '__')}`} label={label} required={required} />
       <ReactSelect
         disabled={readOnly}
         isClearable={isClearable}
diff --git a/packages/payload/src/admin/components/forms/field-types/Select/index.tsx b/packages/payload/src/admin/components/forms/field-types/Select/index.tsx
index ab593dcd2f..eb116139e9 100644
--- a/packages/payload/src/admin/components/forms/field-types/Select/index.tsx
+++ b/packages/payload/src/admin/components/forms/field-types/Select/index.tsx
@@ -32,6 +32,7 @@ const Select: React.FC<Props> = (props) => {
       readOnly,
       style,
       width,
+      components: { Error, Label } = {},
     } = {},
     hasMany,
     label,
@@ -103,6 +104,8 @@ const Select: React.FC<Props> = (props) => {
       style={style}
       value={value as string | string[]}
       width={width}
+      Error={Error}
+      Label={Label}
     />
   )
 }
diff --git a/packages/payload/src/admin/components/forms/field-types/Text/Input.tsx b/packages/payload/src/admin/components/forms/field-types/Text/Input.tsx
index fd17789a72..358bc00b43 100644
--- a/packages/payload/src/admin/components/forms/field-types/Text/Input.tsx
+++ b/packages/payload/src/admin/components/forms/field-types/Text/Input.tsx
@@ -7,9 +7,9 @@ import type { TextField } from '../../../../../fields/config/types'
 import type { Description } from '../../FieldDescription/types'
 
 import { getTranslation } from '../../../../../utilities/getTranslation'
-import Error from '../../Error'
+import DefaultError from '../../Error'
 import FieldDescription from '../../FieldDescription'
-import Label from '../../Label'
+import DefaultLabel from '../../Label'
 import { fieldBaseClass } from '../shared'
 import './index.scss'
 
@@ -29,6 +29,10 @@ export type TextInputProps = Omit<TextField, 'type'> & {
   style?: React.CSSProperties
   value?: string
   width?: string
+  Error?: React.ComponentType<any>
+  Label?: React.ComponentType<any>
+  BeforeInput?: React.ReactElement<any>[]
+  AfterInput?: React.ReactElement<any>[]
 }
 
 const TextInput: React.FC<TextInputProps> = (props) => {
@@ -49,10 +53,17 @@ const TextInput: React.FC<TextInputProps> = (props) => {
     style,
     value,
     width,
+    Error,
+    Label,
+    BeforeInput,
+    AfterInput,
   } = props
 
   const { i18n } = useTranslation()
 
+  const ErrorComp = Error || DefaultError
+  const LabelComp = Label || DefaultLabel
+
   return (
     <div
       className={[fieldBaseClass, 'text', className, showError && 'error', readOnly && 'read-only']
@@ -63,20 +74,24 @@ const TextInput: React.FC<TextInputProps> = (props) => {
         width,
       }}
     >
-      <Error message={errorMessage} showError={showError} />
-      <Label htmlFor={`field-${path.replace(/\./g, '__')}`} label={label} required={required} />
-      <input
-        data-rtl={rtl}
-        disabled={readOnly}
-        id={`field-${path.replace(/\./g, '__')}`}
-        name={path}
-        onChange={onChange}
-        onKeyDown={onKeyDown}
-        placeholder={getTranslation(placeholder, i18n)}
-        ref={inputRef}
-        type="text"
-        value={value || ''}
-      />
+      <ErrorComp message={errorMessage} showError={showError} />
+      <LabelComp htmlFor={`field-${path.replace(/\./g, '__')}`} label={label} required={required} />
+      <div className="input-wrapper">
+        {BeforeInput}
+        <input
+          data-rtl={rtl}
+          disabled={readOnly}
+          id={`field-${path.replace(/\./g, '__')}`}
+          name={path}
+          onChange={onChange}
+          onKeyDown={onKeyDown}
+          placeholder={getTranslation(placeholder, i18n)}
+          ref={inputRef}
+          type="text"
+          value={value || ''}
+        />
+        {AfterInput}
+      </div>
       <FieldDescription
         className={`field-description-${path.replace(/\./g, '__')}`}
         description={description}
diff --git a/packages/payload/src/admin/components/forms/field-types/Text/index.tsx b/packages/payload/src/admin/components/forms/field-types/Text/index.tsx
index e1fcfb6115..8f855a6dc9 100644
--- a/packages/payload/src/admin/components/forms/field-types/Text/index.tsx
+++ b/packages/payload/src/admin/components/forms/field-types/Text/index.tsx
@@ -13,7 +13,17 @@ import TextInput from './Input'
 const Text: React.FC<Props> = (props) => {
   const {
     name,
-    admin: { className, condition, description, placeholder, readOnly, rtl, style, width } = {},
+    admin: {
+      className,
+      condition,
+      description,
+      placeholder,
+      readOnly,
+      rtl,
+      style,
+      width,
+      components: { Error, Label, BeforeInput, AfterInput } = {},
+    } = {},
     inputRef,
     label,
     localized,
@@ -68,6 +78,10 @@ const Text: React.FC<Props> = (props) => {
       style={style}
       value={value}
       width={width}
+      Error={Error}
+      Label={Label}
+      BeforeInput={BeforeInput}
+      AfterInput={AfterInput}
     />
   )
 }
diff --git a/packages/payload/src/admin/components/forms/field-types/Textarea/Input.tsx b/packages/payload/src/admin/components/forms/field-types/Textarea/Input.tsx
index 8c2cd8114f..0127db81e9 100644
--- a/packages/payload/src/admin/components/forms/field-types/Textarea/Input.tsx
+++ b/packages/payload/src/admin/components/forms/field-types/Textarea/Input.tsx
@@ -7,9 +7,9 @@ import type { TextareaField } from '../../../../../fields/config/types'
 import type { Description } from '../../FieldDescription/types'
 
 import { getTranslation } from '../../../../../utilities/getTranslation'
-import Error from '../../Error'
+import DefaultError from '../../Error'
 import FieldDescription from '../../FieldDescription'
-import Label from '../../Label'
+import DefaultLabel from '../../Label'
 import './index.scss'
 import { fieldBaseClass } from '../shared'
 
@@ -28,6 +28,10 @@ export type TextAreaInputProps = Omit<TextareaField, 'type'> & {
   style?: React.CSSProperties
   value?: string
   width?: string
+  Error?: React.ComponentType<any>
+  Label?: React.ComponentType<any>
+  BeforeInput?: React.ReactElement<any>[]
+  AfterInput?: React.ReactElement<any>[]
 }
 
 const TextareaInput: React.FC<TextAreaInputProps> = (props) => {
@@ -47,10 +51,17 @@ const TextareaInput: React.FC<TextAreaInputProps> = (props) => {
     style,
     value,
     width,
+    Error,
+    Label,
+    BeforeInput,
+    AfterInput,
   } = props
 
   const { i18n } = useTranslation()
 
+  const ErrorComp = Error || DefaultError
+  const LabelComp = Label || DefaultLabel
+
   return (
     <div
       className={[
@@ -67,11 +78,12 @@ const TextareaInput: React.FC<TextAreaInputProps> = (props) => {
         width,
       }}
     >
-      <Error message={errorMessage} showError={showError} />
-      <Label htmlFor={`field-${path.replace(/\./g, '__')}`} label={label} required={required} />
+      <ErrorComp message={errorMessage} showError={showError} />
+      <LabelComp htmlFor={`field-${path.replace(/\./g, '__')}`} label={label} required={required} />
       <label className="textarea-outer" htmlFor={`field-${path.replace(/\./g, '__')}`}>
         <div className="textarea-inner">
           <div className="textarea-clone" data-value={value || placeholder || ''} />
+          {BeforeInput}
           <textarea
             className="textarea-element"
             data-rtl={rtl}
@@ -83,6 +95,7 @@ const TextareaInput: React.FC<TextAreaInputProps> = (props) => {
             rows={rows}
             value={value || ''}
           />
+          {AfterInput}
         </div>
       </label>
       <FieldDescription description={description} value={value} />
diff --git a/packages/payload/src/admin/components/forms/field-types/Textarea/index.tsx b/packages/payload/src/admin/components/forms/field-types/Textarea/index.tsx
index 86a554df00..6f55a023e2 100644
--- a/packages/payload/src/admin/components/forms/field-types/Textarea/index.tsx
+++ b/packages/payload/src/admin/components/forms/field-types/Textarea/index.tsx
@@ -26,6 +26,7 @@ const Textarea: React.FC<Props> = (props) => {
       rtl,
       style,
       width,
+      components: { Error, Label, BeforeInput, AfterInput } = {},
     } = {},
     label,
     localized,
@@ -82,6 +83,10 @@ const Textarea: React.FC<Props> = (props) => {
       style={style}
       value={value as string}
       width={width}
+      Error={Error}
+      Label={Label}
+      BeforeInput={BeforeInput}
+      AfterInput={AfterInput}
     />
   )
 }
diff --git a/packages/payload/src/admin/components/forms/field-types/Upload/Input.tsx b/packages/payload/src/admin/components/forms/field-types/Upload/Input.tsx
index 0ee7dd084f..3af93d2030 100644
--- a/packages/payload/src/admin/components/forms/field-types/Upload/Input.tsx
+++ b/packages/payload/src/admin/components/forms/field-types/Upload/Input.tsx
@@ -15,9 +15,9 @@ import { useDocumentDrawer } from '../../../elements/DocumentDrawer'
 import FileDetails from '../../../elements/FileDetails'
 import { useListDrawer } from '../../../elements/ListDrawer'
 import { GetFilterOptions } from '../../../utilities/GetFilterOptions'
-import Error from '../../Error'
+import DefaultError from '../../Error'
 import FieldDescription from '../../FieldDescription'
-import Label from '../../Label'
+import DefaultLabel from '../../Label'
 import { fieldBaseClass } from '../shared'
 import './index.scss'
 
@@ -41,6 +41,8 @@ export type UploadInputProps = Omit<UploadField, 'type'> & {
   style?: React.CSSProperties
   value?: string
   width?: string
+  Error?: React.ComponentType<any>
+  Label?: React.ComponentType<any>
 }
 
 const UploadInput: React.FC<UploadInputProps> = (props) => {
@@ -62,10 +64,15 @@ const UploadInput: React.FC<UploadInputProps> = (props) => {
     style,
     value,
     width,
+    Error,
+    Label,
   } = props
 
   const { i18n, t } = useTranslation('fields')
 
+  const ErrorComp = Error || DefaultError
+  const LabelComp = Label || DefaultLabel
+
   const [file, setFile] = useState(undefined)
   const [missingFile, setMissingFile] = useState(false)
   const [collectionSlugs] = useState([collection?.slug])
@@ -149,8 +156,8 @@ const UploadInput: React.FC<UploadInputProps> = (props) => {
           setFilterOptionsResult,
         }}
       />
-      <Error message={errorMessage} showError={showError} />
-      <Label htmlFor={`field-${path.replace(/\./g, '__')}`} label={label} required={required} />
+      <ErrorComp message={errorMessage} showError={showError} />
+      <LabelComp htmlFor={`field-${path.replace(/\./g, '__')}`} label={label} required={required} />
       {collection?.upload && (
         <React.Fragment>
           {file && !missingFile && (
diff --git a/packages/payload/src/admin/components/forms/field-types/Upload/index.tsx b/packages/payload/src/admin/components/forms/field-types/Upload/index.tsx
index 7d2d00ca04..4425b5b13a 100644
--- a/packages/payload/src/admin/components/forms/field-types/Upload/index.tsx
+++ b/packages/payload/src/admin/components/forms/field-types/Upload/index.tsx
@@ -18,7 +18,15 @@ const Upload: React.FC<Props> = (props) => {
 
   const {
     name,
-    admin: { className, condition, description, readOnly, style, width } = {},
+    admin: {
+      className,
+      condition,
+      description,
+      readOnly,
+      style,
+      width,
+      components: { Error, Label } = {},
+    } = {},
     fieldTypes,
     filterOptions,
     label,
@@ -75,6 +83,8 @@ const Upload: React.FC<Props> = (props) => {
         style={style}
         value={value as string}
         width={width}
+        Error={Error}
+        Label={Label}
       />
     )
   }
diff --git a/packages/payload/src/fields/config/schema.ts b/packages/payload/src/fields/config/schema.ts
index f06bee858e..fa9fedb3f8 100644
--- a/packages/payload/src/fields/config/schema.ts
+++ b/packages/payload/src/fields/config/schema.ts
@@ -75,6 +75,12 @@ export const text = baseField.keys({
       .alternatives()
       .try(joi.object().pattern(joi.string(), [joi.string()]), joi.string()),
     rtl: joi.boolean(),
+    components: baseAdminComponentFields.keys({
+      Label: componentSchema,
+      Error: componentSchema,
+      BeforeInput: joi.array().items(componentSchema),
+      AfterInput: joi.array().items(componentSchema),
+    }),
   }),
   defaultValue: joi.alternatives().try(joi.string(), joi.func()),
   maxLength: joi.number(),
@@ -88,6 +94,18 @@ export const number = baseField.keys({
     autoComplete: joi.string(),
     placeholder: joi.string(),
     step: joi.number(),
+    components: baseAdminComponentFields.keys({
+      Label: componentSchema,
+      Error: componentSchema,
+      BeforeInput: joi
+        .array()
+        .items(componentSchema)
+        .when('hasMany', { not: true, otherwise: joi.forbidden() }),
+      AfterInput: joi
+        .array()
+        .items(componentSchema)
+        .when('hasMany', { not: true, otherwise: joi.forbidden() }),
+    }),
   }),
   defaultValue: joi.alternatives().try(joi.number(), joi.func()),
   hasMany: joi.boolean().default(false),
@@ -104,6 +122,12 @@ export const textarea = baseField.keys({
     placeholder: joi.string(),
     rows: joi.number(),
     rtl: joi.boolean(),
+    components: baseAdminComponentFields.keys({
+      Label: componentSchema,
+      Error: componentSchema,
+      BeforeInput: joi.array().items(componentSchema),
+      AfterInput: joi.array().items(componentSchema),
+    }),
   }),
   defaultValue: joi.alternatives().try(joi.string(), joi.func()),
   maxLength: joi.number(),
@@ -116,6 +140,12 @@ export const email = baseField.keys({
   admin: baseAdminFields.keys({
     autoComplete: joi.string(),
     placeholder: joi.string(),
+    components: baseAdminComponentFields.keys({
+      Label: componentSchema,
+      Error: componentSchema,
+      BeforeInput: joi.array().items(componentSchema),
+      AfterInput: joi.array().items(componentSchema),
+    }),
   }),
   defaultValue: joi.alternatives().try(joi.string(), joi.func()),
   maxLength: joi.number(),
@@ -128,6 +158,10 @@ export const code = baseField.keys({
   admin: baseAdminFields.keys({
     editorOptions: joi.object().unknown(), // Editor['options'] @monaco-editor/react
     language: joi.string(),
+    components: baseAdminComponentFields.keys({
+      Label: componentSchema,
+      Error: componentSchema,
+    }),
   }),
   defaultValue: joi.alternatives().try(joi.string(), joi.func()),
   type: joi.string().valid('code').required(),
@@ -135,6 +169,12 @@ export const code = baseField.keys({
 
 export const json = baseField.keys({
   name: joi.string().required(),
+  admin: baseAdminFields.keys({
+    components: baseAdminComponentFields.keys({
+      Label: componentSchema,
+      Error: componentSchema,
+    }),
+  }),
   defaultValue: joi.alternatives().try(joi.array(), joi.object()),
   type: joi.string().valid('json').required(),
 })
@@ -144,6 +184,10 @@ export const select = baseField.keys({
   admin: baseAdminFields.keys({
     isClearable: joi.boolean().default(false),
     isSortable: joi.boolean().default(false),
+    components: baseAdminComponentFields.keys({
+      Label: componentSchema,
+      Error: componentSchema,
+    }),
   }),
   defaultValue: joi
     .alternatives()
@@ -171,6 +215,10 @@ export const radio = baseField.keys({
   name: joi.string().required(),
   admin: baseAdminFields.keys({
     layout: joi.string().valid('vertical', 'horizontal'),
+    components: baseAdminComponentFields.keys({
+      Label: componentSchema,
+      Error: componentSchema,
+    }),
   }),
   defaultValue: joi.alternatives().try(joi.string().allow(''), joi.func()),
   options: joi
@@ -268,6 +316,12 @@ export const array = baseField.keys({
 
 export const upload = baseField.keys({
   name: joi.string().required(),
+  admin: baseAdminFields.keys({
+    components: baseAdminComponentFields.keys({
+      Label: componentSchema,
+      Error: componentSchema,
+    }),
+  }),
   defaultValue: joi.alternatives().try(joi.object(), joi.func()),
   filterOptions: joi.alternatives().try(joi.object(), joi.func()),
   maxDepth: joi.number(),
@@ -277,12 +331,28 @@ export const upload = baseField.keys({
 
 export const checkbox = baseField.keys({
   name: joi.string().required(),
+  admin: baseAdminFields.keys({
+    components: baseAdminComponentFields.keys({
+      Label: componentSchema,
+      Error: componentSchema,
+      BeforeInput: joi.array().items(componentSchema),
+      AfterInput: joi.array().items(componentSchema),
+    }),
+  }),
   defaultValue: joi.alternatives().try(joi.boolean(), joi.func()),
   type: joi.string().valid('checkbox').required(),
 })
 
 export const point = baseField.keys({
   name: joi.string().required(),
+  admin: baseAdminFields.keys({
+    components: baseAdminComponentFields.keys({
+      Label: componentSchema,
+      Error: componentSchema,
+      BeforeInput: joi.array().items(componentSchema),
+      AfterInput: joi.array().items(componentSchema),
+    }),
+  }),
   defaultValue: joi.alternatives().try(joi.array().items(joi.number()).max(2).min(2), joi.func()),
   type: joi.string().valid('point').required(),
 })
@@ -292,6 +362,10 @@ export const relationship = baseField.keys({
   admin: baseAdminFields.keys({
     allowCreate: joi.boolean().default(true),
     isSortable: joi.boolean().default(false),
+    components: baseAdminComponentFields.keys({
+      Label: componentSchema,
+      Error: componentSchema,
+    }),
   }),
   defaultValue: joi.alternatives().try(joi.func()),
   filterOptions: joi.alternatives().try(joi.object(), joi.func()),
@@ -382,6 +456,12 @@ export const date = baseField.keys({
       timeIntervals: joi.number(),
     }),
     placeholder: joi.string(),
+    components: baseAdminComponentFields.keys({
+      Label: componentSchema,
+      Error: componentSchema,
+      BeforeInput: joi.array().items(componentSchema),
+      AfterInput: joi.array().items(componentSchema),
+    }),
   }),
   defaultValue: joi.alternatives().try(joi.string(), joi.func()),
   type: joi.string().valid('date').required(),
diff --git a/packages/payload/src/fields/config/types.ts b/packages/payload/src/fields/config/types.ts
index d631f724f7..632bf846c5 100644
--- a/packages/payload/src/fields/config/types.ts
+++ b/packages/payload/src/fields/config/types.ts
@@ -15,6 +15,8 @@ import type { PayloadRequest, RequestContext } from '../../express/types'
 import type { SanitizedGlobalConfig } from '../../globals/config/types'
 import type { Payload } from '../../payload'
 import type { Operation, Where } from '../../types'
+import type { Props as ErrorProps } from '../../admin/components/forms/Error/types'
+import type { Props as LabelProps } from '../../admin/components/forms/Label/types'
 
 export type FieldHookArgs<T extends TypeWithID = any, P = any, S = any> = {
   /** The collection which the field belongs to. If the field belongs to a global, this will be null. */
@@ -158,6 +160,12 @@ export type NumberField = FieldBase & {
     placeholder?: Record<string, string> | string
     /** Set a value for the number field to increment / decrement using browser controls. */
     step?: number
+    components?: {
+      Error?: React.ComponentType<ErrorProps>
+      Label?: React.ComponentType<LabelProps>
+      BeforeInput?: React.ReactElement<any>[]
+      AfterInput?: React.ReactElement<any>[]
+    }
   }
   /** Maximum value accepted. Used in the default `validation` function. */
   max?: number
@@ -188,6 +196,12 @@ export type TextField = FieldBase & {
     autoComplete?: string
     placeholder?: Record<string, string> | string
     rtl?: boolean
+    components?: {
+      Error?: React.ComponentType<ErrorProps>
+      Label?: React.ComponentType<LabelProps>
+      BeforeInput?: React.ReactElement<any>[]
+      AfterInput?: React.ReactElement<any>[]
+    }
   }
   maxLength?: number
   minLength?: number
@@ -198,6 +212,12 @@ export type EmailField = FieldBase & {
   admin?: Admin & {
     autoComplete?: string
     placeholder?: Record<string, string> | string
+    components?: {
+      Error?: React.ComponentType<ErrorProps>
+      Label?: React.ComponentType<LabelProps>
+      BeforeInput?: React.ReactElement<any>[]
+      AfterInput?: React.ReactElement<any>[]
+    }
   }
   type: 'email'
 }
@@ -207,6 +227,12 @@ export type TextareaField = FieldBase & {
     placeholder?: Record<string, string> | string
     rows?: number
     rtl?: boolean
+    components?: {
+      Error?: React.ComponentType<ErrorProps>
+      Label?: React.ComponentType<LabelProps>
+      BeforeInput?: React.ReactElement<any>[]
+      AfterInput?: React.ReactElement<any>[]
+    }
   }
   maxLength?: number
   minLength?: number
@@ -215,12 +241,26 @@ export type TextareaField = FieldBase & {
 
 export type CheckboxField = FieldBase & {
   type: 'checkbox'
+  admin?: Admin & {
+    components?: {
+      Error?: React.ComponentType<ErrorProps>
+      Label?: React.ComponentType<LabelProps>
+      BeforeInput?: React.ReactElement<any>[]
+      AfterInput?: React.ReactElement<any>[]
+    }
+  }
 }
 
 export type DateField = FieldBase & {
   admin?: Admin & {
     date?: ConditionalDateProps
     placeholder?: Record<string, string> | string
+    components?: {
+      Error?: React.ComponentType<ErrorProps>
+      Label?: React.ComponentType<LabelProps>
+      BeforeInput?: React.ReactElement<any>[]
+      AfterInput?: React.ReactElement<any>[]
+    }
   }
   type: 'date'
 }
@@ -315,6 +355,12 @@ export type UIField = {
 }
 
 export type UploadField = FieldBase & {
+  admin?: {
+    components?: {
+      Error?: React.ComponentType<ErrorProps>
+      Label?: React.ComponentType<LabelProps>
+    }
+  }
   filterOptions?: FilterOptions
   maxDepth?: number
   relationTo: string
@@ -324,6 +370,10 @@ export type UploadField = FieldBase & {
 type CodeAdmin = Admin & {
   editorOptions?: EditorProps['options']
   language?: string
+  components?: {
+    Error?: React.ComponentType<ErrorProps>
+    Label?: React.ComponentType<LabelProps>
+  }
 }
 
 export type CodeField = Omit<FieldBase, 'admin'> & {
@@ -335,6 +385,10 @@ export type CodeField = Omit<FieldBase, 'admin'> & {
 
 type JSONAdmin = Admin & {
   editorOptions?: EditorProps['options']
+  components?: {
+    Error?: React.ComponentType<ErrorProps>
+    Label?: React.ComponentType<LabelProps>
+  }
 }
 
 export type JSONField = Omit<FieldBase, 'admin'> & {
@@ -346,6 +400,10 @@ export type SelectField = FieldBase & {
   admin?: Admin & {
     isClearable?: boolean
     isSortable?: boolean
+    components?: {
+      Error?: React.ComponentType<ErrorProps>
+      Label?: React.ComponentType<LabelProps>
+    }
   }
   hasMany?: boolean
   options: Option[]
@@ -356,6 +414,10 @@ export type RelationshipField = FieldBase & {
   admin?: Admin & {
     allowCreate?: boolean
     isSortable?: boolean
+    components?: {
+      Error?: React.ComponentType<ErrorProps>
+      Label?: React.ComponentType<LabelProps>
+    }
   }
   filterOptions?: FilterOptions
   hasMany?: boolean
@@ -440,6 +502,10 @@ export type ArrayField = FieldBase & {
 export type RadioField = FieldBase & {
   admin?: Admin & {
     layout?: 'horizontal' | 'vertical'
+    components?: {
+      Error?: React.ComponentType<ErrorProps>
+      Label?: React.ComponentType<LabelProps>
+    }
   }
   options: Option[]
   type: 'radio'
diff --git a/test/fields/collections/Text/AfterInput.tsx b/test/fields/collections/Text/AfterInput.tsx
new file mode 100644
index 0000000000..e74f60e036
--- /dev/null
+++ b/test/fields/collections/Text/AfterInput.tsx
@@ -0,0 +1,9 @@
+'use client'
+
+import React from 'react'
+
+const AfterInputImpl: React.FC = () => {
+  return <label className="after-input">#after-input</label>
+}
+
+export const AfterInput = <AfterInputImpl />
diff --git a/test/fields/collections/Text/BeforeInput.tsx b/test/fields/collections/Text/BeforeInput.tsx
new file mode 100644
index 0000000000..6d15d2b5ac
--- /dev/null
+++ b/test/fields/collections/Text/BeforeInput.tsx
@@ -0,0 +1,9 @@
+'use client'
+
+import React from 'react'
+
+const BeforeInputImpl: React.FC = () => {
+  return <label className="before-input">#before-input</label>
+}
+
+export const BeforeInput = <BeforeInputImpl />
diff --git a/test/fields/collections/Text/CustomError.tsx b/test/fields/collections/Text/CustomError.tsx
new file mode 100644
index 0000000000..ca3c56997f
--- /dev/null
+++ b/test/fields/collections/Text/CustomError.tsx
@@ -0,0 +1,15 @@
+import React from 'react'
+
+import type { Props } from '../../../../packages/payload/src/admin/components/forms/Error/types'
+
+const CustomError: React.FC<Props> = (props) => {
+  const { showError = false } = props
+
+  if (showError) {
+    return <div className="custom-error">#custom-error</div>
+  }
+
+  return null
+}
+
+export default CustomError
diff --git a/test/fields/collections/Text/CustomLabel.tsx b/test/fields/collections/Text/CustomLabel.tsx
new file mode 100644
index 0000000000..7231a1e958
--- /dev/null
+++ b/test/fields/collections/Text/CustomLabel.tsx
@@ -0,0 +1,13 @@
+'use client'
+
+import React from 'react'
+
+const CustomLabel: React.FC<{ htmlFor: string }> = ({ htmlFor }) => {
+  return (
+    <label htmlFor={htmlFor} className="custom-label">
+      #label
+    </label>
+  )
+}
+
+export default CustomLabel
diff --git a/test/fields/collections/Text/index.ts b/test/fields/collections/Text/index.ts
index ec190826da..632e4f53cb 100644
--- a/test/fields/collections/Text/index.ts
+++ b/test/fields/collections/Text/index.ts
@@ -1,51 +1,51 @@
 import type { CollectionConfig } from '../../../../packages/payload/src/collections/config/types'
 
-import { textFieldsSlug } from '../../slugs'
-
-export const defaultText = 'default-text'
+import { AfterInput } from './AfterInput'
+import { BeforeInput } from './BeforeInput'
+import CustomError from './CustomError'
+import CustomLabel from './CustomLabel'
+import { defaultText, textFieldsSlug } from './shared'
 
 const TextFields: CollectionConfig = {
-  slug: textFieldsSlug,
   admin: {
     useAsTitle: 'text',
   },
   fields: [
     {
       name: 'text',
-      type: 'text',
       required: true,
+      type: 'text',
     },
     {
       name: 'localizedText',
-      type: 'text',
       localized: true,
+      type: 'text',
     },
     {
       name: 'i18nText',
-      type: 'text',
-      label: {
-        en: 'Text en',
-        es: 'Text es',
-      },
       admin: {
-        placeholder: {
-          en: 'en placeholder',
-          es: 'es placeholder',
-        },
         description: {
           en: 'en description',
           es: 'es description',
         },
+        placeholder: {
+          en: 'en placeholder',
+          es: 'es placeholder',
+        },
       },
+      label: {
+        en: 'Text en',
+        es: 'Text es',
+      },
+      type: 'text',
     },
     {
       name: 'defaultFunction',
-      type: 'text',
       defaultValue: () => defaultText,
+      type: 'text',
     },
     {
       name: 'defaultAsync',
-      type: 'text',
       defaultValue: async (): Promise<string> => {
         return new Promise((resolve) =>
           setTimeout(() => {
@@ -53,25 +53,25 @@ const TextFields: CollectionConfig = {
           }, 1),
         )
       },
+      type: 'text',
     },
     {
-      label: 'Override the 40k text length default',
       name: 'overrideLength',
-      type: 'text',
+      label: 'Override the 40k text length default',
       maxLength: 50000,
+      type: 'text',
     },
     {
       name: 'fieldWithDefaultValue',
-      type: 'text',
       defaultValue: async () => {
         const defaultValue = new Promise((resolve) => setTimeout(() => resolve('some-value'), 1000))
 
         return defaultValue
       },
+      type: 'text',
     },
     {
       name: 'dependentOnFieldWithDefaultValue',
-      type: 'text',
       hooks: {
         beforeChange: [
           ({ data }) => {
@@ -79,13 +79,39 @@ const TextFields: CollectionConfig = {
           },
         ],
       },
+      type: 'text',
+    },
+    {
+      name: 'customLabel',
+      admin: {
+        components: {
+          Label: CustomLabel,
+        },
+      },
+      type: 'text',
+    },
+    {
+      name: 'customError',
+      admin: {
+        components: {
+          Error: CustomError,
+        },
+      },
+      minLength: 3,
+      type: 'text',
+    },
+    {
+      name: 'beforeAndAfterInput',
+      admin: {
+        components: {
+          AfterInput: [AfterInput],
+          BeforeInput: [BeforeInput],
+        },
+      },
+      type: 'text',
     },
   ],
-}
-
-export const textDoc = {
-  text: 'Seeded text document',
-  localizedText: 'Localized text',
+  slug: textFieldsSlug,
 }
 
 export default TextFields
diff --git a/test/fields/collections/Text/shared.ts b/test/fields/collections/Text/shared.ts
new file mode 100644
index 0000000000..bc2716a4e5
--- /dev/null
+++ b/test/fields/collections/Text/shared.ts
@@ -0,0 +1,6 @@
+export const defaultText = 'default-text'
+export const textFieldsSlug = 'text-fields'
+export const textDoc = {
+  text: 'Seeded text document',
+  localizedText: 'Localized text',
+}
diff --git a/test/fields/e2e.spec.ts b/test/fields/e2e.spec.ts
index 15dca570e3..4dca63f9c8 100644
--- a/test/fields/e2e.spec.ts
+++ b/test/fields/e2e.spec.ts
@@ -12,7 +12,7 @@ import { initPayloadE2E } from '../helpers/configHelpers'
 import { RESTClient } from '../helpers/rest'
 import { jsonDoc } from './collections/JSON'
 import { numberDoc } from './collections/Number'
-import { textDoc } from './collections/Text'
+import { textDoc } from './collections/Text/shared'
 import { lexicalE2E } from './lexicalE2E'
 import { clearAndSeedEverything } from './seed'
 import {
@@ -23,7 +23,7 @@ import {
   textFieldsSlug,
 } from './slugs'
 
-const { afterEach, beforeAll, describe, beforeEach } = test
+const { afterEach, beforeAll, beforeEach, describe } = test
 
 let client: RESTClient
 let page: Page
@@ -34,7 +34,7 @@ describe('fields', () => {
   beforeAll(async ({ browser }) => {
     const config = await initPayloadE2E(__dirname)
     serverURL = config.serverURL
-    client = new RESTClient(null, { serverURL, defaultSlug: 'users' })
+    client = new RESTClient(null, { defaultSlug: 'users', serverURL })
     await client.login()
 
     const context = await browser.newContext()
@@ -43,13 +43,13 @@ describe('fields', () => {
   beforeEach(async () => {
     await clearAndSeedEverything(payload)
     await client.logout()
-    client = new RESTClient(null, { serverURL, defaultSlug: 'users' })
+    client = new RESTClient(null, { defaultSlug: 'users', serverURL })
     await client.login()
   })
   describe('text', () => {
     let url: AdminUrlUtil
     beforeAll(() => {
-      url = new AdminUrlUtil(serverURL, 'text-fields')
+      url = new AdminUrlUtil(serverURL, textFieldsSlug)
     })
 
     test('should display field in list view', async () => {
@@ -80,6 +80,40 @@ describe('fields', () => {
       const description = page.locator('.field-description-i18nText')
       await expect(description).toHaveText('en description')
     })
+
+    test('should render custom label', async () => {
+      await page.goto(url.create)
+      const label = page.locator('label.custom-label[for="field-customLabel"]')
+      await expect(label).toHaveText('#label')
+    })
+
+    test('should render custom error', async () => {
+      await page.goto(url.create)
+      const input = page.locator('input[id="field-customError"]')
+      await input.fill('ab')
+      await expect(input).toHaveValue('ab')
+      const error = page.locator('.custom-error:near(input[id="field-customError"])')
+      const submit = page.locator('button[type="button"][id="action-save"]')
+      await submit.click()
+      await expect(error).toHaveText('#custom-error')
+    })
+
+    test('should render BeforeInput and AfterInput', async () => {
+      await page.goto(url.create)
+      const input = page.locator('input[id="field-beforeAndAfterInput"]')
+
+      const prevSibling = await input.evaluateHandle((el) => {
+        return el.previousElementSibling
+      })
+      const prevSiblingText = await page.evaluate((el) => el.textContent, prevSibling)
+      await expect(prevSiblingText).toEqual('#before-input')
+
+      const nextSibling = await input.evaluateHandle((el) => {
+        return el.nextElementSibling
+      })
+      const nextSiblingText = await page.evaluate((el) => el.textContent, nextSibling)
+      await expect(nextSiblingText).toEqual('#after-input')
+    })
   })
 
   describe('number', () => {
@@ -166,11 +200,11 @@ describe('fields', () => {
       await payload.create({
         collection: 'indexed-fields',
         data: {
-          text: 'text',
-          uniqueText,
           group: {
             unique: uniqueText,
           },
+          text: 'text',
+          uniqueText,
         },
       })
 
@@ -286,17 +320,17 @@ describe('fields', () => {
       filledGroupPoint = await payload.create({
         collection: pointFieldsSlug,
         data: {
-          point: [5, 5],
-          localized: [4, 2],
           group: { point: [4, 2] },
+          localized: [4, 2],
+          point: [5, 5],
         },
       })
       emptyGroupPoint = await payload.create({
         collection: pointFieldsSlug,
         data: {
-          point: [5, 5],
-          localized: [3, -2],
           group: {},
+          localized: [3, -2],
+          point: [5, 5],
         },
       })
     })
@@ -1139,8 +1173,8 @@ describe('fields', () => {
       describe('EST', () => {
         test.use({
           geolocation: {
-            longitude: -83.0458,
             latitude: 42.3314,
+            longitude: -83.0458,
           },
           timezoneId: 'America/Detroit',
         })
@@ -1160,7 +1194,7 @@ describe('fields', () => {
           const id = routeSegments.pop()
 
           // fetch the doc (need the date string from the DB)
-          const { doc } = await client.findByID({ id, slug: 'date-fields', auth: true })
+          const { doc } = await client.findByID({ id, auth: true, slug: 'date-fields' })
 
           expect(doc.default).toEqual('2023-02-07T12:00:00.000Z')
         })
@@ -1169,8 +1203,8 @@ describe('fields', () => {
       describe('PST', () => {
         test.use({
           geolocation: {
-            longitude: -122.419416,
             latitude: 37.774929,
+            longitude: -122.419416,
           },
           timezoneId: 'America/Los_Angeles',
         })
@@ -1191,7 +1225,7 @@ describe('fields', () => {
           const id = routeSegments.pop()
 
           // fetch the doc (need the date string from the DB)
-          const { doc } = await client.findByID({ id, slug: 'date-fields', auth: true })
+          const { doc } = await client.findByID({ id, auth: true, slug: 'date-fields' })
 
           expect(doc.default).toEqual('2023-02-07T12:00:00.000Z')
         })
@@ -1200,8 +1234,8 @@ describe('fields', () => {
       describe('ST', () => {
         test.use({
           geolocation: {
-            longitude: -171.857,
             latitude: -14.5994,
+            longitude: -171.857,
           },
           timezoneId: 'Pacific/Apia',
         })
@@ -1222,7 +1256,7 @@ describe('fields', () => {
           const id = routeSegments.pop()
 
           // fetch the doc (need the date string from the DB)
-          const { doc } = await client.findByID({ id, slug: 'date-fields', auth: true })
+          const { doc } = await client.findByID({ id, auth: true, slug: 'date-fields' })
 
           expect(doc.default).toEqual('2023-02-07T12:00:00.000Z')
         })
@@ -1245,7 +1279,7 @@ describe('fields', () => {
       })
       const relationshipIDs = allRelationshipDocs.docs.map((doc) => doc.id)
       await mapAsync(relationshipIDs, async (id) => {
-        await payload.delete({ collection: relationshipFieldsSlug, id })
+        await payload.delete({ id, collection: relationshipFieldsSlug })
       })
     })
 
diff --git a/test/fields/int.spec.ts b/test/fields/int.spec.ts
index 69f604ee5c..7aa586d917 100644
--- a/test/fields/int.spec.ts
+++ b/test/fields/int.spec.ts
@@ -23,7 +23,7 @@ import {
   namedTabDefaultValue,
   namedTabText,
 } from './collections/Tabs/constants'
-import { defaultText } from './collections/Text'
+import { defaultText } from './collections/Text/shared'
 import { clearAndSeedEverything } from './seed'
 import { arrayFieldsSlug, groupFieldsSlug, relationshipFieldsSlug, tabsFieldsSlug } from './slugs'
 
diff --git a/test/fields/seed.ts b/test/fields/seed.ts
index 97642cb493..02fe3755cf 100644
--- a/test/fields/seed.ts
+++ b/test/fields/seed.ts
@@ -19,7 +19,7 @@ import { radiosDoc } from './collections/Radio'
 import { richTextBulletsDoc, richTextDoc } from './collections/RichText/data'
 import { selectsDoc } from './collections/Select'
 import { tabsDoc } from './collections/Tabs'
-import { textDoc } from './collections/Text'
+import { textDoc } from './collections/Text/shared'
 import { uploadsDoc } from './collections/Upload'
 import {
   blockFieldsSlug,
@@ -45,11 +45,8 @@ import {
 
 export async function clearAndSeedEverything(_payload: Payload) {
   return await seedDB({
-    snapshotKey: 'fieldsTest',
-    shouldResetDB: true,
-    collectionSlugs,
     _payload,
-    uploadsDir: path.resolve(__dirname, './collections/Upload/uploads'),
+    collectionSlugs,
     seedFunction: async (_payload) => {
       const jpgPath = path.resolve(__dirname, './collections/Upload/payload.jpg')
       const pngPath = path.resolve(__dirname, './uploads/payload.png')
@@ -143,5 +140,8 @@ export async function clearAndSeedEverything(_payload: Payload) {
         _payload.create({ collection: numberFieldsSlug, data: numberDoc }),
       ])
     },
+    shouldResetDB: true,
+    snapshotKey: 'fieldsTest',
+    uploadsDir: path.resolve(__dirname, './collections/Upload/uploads'),
   })
 }