feat!: explicitly types field components (#8136)

## Description

Currently, there is no way of typing custom server field components.
This is because internally, all field components are client components,
and so these were never fully typed. For example, the docs currently
indicate for all custom fields to be typed in this way:

Old:
    
```tsx
export const MyClientTextFieldComponent: React.FC<TextFieldProps>
```

But if your component is a server component, you will never receive the
fully typed `field` prop, `payload` prop, etc. unless you've typed that
yourself using some of the underlying utilities. So to fix this, every
field now explicitly exports a type for each environment:

New:

- Client component:
    ```tsx
    'use client'
    export const MyClientTextFieldComponent: TextFieldClientComponent
    ```

- Server component:
    ```tsx
    export const MyServerTextFieldComponent: TextFieldServerComponent
    ```

This pattern applies to every field type, where the field name is
prepended onto the component type.

```ts
import type {
  TextFieldClientComponent,
  TextFieldServerComponent,
  TextFieldClientProps,
  TextFieldServerProps,
  TextareaFieldClientComponent,
  TextareaFieldServerComponent,
  TextareaFieldClientProps,
  TextareaFieldServerProps,
  // ...and so on for each field type
} from 'payload'
```

## BREAKING CHANGES

We are no longer exporting `TextFieldProps` etc. for each field type.
Instead, we now export props for each client/server environment
explicitly. If you were previously importing one of these types into
your custom component, simply change the import name to reflect your
environment.

Old:

```tsx
import type { TextFieldProps } from 'payload'
``` 

New:

```tsx
import type { TextFieldClientProps, TextFieldServerProps } from 'payload'
``` 

Related: #7754. 

- [x] I have read and understand the
[CONTRIBUTING.md](https://github.com/payloadcms/payload/blob/main/CONTRIBUTING.md)
document in this repository.

## Type of change

- [x] New feature (non-breaking change which adds functionality)
- [x] This change requires a documentation update

## Checklist:

- [x] Existing test suite passes locally with my changes
- [x] I have made corresponding changes to the documentation

docs/admin/components.mdx

@@ -431,14 +431,14 @@ export const MyClientComponent: React.FC = () => {
   See [Using Hooks](#using-hooks) for more details.
 </Banner>
 
-All [Field Components](./fields) automatically receive their respective Client Field Config through a common [`field`](./fields#the-field-prop) prop:
+All [Field Components](./fields) automatically receive their respective Field Config through a common [`field`](./fields#the-field-prop) prop:
 
 ```tsx
 'use client'
 import React from 'react'
-import type { TextFieldProps } from 'payload'
+import type { TextFieldClientComponent } from 'payload'
 
-export const MyClientFieldComponent = ({ field: { name } }: TextFieldProps) => {
+export const MyClientFieldComponent: TextFieldClientComponent = ({ field: { name } }) => {
   return (
     <p>
       {`This field's name is ${name}`}

docs/admin/fields.mdx

@@ -136,7 +136,7 @@ All Field Components receive the following props:
 | Property         | Description                                                                                                                                                                                                                      |
 | ---------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **`docPreferences`** | An object that contains the [Preferences](./preferences) for the document.
-| **`field`** | The sanitized, client-friendly version of the field's config. [More details](#the-field-prop) |
+| **`field`** | The field's config. [More details](#the-field-prop) |
 | **`locale`**     | The locale of the field. [More details](../configuration/localization).                                                                                                                                                                   |
 | **`readOnly`**   | A boolean value that represents if the field is read-only or not.                                                                                                                                                                  |
 | **`user`**       | The currently authenticated user. [More details](../authentication/overview). |
@@ -175,46 +175,46 @@ export const CustomTextField: React.FC = () => {
 
 #### TypeScript
 
-When building Custom Field Components, you can import the component props to ensure type safety in your component. There is an explicit type for the Field Component, one for every [Field Type](../fields/overview). The convention is to append `Props` to the type of field, i.e. `TextFieldProps`.
+When building Custom Field Components, you can import the component type to ensure type safety. There is an explicit type for the Field Component, one for every [Field Type](../fields/overview) and for every client/server environment. The convention is to prepend the field type onto the target type, i.e. `TextFieldClientComponent`:
 
 ```tsx
 import type {
-  ArrayFieldProps,
+  TextFieldClientComponent,
-  BlocksFieldProps,
+  TextFieldServerComponent,
-  CheckboxFieldProps,
+  TextFieldClientProps,
-  CodeFieldProps,
+  TextFieldServerProps,
-  CollapsibleFieldProps,
+  // ...and so on for each Field Type
-  DateFieldProps,
-  EmailFieldProps,
-  GroupFieldProps,
-  HiddenFieldProps,
-  JSONFieldProps,
-  NumberFieldProps,
-  PointFieldProps,
-  RadioFieldProps,
-  RelationshipFieldProps,
-  RichTextFieldProps,
-  RowFieldProps,
-  SelectFieldProps,
-  TabsFieldProps,
-  TextFieldProps,
-  TextareaFieldProps,
-  UploadFieldProps
 } from 'payload'
 ```
 
 ### The `field` Prop
 
-All Field Components are passed a client-friendly version of their Field Config through a common `field` prop. Since the raw Field Config is [non-serializable](https://react.dev/reference/rsc/use-client#serializable-types), Payload sanitized it into a [Client Config](./components#accessing-the-payload-config) that is safe to pass into Client Components.
+All Field Components are passed their own Field Config through a common `field` prop. Within a Server Component, this is the raw Field Config. Within Client Components, however, the raw Field Config is [non-serializable](https://react.dev/reference/rsc/use-client#serializable-types). Instead, Client Components receives a [Client Config](./components#accessing-the-payload-config), which is a sanitizes version of the Field Config that is safe to pass into Client Components.
 
 The exact shape of this prop is unique to the specific [Field Type](../fields/overview) being rendered, minus all non-serializable properties. Any [Custom Components](../components) are also resolved into a "mapped component" that is safe to pass.
 
+```tsx
+import React from 'react'
+import type { TextFieldServerComponent } from 'payload'
+
+export const MyServerTextField: TextFieldServerComponent = ({ payload, field: { name } }) => {
+  const result = await payload.find({
+    collection: 'myCollection',
+    depth: 1,
+  })
+
+  // ...
+}
+```
+
+Client Component:
+
 ```tsx
 'use client'
 import React from 'react'
-import type { TextFieldProps } from 'payload'
+import type { TextFieldClientComponent } from 'payload'
 
-export const MyClientFieldComponent: React.FC<TextFieldProps> = ({ field: { name } }) => {
+export const MyClientTextField: TextFieldClientComponent = ({ field: { name } }) => {
   return (
     <p>
       {`This field's name is ${name}`}
@@ -238,40 +238,18 @@ The following additional properties are also provided to the `field` prop:
 
 #### TypeScript
 
-When building Custom Field Components, you can import the client field props to ensure type safety in your component. There is an explicit type for the Field Component, one for every [Field Type](../fields/overview). The convention is to append `Client` to the type of field, i.e. `TextFieldClient`.
+When building Custom Field Components, you can import the client field props to ensure type safety in your component. There is an explicit type for the Field Component, one for every [Field Type](../fields/overview) and server/client environment. The convention is to prepend the field type onto the target type, i.e. `TextFieldClientComponent`:
 
 ```tsx
 import type {
-  ArrayFieldClient,
+  TextFieldClientComponent,
-  BlocksFieldClient,
+  TextFieldServerComponent,
-  CheckboxFieldClient,
+  TextFieldClientProps,
-  CodeFieldClient,
+  TextFieldServerProps,
-  CollapsibleFieldClient,
+  // ...and so on for each Field Type
-  DateFieldClient,
-  EmailFieldClient,
-  GroupFieldClient,
-  HiddenFieldClient,
-  JSONFieldClient,
-  NumberFieldClient,
-  PointFieldClient,
-  RadioFieldClient,
-  RelationshipFieldClient,
-  RichTextFieldClient,
-  RowFieldClient,
-  SelectFieldClient,
-  TabsFieldClient,
-  TextFieldClient,
-  TextareaFieldClient,
-  UploadFieldClient
 } from 'payload'
 ```
 
-When working on the client, you will never have access to objects of type `Field`. This is reserved for the server-side. Instead, you can use `ClientField` which is a union type of all the client fields:
-
-```tsx
-import type { ClientField } from 'payload'
-```
-
 ### The Cell Component
 
 The Cell Component is rendered in the table of the List View. It represents the value of the field when displayed in a table cell.
@@ -353,7 +331,7 @@ When building Custom Label Components, you can import the component props to ens
 import type {
   TextFieldLabelServerComponent,
   TextFieldLabelClientComponent,
-  // And so on for each Field Type
+  // ...and so on for each Field Type
 } from 'payload'
 ```
 

packages/payload/src/admin/RichText.ts

@@ -13,7 +13,7 @@ import type {
 } from '../fields/config/types.js'
 import type { SanitizedGlobalConfig } from '../globals/config/types.js'
 import type { JsonObject, Payload, PayloadRequest, RequestContext } from '../types/index.js'
-import type { RichTextFieldProps } from './fields/RichText.js'
+import type { RichTextFieldClientProps } from './fields/RichText.js'
 import type { CreateMappedComponent } from './types.js'
 
 export type AfterReadRichTextHookArgs<
@@ -261,7 +261,7 @@ export type RichTextAdapter<
   ExtraFieldProperties = any,
 > = {
   CellComponent: PayloadComponent<never>
-  FieldComponent: PayloadComponent<never, RichTextFieldProps>
+  FieldComponent: PayloadComponent<never, RichTextFieldClientProps>
 } & RichTextAdapterBase<Value, AdapterProps, ExtraFieldProperties>
 
 export type RichTextAdapterProvider<

packages/payload/src/admin/fields/Array.ts

@@ -3,21 +3,38 @@ import type { MarkOptional } from 'ts-essentials'
 import type { ArrayField, ArrayFieldClient } from '../../fields/config/types.js'
 import type { ArrayFieldValidation } from '../../fields/validations.js'
 import type { FieldErrorClientComponent, FieldErrorServerComponent } from '../forms/Error.js'
+import type {
+  ClientFieldBase,
+  FieldClientComponent,
+  FieldServerComponent,
+  ServerFieldBase,
+} from '../forms/Field.js'
 import type {
   FieldDescriptionClientComponent,
   FieldDescriptionServerComponent,
   FieldLabelClientComponent,
   FieldLabelServerComponent,
-  FormFieldBase,
   MappedComponent,
 } from '../types.js'
 
 type ArrayFieldClientWithoutType = MarkOptional<ArrayFieldClient, 'type'>
 
-export type ArrayFieldProps = {
+type ArrayFieldBaseClientProps = {
   readonly CustomRowLabel?: MappedComponent
   readonly validate?: ArrayFieldValidation
-} & Omit<FormFieldBase<ArrayFieldClientWithoutType>, 'validate'>
+}
+
+export type ArrayFieldClientProps = ArrayFieldBaseClientProps &
+  ClientFieldBase<ArrayFieldClientWithoutType>
+
+export type ArrayFieldServerProps = ServerFieldBase<ArrayField>
+
+export type ArrayFieldServerComponent = FieldServerComponent<ArrayField>
+
+export type ArrayFieldClientComponent = FieldClientComponent<
+  ArrayFieldClientWithoutType,
+  ArrayFieldBaseClientProps
+>
 
 export type ArrayFieldLabelServerComponent = FieldLabelServerComponent<ArrayField>
 

packages/payload/src/admin/fields/Blocks.ts

@@ -3,19 +3,36 @@ import type { MarkOptional } from 'ts-essentials'
 import type { BlockField, BlockFieldClient } from '../../fields/config/types.js'
 import type { BlockFieldValidation } from '../../fields/validations.js'
 import type { FieldErrorClientComponent, FieldErrorServerComponent } from '../forms/Error.js'
+import type {
+  ClientFieldBase,
+  FieldClientComponent,
+  FieldServerComponent,
+  ServerFieldBase,
+} from '../forms/Field.js'
 import type {
   FieldDescriptionClientComponent,
   FieldDescriptionServerComponent,
   FieldLabelClientComponent,
   FieldLabelServerComponent,
-  FormFieldBase,
 } from '../types.js'
 
 type BlocksFieldClientWithoutType = MarkOptional<BlockFieldClient, 'type'>
 
-export type BlockFieldProps = {
+type BlocksFieldBaseClientProps = {
   readonly validate?: BlockFieldValidation
-} & Omit<FormFieldBase<BlocksFieldClientWithoutType>, 'validate'>
+}
+
+export type BlocksFieldClientProps = BlocksFieldBaseClientProps &
+  ClientFieldBase<BlocksFieldClientWithoutType>
+
+export type BlocksFieldServerProps = ServerFieldBase<BlockField>
+
+export type BlocksFieldServerComponent = FieldServerComponent<BlockField>
+
+export type BlocksFieldClientComponent = FieldClientComponent<
+  BlocksFieldClientWithoutType,
+  BlocksFieldBaseClientProps
+>
 
 export type BlockFieldLabelServerComponent = FieldLabelServerComponent<BlockField>
 

packages/payload/src/admin/fields/Checkbox.ts

@@ -3,24 +3,41 @@ import type { MarkOptional } from 'ts-essentials'
 import type { CheckboxField, CheckboxFieldClient } from '../../fields/config/types.js'
 import type { CheckboxFieldValidation } from '../../fields/validations.js'
 import type { FieldErrorClientComponent, FieldErrorServerComponent } from '../forms/Error.js'
+import type {
+  ClientFieldBase,
+  FieldClientComponent,
+  FieldServerComponent,
+  ServerFieldBase,
+} from '../forms/Field.js'
 import type {
   FieldDescriptionClientComponent,
   FieldDescriptionServerComponent,
   FieldLabelClientComponent,
   FieldLabelServerComponent,
-  FormFieldBase,
 } from '../types.js'
 
 type CheckboxFieldClientWithoutType = MarkOptional<CheckboxFieldClient, 'type'>
 
-export type CheckboxFieldProps = {
+type CheckboxFieldBaseClientProps = {
   readonly checked?: boolean
   readonly disableFormData?: boolean
   readonly id?: string
   readonly onChange?: (value: boolean) => void
   readonly partialChecked?: boolean
   readonly validate?: CheckboxFieldValidation
-} & Omit<FormFieldBase<CheckboxFieldClientWithoutType>, 'validate'>
+}
+
+export type CheckboxFieldClientProps = CheckboxFieldBaseClientProps &
+  ClientFieldBase<CheckboxFieldClientWithoutType>
+
+export type CheckboxFieldServerProps = ServerFieldBase<CheckboxField>
+
+export type CheckboxFieldServerComponent = FieldServerComponent<CheckboxField>
+
+export type CheckboxFieldClientComponent = FieldClientComponent<
+  CheckboxFieldClientWithoutType,
+  CheckboxFieldBaseClientProps
+>
 
 export type CheckboxFieldLabelServerComponent = FieldLabelServerComponent<CheckboxField>
 

packages/payload/src/admin/fields/Code.ts

@@ -3,20 +3,37 @@ import type { MarkOptional } from 'ts-essentials'
 import type { CodeField, CodeFieldClient } from '../../fields/config/types.js'
 import type { CodeFieldValidation } from '../../fields/validations.js'
 import type { FieldErrorClientComponent, FieldErrorServerComponent } from '../forms/Error.js'
+import type {
+  ClientFieldBase,
+  FieldClientComponent,
+  FieldServerComponent,
+  ServerFieldBase,
+} from '../forms/Field.js'
 import type {
   FieldDescriptionClientComponent,
   FieldDescriptionServerComponent,
   FieldLabelClientComponent,
   FieldLabelServerComponent,
-  FormFieldBase,
 } from '../types.js'
 
 type CodeFieldClientWithoutType = MarkOptional<CodeFieldClient, 'type'>
 
-export type CodeFieldProps = {
+type CodeFieldBaseClientProps = {
   readonly autoComplete?: string
-  readonly validate?: CodeFieldValidation
+  readonly valiCode?: CodeFieldValidation
-} & Omit<FormFieldBase<CodeFieldClientWithoutType>, 'validate'>
+}
+
+export type CodeFieldClientProps = ClientFieldBase<CodeFieldClientWithoutType> &
+  CodeFieldBaseClientProps
+
+export type CodeFieldServerProps = ServerFieldBase<CodeField>
+
+export type CodeFieldServerComponent = FieldServerComponent<CodeField>
+
+export type CodeFieldClientComponent = FieldClientComponent<
+  CodeFieldClientWithoutType,
+  CodeFieldBaseClientProps
+>
 
 export type CodeFieldLabelServerComponent = FieldLabelServerComponent<CodeField>
 

packages/payload/src/admin/fields/Collapsible.ts

@@ -2,17 +2,29 @@ import type { MarkOptional } from 'ts-essentials'
 
 import type { CollapsibleField, CollapsibleFieldClient } from '../../fields/config/types.js'
 import type { FieldErrorClientComponent, FieldErrorServerComponent } from '../forms/Error.js'
+import type {
+  ClientFieldBase,
+  FieldClientComponent,
+  FieldServerComponent,
+  ServerFieldBase,
+} from '../forms/Field.js'
 import type {
   FieldDescriptionClientComponent,
   FieldDescriptionServerComponent,
   FieldLabelClientComponent,
   FieldLabelServerComponent,
-  FormFieldBase,
 } from '../types.js'
 
 type CollapsibleFieldClientWithoutType = MarkOptional<CollapsibleFieldClient, 'type'>
 
-export type CollapsibleFieldProps = FormFieldBase<CollapsibleFieldClientWithoutType>
+export type CollapsibleFieldClientProps = ClientFieldBase<CollapsibleFieldClientWithoutType>
+
+export type CollapsibleFieldServerProps = ServerFieldBase<CollapsibleField>
+
+export type CollapsibleFieldServerComponent = FieldServerComponent<CollapsibleField>
+
+export type CollapsibleFieldClientComponent =
+  FieldClientComponent<CollapsibleFieldClientWithoutType>
 
 export type CollapsibleFieldLabelServerComponent = FieldLabelServerComponent<CollapsibleField>
 

packages/payload/src/admin/fields/Date.ts

@@ -3,19 +3,36 @@ import type { MarkOptional } from 'ts-essentials'
 import type { DateField, DateFieldClient } from '../../fields/config/types.js'
 import type { DateFieldValidation } from '../../fields/validations.js'
 import type { FieldErrorClientComponent, FieldErrorServerComponent } from '../forms/Error.js'
+import type {
+  ClientFieldBase,
+  FieldClientComponent,
+  FieldServerComponent,
+  ServerFieldBase,
+} from '../forms/Field.js'
 import type {
   FieldDescriptionClientComponent,
   FieldDescriptionServerComponent,
   FieldLabelClientComponent,
   FieldLabelServerComponent,
-  FormFieldBase,
 } from '../types.js'
 
 type DateFieldClientWithoutType = MarkOptional<DateFieldClient, 'type'>
 
-export type DateFieldProps = {
+type DateFieldBaseClientProps = {
   readonly validate?: DateFieldValidation
-} & Omit<FormFieldBase<DateFieldClientWithoutType>, 'validate'>
+}
+
+export type DateFieldClientProps = ClientFieldBase<DateFieldClientWithoutType> &
+  DateFieldBaseClientProps
+
+export type DateFieldServerProps = ServerFieldBase<DateField>
+
+export type DateFieldServerComponent = FieldServerComponent<DateField>
+
+export type DateFieldClientComponent = FieldClientComponent<
+  DateFieldClientWithoutType,
+  DateFieldBaseClientProps
+>
 
 export type DateFieldLabelServerComponent = FieldLabelServerComponent<DateField>
 

packages/payload/src/admin/fields/Email.ts

@@ -3,20 +3,37 @@ import type { MarkOptional } from 'ts-essentials'
 import type { EmailField, EmailFieldClient } from '../../fields/config/types.js'
 import type { EmailFieldValidation } from '../../fields/validations.js'
 import type { FieldErrorClientComponent, FieldErrorServerComponent } from '../forms/Error.js'
+import type {
+  ClientFieldBase,
+  FieldClientComponent,
+  FieldServerComponent,
+  ServerFieldBase,
+} from '../forms/Field.js'
 import type {
   FieldDescriptionClientComponent,
   FieldDescriptionServerComponent,
   FieldLabelClientComponent,
   FieldLabelServerComponent,
-  FormFieldBase,
 } from '../types.js'
 
 type EmailFieldClientWithoutType = MarkOptional<EmailFieldClient, 'type'>
 
-export type EmailFieldProps = {
+type EmailFieldBaseClientProps = {
   readonly autoComplete?: string
   readonly validate?: EmailFieldValidation
-} & Omit<FormFieldBase<EmailFieldClientWithoutType>, 'validate'>
+}
+
+export type EmailFieldClientProps = ClientFieldBase<EmailFieldClientWithoutType> &
+  EmailFieldBaseClientProps
+
+export type EmailFieldServerProps = ServerFieldBase<EmailField>
+
+export type EmailFieldServerComponent = FieldServerComponent<EmailField>
+
+export type EmailFieldClientComponent = FieldClientComponent<
+  EmailFieldClientWithoutType,
+  EmailFieldBaseClientProps
+>
 
 export type EmailFieldLabelServerComponent = FieldLabelServerComponent<EmailField>
 

packages/payload/src/admin/fields/Group.ts

@@ -2,17 +2,28 @@ import type { MarkOptional } from 'ts-essentials'
 
 import type { GroupField, GroupFieldClient } from '../../fields/config/types.js'
 import type { FieldErrorClientComponent, FieldErrorServerComponent } from '../forms/Error.js'
+import type {
+  ClientFieldBase,
+  FieldClientComponent,
+  FieldServerComponent,
+  ServerFieldBase,
+} from '../forms/Field.js'
 import type {
   FieldDescriptionClientComponent,
   FieldDescriptionServerComponent,
   FieldLabelClientComponent,
   FieldLabelServerComponent,
-  FormFieldBase,
 } from '../types.js'
 
 type GroupFieldClientWithoutType = MarkOptional<GroupFieldClient, 'type'>
 
-export type GroupFieldProps = FormFieldBase<GroupFieldClientWithoutType>
+export type GroupFieldClientProps = ClientFieldBase<GroupFieldClientWithoutType>
+
+export type GroupFieldServerProps = ServerFieldBase<GroupField>
+
+export type GroupFieldServerComponent = FieldServerComponent<GroupField>
+
+export type GroupFieldClientComponent = FieldClientComponent<GroupFieldClientWithoutType>
 
 export type GroupFieldLabelServerComponent = FieldLabelServerComponent<GroupField>
 

packages/payload/src/admin/fields/JSON.ts

@@ -3,19 +3,36 @@ import type { MarkOptional } from 'ts-essentials'
 import type { JSONField, JSONFieldClient } from '../../fields/config/types.js'
 import type { JSONFieldValidation } from '../../fields/validations.js'
 import type { FieldErrorClientComponent, FieldErrorServerComponent } from '../forms/Error.js'
+import type {
+  ClientFieldBase,
+  FieldClientComponent,
+  FieldServerComponent,
+  ServerFieldBase,
+} from '../forms/Field.js'
 import type {
   FieldDescriptionClientComponent,
   FieldDescriptionServerComponent,
   FieldLabelClientComponent,
   FieldLabelServerComponent,
-  FormFieldBase,
 } from '../types.js'
 
 type JSONFieldClientWithoutType = MarkOptional<JSONFieldClient, 'type'>
 
-export type JSONFieldProps = {
+type JSONFieldBaseClientProps = {
   readonly validate?: JSONFieldValidation
-} & Omit<FormFieldBase<JSONFieldClientWithoutType>, 'validate'>
+}
+
+export type JSONFieldClientProps = ClientFieldBase<JSONFieldClientWithoutType> &
+  JSONFieldBaseClientProps
+
+export type JSONFieldServerProps = ServerFieldBase<JSONField>
+
+export type JSONFieldServerComponent = FieldServerComponent<JSONField>
+
+export type JSONFieldClientComponent = FieldClientComponent<
+  JSONFieldClientWithoutType,
+  JSONFieldBaseClientProps
+>
 
 export type JSONFieldLabelServerComponent = FieldLabelServerComponent<JSONField>
 

packages/payload/src/admin/fields/Number.ts

@@ -3,20 +3,37 @@ import type { MarkOptional } from 'ts-essentials'
 import type { NumberField, NumberFieldClient } from '../../fields/config/types.js'
 import type { NumberFieldValidation } from '../../fields/validations.js'
 import type { FieldErrorClientComponent, FieldErrorServerComponent } from '../forms/Error.js'
+import type {
+  ClientFieldBase,
+  FieldClientComponent,
+  FieldServerComponent,
+  ServerFieldBase,
+} from '../forms/Field.js'
 import type {
   FieldDescriptionClientComponent,
   FieldDescriptionServerComponent,
   FieldLabelClientComponent,
   FieldLabelServerComponent,
-  FormFieldBase,
 } from '../types.js'
 
 type NumberFieldClientWithoutType = MarkOptional<NumberFieldClient, 'type'>
 
-export type NumberFieldProps = {
+type NumberFieldBaseClientProps = {
   readonly onChange?: (e: number) => void
   readonly validate?: NumberFieldValidation
-} & Omit<FormFieldBase<NumberFieldClientWithoutType>, 'validate'>
+}
+
+export type NumberFieldClientProps = ClientFieldBase<NumberFieldClientWithoutType> &
+  NumberFieldBaseClientProps
+
+export type NumberFieldServerProps = ServerFieldBase<NumberField>
+
+export type NumberFieldServerComponent = FieldServerComponent<NumberField>
+
+export type NumberFieldClientComponent = FieldClientComponent<
+  NumberFieldClientWithoutType,
+  NumberFieldBaseClientProps
+>
 
 export type NumberFieldLabelServerComponent = FieldLabelServerComponent<NumberField>
 

packages/payload/src/admin/fields/Point.ts

@@ -3,19 +3,36 @@ import type { MarkOptional } from 'ts-essentials'
 import type { PointField, PointFieldClient } from '../../fields/config/types.js'
 import type { PointFieldValidation } from '../../fields/validations.js'
 import type { FieldErrorClientComponent, FieldErrorServerComponent } from '../forms/Error.js'
+import type {
+  ClientFieldBase,
+  FieldClientComponent,
+  FieldServerComponent,
+  ServerFieldBase,
+} from '../forms/Field.js'
 import type {
   FieldDescriptionClientComponent,
   FieldDescriptionServerComponent,
   FieldLabelClientComponent,
   FieldLabelServerComponent,
-  FormFieldBase,
 } from '../types.js'
 
 type PointFieldClientWithoutType = MarkOptional<PointFieldClient, 'type'>
 
-export type PointFieldProps = {
+type PointFieldBaseClientProps = {
   readonly validate?: PointFieldValidation
-} & Omit<FormFieldBase<PointFieldClientWithoutType>, 'validate'>
+}
+
+export type PointFieldClientProps = ClientFieldBase<PointFieldClientWithoutType> &
+  PointFieldBaseClientProps
+
+export type PointFieldServerProps = ServerFieldBase<PointField>
+
+export type PointFieldServerComponent = FieldServerComponent<PointField>
+
+export type PointFieldClientComponent = FieldClientComponent<
+  PointFieldClientWithoutType,
+  PointFieldBaseClientProps
+>
 
 export type PointFieldLabelServerComponent = FieldLabelServerComponent<PointField>
 

packages/payload/src/admin/fields/Radio.ts

@@ -3,21 +3,38 @@ import type { MarkOptional } from 'ts-essentials'
 import type { RadioField, RadioFieldClient } from '../../fields/config/types.js'
 import type { RadioFieldValidation } from '../../fields/validations.js'
 import type { FieldErrorClientComponent, FieldErrorServerComponent } from '../forms/Error.js'
+import type {
+  ClientFieldBase,
+  FieldClientComponent,
+  FieldServerComponent,
+  ServerFieldBase,
+} from '../forms/Field.js'
 import type {
   FieldDescriptionClientComponent,
   FieldDescriptionServerComponent,
   FieldLabelClientComponent,
   FieldLabelServerComponent,
-  FormFieldBase,
 } from '../types.js'
 
 type RadioFieldClientWithoutType = MarkOptional<RadioFieldClient, 'type'>
 
-export type RadioFieldProps = {
+type RadioFieldBaseClientProps = {
   readonly onChange?: OnChange
   readonly validate?: RadioFieldValidation
   readonly value?: string
-} & Omit<FormFieldBase<RadioFieldClientWithoutType>, 'validate'>
+}
+
+export type RadioFieldClientProps = ClientFieldBase<RadioFieldClientWithoutType> &
+  RadioFieldBaseClientProps
+
+export type RadioFieldServerProps = ServerFieldBase<RadioField>
+
+export type RadioFieldServerComponent = FieldServerComponent<RadioField>
+
+export type RadioFieldClientComponent = FieldClientComponent<
+  RadioFieldClientWithoutType,
+  RadioFieldBaseClientProps
+>
 
 export type OnChange<T = string> = (value: T) => void
 

packages/payload/src/admin/fields/Relationship.ts

@@ -3,19 +3,36 @@ import type { MarkOptional } from 'ts-essentials'
 import type { RelationshipField, RelationshipFieldClient } from '../../fields/config/types.js'
 import type { RelationshipFieldValidation } from '../../fields/validations.js'
 import type { FieldErrorClientComponent, FieldErrorServerComponent } from '../forms/Error.js'
+import type {
+  ClientFieldBase,
+  FieldClientComponent,
+  FieldServerComponent,
+  ServerFieldBase,
+} from '../forms/Field.js'
 import type {
   FieldDescriptionClientComponent,
   FieldDescriptionServerComponent,
   FieldLabelClientComponent,
   FieldLabelServerComponent,
-  FormFieldBase,
 } from '../types.js'
 
 type RelationshipFieldClientWithoutType = MarkOptional<RelationshipFieldClient, 'type'>
 
-export type RelationshipFieldProps = {
+type RelationshipFieldBaseClientProps = {
   readonly validate?: RelationshipFieldValidation
-} & Omit<FormFieldBase<RelationshipFieldClientWithoutType>, 'validate'>
+}
+
+export type RelationshipFieldClientProps = ClientFieldBase<RelationshipFieldClientWithoutType> &
+  RelationshipFieldBaseClientProps
+
+export type RelationshipFieldServerProps = ServerFieldBase<RelationshipField>
+
+export type RelationshipFieldServerComponent = FieldServerComponent<RelationshipField>
+
+export type RelationshipFieldClientComponent = FieldClientComponent<
+  RelationshipFieldClientWithoutType,
+  RelationshipFieldBaseClientProps
+>
 
 export type RelationshipFieldLabelServerComponent = FieldLabelServerComponent<RelationshipField>
 

packages/payload/src/admin/fields/RichText.ts

@@ -3,23 +3,44 @@ import type { MarkOptional } from 'ts-essentials'
 import type { RichTextField, RichTextFieldClient } from '../../fields/config/types.js'
 import type { RichTextFieldValidation } from '../../fields/validations.js'
 import type { FieldErrorClientComponent, FieldErrorServerComponent } from '../forms/Error.js'
+import type {
+  ClientFieldBase,
+  FieldClientComponent,
+  FieldServerComponent,
+  ServerFieldBase,
+} from '../forms/Field.js'
 import type {
   FieldDescriptionClientComponent,
   FieldDescriptionServerComponent,
   FieldLabelClientComponent,
   FieldLabelServerComponent,
-  FormFieldBase,
 } from '../types.js'
 
 type RichTextFieldClientWithoutType = MarkOptional<RichTextFieldClient, 'type'>
 
-export type RichTextFieldProps<
+type RichTextFieldBaseClientProps<
   TValue extends object = any,
   TAdapterProps = any,
   TExtraProperties = object,
 > = {
   readonly validate?: RichTextFieldValidation
-} & Omit<FormFieldBase<RichTextFieldClientWithoutType>, 'validate'>
+}
+
+export type RichTextFieldClientProps<
+  TValue extends object = any,
+  TAdapterProps = any,
+  TExtraProperties = object,
+> = ClientFieldBase<RichTextFieldClientWithoutType> &
+  RichTextFieldBaseClientProps<TValue, TAdapterProps, TExtraProperties>
+
+export type RichTextFieldServerProps = ServerFieldBase<RichTextField>
+
+export type RichTextFieldServerComponent = FieldServerComponent<RichTextField>
+
+export type RichTextFieldClientComponent = FieldClientComponent<
+  RichTextFieldClientWithoutType,
+  RichTextFieldBaseClientProps
+>
 
 export type RichTextFieldLabelServerComponent = FieldLabelServerComponent<RichTextField>
 

packages/payload/src/admin/fields/Row.ts

@@ -1,6 +1,12 @@
 import type { MarkOptional } from 'ts-essentials'
 
 import type { RowField, RowFieldClient } from '../../fields/config/types.js'
+import type {
+  ClientFieldBase,
+  FieldClientComponent,
+  FieldServerComponent,
+  ServerFieldBase,
+} from '../forms/Field.js'
 import type {
   FieldDescriptionClientComponent,
   FieldDescriptionServerComponent,
@@ -8,15 +14,26 @@ import type {
   FieldErrorServerComponent,
   FieldLabelClientComponent,
   FieldLabelServerComponent,
-  FormFieldBase,
 } from '../types.js'
 
 type RowFieldClientWithoutType = MarkOptional<RowFieldClient, 'type'>
 
-export type RowFieldProps = {
+type RowFieldBaseClientProps = {
   readonly forceRender?: boolean
   readonly indexPath: string
-} & FormFieldBase<RowFieldClientWithoutType>
+}
+
+export type RowFieldClientProps = ClientFieldBase<RowFieldClientWithoutType> &
+  RowFieldBaseClientProps
+
+export type RowFieldServerProps = ServerFieldBase<RowField>
+
+export type RowFieldServerComponent = FieldServerComponent<RowField>
+
+export type RowFieldClientComponent = FieldClientComponent<
+  RowFieldClientWithoutType,
+  RowFieldBaseClientProps
+>
 
 export type RowFieldLabelServerComponent = FieldLabelServerComponent<RowField>
 

packages/payload/src/admin/fields/Select.ts

@@ -3,21 +3,38 @@ import type { MarkOptional } from 'ts-essentials'
 import type { SelectField, SelectFieldClient } from '../../fields/config/types.js'
 import type { SelectFieldValidation } from '../../fields/validations.js'
 import type { FieldErrorClientComponent, FieldErrorServerComponent } from '../forms/Error.js'
+import type {
+  ClientFieldBase,
+  FieldClientComponent,
+  FieldServerComponent,
+  ServerFieldBase,
+} from '../forms/Field.js'
 import type {
   FieldDescriptionClientComponent,
   FieldDescriptionServerComponent,
   FieldLabelClientComponent,
   FieldLabelServerComponent,
-  FormFieldBase,
 } from '../types.js'
 
 type SelectFieldClientWithoutType = MarkOptional<SelectFieldClient, 'type'>
 
-export type SelectFieldProps = {
+type SelectFieldBaseClientProps = {
   readonly onChange?: (e: string | string[]) => void
   readonly validate?: SelectFieldValidation
   readonly value?: string
-} & Omit<FormFieldBase<SelectFieldClientWithoutType>, 'validate'>
+}
+
+export type SelectFieldClientProps = ClientFieldBase<SelectFieldClientWithoutType> &
+  SelectFieldBaseClientProps
+
+export type SelectFieldServerProps = ServerFieldBase<SelectField>
+
+export type SelectFieldServerComponent = FieldServerComponent<SelectField>
+
+export type SelectFieldClientComponent = FieldClientComponent<
+  SelectFieldClientWithoutType,
+  SelectFieldBaseClientProps
+>
 
 export type SelectFieldLabelServerComponent = FieldLabelServerComponent<SelectField>
 

packages/payload/src/admin/fields/Tabs.ts

@@ -8,21 +8,32 @@ import type {
   UnnamedTab,
 } from '../../fields/config/types.js'
 import type { FieldErrorClientComponent, FieldErrorServerComponent } from '../forms/Error.js'
+import type {
+  ClientFieldBase,
+  FieldClientComponent,
+  FieldServerComponent,
+  ServerFieldBase,
+} from '../forms/Field.js'
 import type {
   FieldDescriptionClientComponent,
   FieldDescriptionServerComponent,
   FieldLabelClientComponent,
   FieldLabelServerComponent,
-  FormFieldBase,
 } from '../types.js'
 
 export type ClientTab =
   | ({ fields: ClientField[] } & Omit<NamedTab, 'fields'>)
   | ({ fields: ClientField[] } & Omit<UnnamedTab, 'fields'>)
 
-export type TabsFieldClientWithoutType = MarkOptional<TabsFieldClient, 'type'>
+type TabsFieldClientWithoutType = MarkOptional<TabsFieldClient, 'type'>
 
-export type TabsFieldProps = FormFieldBase<TabsFieldClientWithoutType>
+export type TabsFieldClientProps = ClientFieldBase<TabsFieldClientWithoutType>
+
+export type TabsFieldServerProps = ServerFieldBase<TabsField>
+
+export type TabsFieldServerComponent = FieldServerComponent<TabsField>
+
+export type TabsFieldClientComponent = FieldClientComponent<TabsFieldClientWithoutType>
 
 export type TabsFieldLabelServerComponent = FieldLabelServerComponent<TabsField>
 

packages/payload/src/admin/fields/Text.ts

@@ -4,21 +4,38 @@ import type { MarkOptional } from 'ts-essentials'
 import type { TextField, TextFieldClient } from '../../fields/config/types.js'
 import type { TextFieldValidation } from '../../fields/validations.js'
 import type { FieldErrorClientComponent, FieldErrorServerComponent } from '../forms/Error.js'
+import type {
+  ClientFieldBase,
+  FieldClientComponent,
+  FieldServerComponent,
+  ServerFieldBase,
+} from '../forms/Field.js'
 import type {
   FieldDescriptionClientComponent,
   FieldDescriptionServerComponent,
   FieldLabelClientComponent,
   FieldLabelServerComponent,
-  FormFieldBase,
 } from '../types.js'
 
 type TextFieldClientWithoutType = MarkOptional<TextFieldClient, 'type'>
 
-export type TextFieldProps = {
+type TextFieldBaseClientProps = {
   readonly inputRef?: React.RefObject<HTMLInputElement>
   readonly onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>
   readonly validate?: TextFieldValidation
-} & Omit<FormFieldBase<TextFieldClientWithoutType>, 'validate'>
+}
+
+export type TextFieldClientProps = ClientFieldBase<TextFieldClientWithoutType> &
+  TextFieldBaseClientProps
+
+export type TextFieldServerProps = ServerFieldBase<TextField>
+
+export type TextFieldServerComponent = FieldServerComponent<TextField>
+
+export type TextFieldClientComponent = FieldClientComponent<
+  TextFieldClientWithoutType,
+  TextFieldBaseClientProps
+>
 
 export type TextFieldLabelServerComponent = FieldLabelServerComponent<TextField>
 

packages/payload/src/admin/fields/Textarea.ts

@@ -4,21 +4,38 @@ import type { MarkOptional } from 'ts-essentials'
 import type { TextareaField, TextareaFieldClient } from '../../fields/config/types.js'
 import type { TextareaFieldValidation } from '../../fields/validations.js'
 import type { FieldErrorClientComponent, FieldErrorServerComponent } from '../forms/Error.js'
+import type {
+  ClientFieldBase,
+  FieldClientComponent,
+  FieldServerComponent,
+  ServerFieldBase,
+} from '../forms/Field.js'
 import type {
   FieldDescriptionClientComponent,
   FieldDescriptionServerComponent,
   FieldLabelClientComponent,
   FieldLabelServerComponent,
-  FormFieldBase,
 } from '../types.js'
 
 type TextareaFieldClientWithoutType = MarkOptional<TextareaFieldClient, 'type'>
 
-export type TextareaFieldProps = {
+type TextareaFieldBaseClientProps = {
   readonly inputRef?: React.Ref<HTMLInputElement>
   readonly onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>
   readonly validate?: TextareaFieldValidation
-} & Omit<FormFieldBase<TextareaFieldClientWithoutType>, 'validate'>
+}
+
+export type TextareaFieldClientProps = ClientFieldBase<TextareaFieldClientWithoutType> &
+  TextareaFieldBaseClientProps
+
+export type TextareaFieldServerProps = ServerFieldBase<TextareaField>
+
+export type TextareaFieldServerComponent = FieldServerComponent<TextareaField>
+
+export type TextareaFieldClientComponent = FieldClientComponent<
+  TextareaFieldClientWithoutType,
+  TextareaFieldBaseClientProps
+>
 
 export type TextareaFieldLabelServerComponent = FieldLabelServerComponent<TextareaField>
 

packages/payload/src/admin/fields/Upload.ts

@@ -3,19 +3,36 @@ import type { MarkOptional } from 'ts-essentials'
 import type { UploadField, UploadFieldClient } from '../../fields/config/types.js'
 import type { UploadFieldValidation } from '../../fields/validations.js'
 import type { FieldErrorClientComponent, FieldErrorServerComponent } from '../forms/Error.js'
+import type {
+  ClientFieldBase,
+  FieldClientComponent,
+  FieldServerComponent,
+  ServerFieldBase,
+} from '../forms/Field.js'
 import type {
   FieldDescriptionClientComponent,
   FieldDescriptionServerComponent,
   FieldLabelClientComponent,
   FieldLabelServerComponent,
-  FormFieldBase,
 } from '../types.js'
 
 type UploadFieldClientWithoutType = MarkOptional<UploadFieldClient, 'type'>
 
-export type UploadFieldProps = {
+type UploadFieldBaseClientProps = {
   readonly validate?: UploadFieldValidation
-} & Omit<FormFieldBase<UploadFieldClientWithoutType>, 'validate'>
+}
+
+export type UploadFieldClientProps = ClientFieldBase<UploadFieldClientWithoutType> &
+  UploadFieldBaseClientProps
+
+export type UploadFieldServerProps = ServerFieldBase<UploadField>
+
+export type UploadFieldServerComponent = FieldServerComponent<UploadField>
+
+export type UploadFieldClientComponent = FieldClientComponent<
+  UploadFieldClientWithoutType,
+  UploadFieldBaseClientProps
+>
 
 export type UploadFieldLabelServerComponent = FieldLabelServerComponent<UploadField>
 

packages/payload/src/admin/forms/Description.ts

@@ -1,13 +1,10 @@
-import type { MarkOptional } from 'ts-essentials'
-
 import type { LabelFunction, ServerProps } from '../../config/types.js'
-import type { ClientField, Field } from '../../fields/config/types.js'
+import type { Field } from '../../fields/config/types.js'
 import type { MappedComponent } from '../types.js'
+import type { ClientFieldWithOptionalType } from './Field.js'
 
 export type DescriptionFunction = LabelFunction
 
-type ClientFieldWithOptionalType = MarkOptional<ClientField, 'type'>
-
 export type FieldDescriptionClientComponent<
   TFieldClient extends ClientFieldWithOptionalType = ClientFieldWithOptionalType,
 > = React.ComponentType<FieldDescriptionClientProps<TFieldClient>>

packages/payload/src/admin/forms/Error.ts

@@ -1,8 +1,7 @@
-import type { MarkOptional } from 'ts-essentials'
-
 import type { ServerProps } from '../../config/types.js'
-import type { ClientField, Field } from '../../fields/config/types.js'
+import type { Field } from '../../fields/config/types.js'
 import type { MappedComponent } from '../types.js'
+import type { ClientFieldWithOptionalType } from './Field.js'
 
 export type GenericErrorProps = {
   readonly alignCaret?: 'center' | 'left' | 'right'
@@ -12,8 +11,6 @@ export type GenericErrorProps = {
   readonly showError?: boolean
 }
 
-type ClientFieldWithOptionalType = MarkOptional<ClientField, 'type'>
-
 export type FieldErrorClientProps<
   TFieldClient extends ClientFieldWithOptionalType = ClientFieldWithOptionalType,
 > = {

packages/payload/src/admin/forms/Field.ts

@@ -2,24 +2,36 @@ import type { MarkOptional } from 'ts-essentials'
 
 import type { User } from '../../auth/types.js'
 import type { Locale } from '../../config/types.js'
-import type { ClientField, Validate } from '../../fields/config/types.js'
+import type { ClientField, Field, Validate } from '../../fields/config/types.js'
 import type { DocumentPreferences } from '../../preferences/types.js'
-import type { FieldDescriptionClientProps } from './Description.js'
+import type { FieldDescriptionClientProps, FieldDescriptionServerProps } from './Description.js'
-import type { FieldErrorClientProps } from './Error.js'
+import type { FieldErrorClientProps, FieldErrorServerProps } from './Error.js'
-import type { FieldLabelClientProps } from './Label.js'
+import type { FieldLabelClientProps, FieldLabelServerProps } from './Label.js'
 
-export type FormFieldBase<
+export type ClientFieldWithOptionalType = MarkOptional<ClientField, 'type'>
-  TFieldClient extends MarkOptional<ClientField, 'type'> = MarkOptional<ClientField, 'type'>,
+
+export type ClientFieldBase<
+  TFieldClient extends ClientFieldWithOptionalType = ClientFieldWithOptionalType,
 > = {
   readonly descriptionProps?: FieldDescriptionClientProps<TFieldClient>
-  readonly docPreferences?: DocumentPreferences
   readonly errorProps?: FieldErrorClientProps<TFieldClient>
   readonly field: TFieldClient
+  readonly labelProps?: FieldLabelClientProps<TFieldClient>
+} & FormFieldBase
+
+export type ServerFieldBase<TFieldServer extends Field = Field> = {
+  readonly descriptionProps?: FieldDescriptionServerProps<TFieldServer>
+  readonly errorProps?: FieldErrorServerProps<TFieldServer>
+  readonly field: TFieldServer
+  readonly labelProps?: FieldLabelServerProps<TFieldServer>
+} & FormFieldBase
+
+export type FormFieldBase = {
+  readonly docPreferences?: DocumentPreferences
   /**
    * `forceRender` is added by RenderField automatically.
    */
   readonly forceRender?: boolean
-  readonly labelProps?: FieldLabelClientProps<TFieldClient>
   readonly locale?: Locale
   /**
    * `readOnly` is added by RenderField automatically. This should be used instead of `field.admin.readOnly`.
@@ -28,3 +40,13 @@ export type FormFieldBase<
   readonly user?: User
   readonly validate?: Validate
 }
+
+export type FieldClientComponent<
+  TFieldClient extends ClientFieldWithOptionalType = ClientFieldWithOptionalType,
+  AdditionalProps extends Record<string, unknown> = Record<string, unknown>,
+> = React.ComponentType<AdditionalProps & ClientFieldBase<TFieldClient>>
+
+export type FieldServerComponent<
+  TFieldServer extends Field = Field,
+  AdditionalProps extends Record<string, unknown> = Record<string, unknown>,
+> = React.ComponentType<AdditionalProps & ServerFieldBase<TFieldServer>>

packages/payload/src/admin/forms/Label.ts

@@ -1,8 +1,7 @@
-import type { MarkOptional } from 'ts-essentials'
-
 import type { ServerProps, StaticLabel } from '../../config/types.js'
 import type { ClientField, Field } from '../../fields/config/types.js'
 import type { MappedComponent } from '../types.js'
+import type { ClientFieldWithOptionalType } from './Field.js'
 
 export type GenericLabelProps = {
   readonly as?: 'label' | 'span'
@@ -13,8 +12,6 @@ export type GenericLabelProps = {
   readonly unstyled?: boolean
 }
 
-type ClientFieldWithOptionalType = MarkOptional<ClientField, 'type'>
-
 export type FieldLabelClientProps<
   TFieldClient extends ClientFieldWithOptionalType = ClientFieldWithOptionalType,
 > = {

packages/payload/src/admin/types.ts

@@ -24,13 +24,16 @@ export type {
 } from './elements/WithServerSideProps.js'
 
 export type {
+  ArrayFieldClientComponent,
+  ArrayFieldClientProps,
   ArrayFieldDescriptionClientComponent,
   ArrayFieldDescriptionServerComponent,
   ArrayFieldErrorClientComponent,
   ArrayFieldErrorServerComponent,
   ArrayFieldLabelClientComponent,
   ArrayFieldLabelServerComponent,
-  ArrayFieldProps,
+  ArrayFieldServerComponent,
+  ArrayFieldServerProps,
 } from './fields/Array.js'
 
 export type {
@@ -40,190 +43,247 @@ export type {
   BlockFieldErrorServerComponent,
   BlockFieldLabelClientComponent,
   BlockFieldLabelServerComponent,
-  BlockFieldProps,
+  BlocksFieldClientComponent,
+  BlocksFieldClientProps,
+  BlocksFieldServerComponent,
+  BlocksFieldServerProps,
 } from './fields/Blocks.js'
 
 export type {
+  CheckboxFieldClientComponent,
+  CheckboxFieldClientProps,
   CheckboxFieldDescriptionClientComponent,
   CheckboxFieldDescriptionServerComponent,
   CheckboxFieldErrorClientComponent,
   CheckboxFieldErrorServerComponent,
   CheckboxFieldLabelClientComponent,
   CheckboxFieldLabelServerComponent,
-  CheckboxFieldProps,
+  CheckboxFieldServerComponent,
+  CheckboxFieldServerProps,
 } from './fields/Checkbox.js'
 
 export type {
+  CodeFieldClientComponent,
+  CodeFieldClientProps,
   CodeFieldDescriptionClientComponent,
   CodeFieldDescriptionServerComponent,
   CodeFieldErrorClientComponent,
   CodeFieldErrorServerComponent,
   CodeFieldLabelClientComponent,
   CodeFieldLabelServerComponent,
-  CodeFieldProps,
+  CodeFieldServerComponent,
+  CodeFieldServerProps,
 } from './fields/Code.js'
 
 export type {
+  CollapsibleFieldClientComponent,
+  CollapsibleFieldClientProps,
   CollapsibleFieldDescriptionClientComponent,
   CollapsibleFieldDescriptionServerComponent,
   CollapsibleFieldErrorClientComponent,
   CollapsibleFieldErrorServerComponent,
   CollapsibleFieldLabelClientComponent,
   CollapsibleFieldLabelServerComponent,
-  CollapsibleFieldProps,
+  CollapsibleFieldServerComponent,
+  CollapsibleFieldServerProps,
 } from './fields/Collapsible.js'
 
 export type {
+  DateFieldClientComponent,
+  DateFieldClientProps,
   DateFieldDescriptionClientComponent,
   DateFieldDescriptionServerComponent,
   DateFieldErrorClientComponent,
   DateFieldErrorServerComponent,
   DateFieldLabelClientComponent,
   DateFieldLabelServerComponent,
-  DateFieldProps,
+  DateFieldServerComponent,
+  DateFieldServerProps,
 } from './fields/Date.js'
 
 export type {
+  EmailFieldClientComponent,
+  EmailFieldClientProps,
   EmailFieldDescriptionClientComponent,
   EmailFieldDescriptionServerComponent,
   EmailFieldErrorClientComponent,
   EmailFieldErrorServerComponent,
   EmailFieldLabelClientComponent,
   EmailFieldLabelServerComponent,
-  EmailFieldProps,
+  EmailFieldServerComponent,
+  EmailFieldServerProps,
 } from './fields/Email.js'
 
 export type {
+  GroupFieldClientComponent,
+  GroupFieldClientProps,
   GroupFieldDescriptionClientComponent,
   GroupFieldDescriptionServerComponent,
   GroupFieldErrorClientComponent,
   GroupFieldErrorServerComponent,
   GroupFieldLabelClientComponent,
   GroupFieldLabelServerComponent,
-  GroupFieldProps,
+  GroupFieldServerComponent,
+  GroupFieldServerProps,
 } from './fields/Group.js'
 
 export type { HiddenFieldProps } from './fields/Hidden.js'
 
 export type {
+  JSONFieldClientComponent,
+  JSONFieldClientProps,
   JSONFieldDescriptionClientComponent,
   JSONFieldDescriptionServerComponent,
   JSONFieldErrorClientComponent,
   JSONFieldErrorServerComponent,
   JSONFieldLabelClientComponent,
   JSONFieldLabelServerComponent,
-  JSONFieldProps,
+  JSONFieldServerComponent,
+  JSONFieldServerProps,
 } from './fields/JSON.js'
 
 export type {
+  NumberFieldClientComponent,
+  NumberFieldClientProps,
   NumberFieldDescriptionClientComponent,
   NumberFieldDescriptionServerComponent,
   NumberFieldErrorClientComponent,
   NumberFieldErrorServerComponent,
   NumberFieldLabelClientComponent,
   NumberFieldLabelServerComponent,
-  NumberFieldProps,
+  NumberFieldServerComponent,
+  NumberFieldServerProps,
 } from './fields/Number.js'
 
 export type {
+  PointFieldClientComponent,
+  PointFieldClientProps,
   PointFieldDescriptionClientComponent,
   PointFieldDescriptionServerComponent,
   PointFieldErrorClientComponent,
   PointFieldErrorServerComponent,
   PointFieldLabelClientComponent,
   PointFieldLabelServerComponent,
-  PointFieldProps,
+  PointFieldServerComponent,
+  PointFieldServerProps,
 } from './fields/Point.js'
 
 export type {
+  RadioFieldClientComponent,
+  RadioFieldClientProps,
   RadioFieldDescriptionClientComponent,
   RadioFieldDescriptionServerComponent,
   RadioFieldErrorClientComponent,
   RadioFieldErrorServerComponent,
   RadioFieldLabelClientComponent,
   RadioFieldLabelServerComponent,
-  RadioFieldProps,
+  RadioFieldServerComponent,
+  RadioFieldServerProps,
 } from './fields/Radio.js'
 
 export type {
+  RelationshipFieldClientComponent,
+  RelationshipFieldClientProps,
   RelationshipFieldDescriptionClientComponent,
   RelationshipFieldDescriptionServerComponent,
   RelationshipFieldErrorClientComponent,
   RelationshipFieldErrorServerComponent,
   RelationshipFieldLabelClientComponent,
   RelationshipFieldLabelServerComponent,
-  RelationshipFieldProps,
+  RelationshipFieldServerComponent,
+  RelationshipFieldServerProps,
 } from './fields/Relationship.js'
 
 export type {
+  RichTextFieldClientComponent,
+  RichTextFieldClientProps,
   RichTextFieldDescriptionClientComponent,
   RichTextFieldDescriptionServerComponent,
   RichTextFieldErrorClientComponent,
   RichTextFieldErrorServerComponent,
   RichTextFieldLabelClientComponent,
   RichTextFieldLabelServerComponent,
-  RichTextFieldProps,
+  RichTextFieldServerComponent,
+  RichTextFieldServerProps,
 } from './fields/RichText.js'
 
 export type {
+  RowFieldClientComponent,
+  RowFieldClientProps,
   RowFieldDescriptionClientComponent,
   RowFieldDescriptionServerComponent,
   RowFieldErrorClientComponent,
   RowFieldErrorServerComponent,
   RowFieldLabelClientComponent,
   RowFieldLabelServerComponent,
-  RowFieldProps,
+  RowFieldServerComponent,
+  RowFieldServerProps,
 } from './fields/Row.js'
 
 export type {
+  SelectFieldClientComponent,
+  SelectFieldClientProps,
   SelectFieldDescriptionClientComponent,
   SelectFieldDescriptionServerComponent,
   SelectFieldErrorClientComponent,
   SelectFieldErrorServerComponent,
   SelectFieldLabelClientComponent,
   SelectFieldLabelServerComponent,
-  SelectFieldProps,
+  SelectFieldServerComponent,
+  SelectFieldServerProps,
 } from './fields/Select.js'
 
 export type {
   ClientTab,
+  TabsFieldClientComponent,
+  TabsFieldClientProps,
   TabsFieldDescriptionClientComponent,
   TabsFieldDescriptionServerComponent,
   TabsFieldErrorClientComponent,
   TabsFieldErrorServerComponent,
   TabsFieldLabelClientComponent,
   TabsFieldLabelServerComponent,
-  TabsFieldProps,
+  TabsFieldServerComponent,
+  TabsFieldServerProps,
 } from './fields/Tabs.js'
 
 export type {
+  TextFieldClientComponent,
+  TextFieldClientProps,
   TextFieldDescriptionClientComponent,
   TextFieldDescriptionServerComponent,
   TextFieldErrorClientComponent,
   TextFieldErrorServerComponent,
   TextFieldLabelClientComponent,
   TextFieldLabelServerComponent,
-  TextFieldProps,
+  TextFieldServerComponent,
+  TextFieldServerProps,
 } from './fields/Text.js'
 
 export type {
+  TextareaFieldClientComponent,
+  TextareaFieldClientProps,
   TextareaFieldDescriptionClientComponent,
   TextareaFieldDescriptionServerComponent,
   TextareaFieldErrorClientComponent,
   TextareaFieldErrorServerComponent,
   TextareaFieldLabelClientComponent,
   TextareaFieldLabelServerComponent,
-  TextareaFieldProps,
+  TextareaFieldServerComponent,
+  TextareaFieldServerProps,
 } from './fields/Textarea.js'
 
 export type {
+  UploadFieldClientComponent,
+  UploadFieldClientProps,
   UploadFieldDescriptionClientComponent,
   UploadFieldDescriptionServerComponent,
   UploadFieldErrorClientComponent,
   UploadFieldErrorServerComponent,
   UploadFieldLabelClientComponent,
   UploadFieldLabelServerComponent,
-  UploadFieldProps,
+  UploadFieldServerComponent,
+  UploadFieldServerProps,
 } from './fields/Upload.js'
 
 export type {

packages/payload/src/fields/config/types.ts

@@ -7,92 +7,92 @@ import type { DeepUndefinable } from 'ts-essentials'
 
 import type { RichTextAdapter, RichTextAdapterProvider } from '../../admin/RichText.js'
 import type {
+  ArrayFieldClientProps,
   ArrayFieldErrorClientComponent,
   ArrayFieldErrorServerComponent,
   ArrayFieldLabelClientComponent,
   ArrayFieldLabelServerComponent,
-  ArrayFieldProps,
   BlockFieldErrorClientComponent,
   BlockFieldErrorServerComponent,
-  BlockFieldProps,
+  BlocksFieldClientProps,
+  CheckboxFieldClientProps,
   CheckboxFieldErrorClientComponent,
   CheckboxFieldErrorServerComponent,
   CheckboxFieldLabelClientComponent,
   CheckboxFieldLabelServerComponent,
-  CheckboxFieldProps,
   ClientTab,
+  CodeFieldClientProps,
   CodeFieldErrorClientComponent,
   CodeFieldErrorServerComponent,
   CodeFieldLabelClientComponent,
   CodeFieldLabelServerComponent,
-  CodeFieldProps,
+  CollapsibleFieldClientProps,
   CollapsibleFieldLabelClientComponent,
   CollapsibleFieldLabelServerComponent,
-  CollapsibleFieldProps,
   ConditionalDateProps,
+  DateFieldClientProps,
   DateFieldErrorClientComponent,
   DateFieldErrorServerComponent,
   DateFieldLabelClientComponent,
   DateFieldLabelServerComponent,
-  DateFieldProps,
   Description,
+  EmailFieldClientProps,
   EmailFieldErrorClientComponent,
   EmailFieldErrorServerComponent,
   EmailFieldLabelClientComponent,
   EmailFieldLabelServerComponent,
-  EmailFieldProps,
   FieldDescriptionClientComponent,
   FieldDescriptionServerComponent,
+  GroupFieldClientProps,
   GroupFieldLabelClientComponent,
   GroupFieldLabelServerComponent,
-  GroupFieldProps,
   HiddenFieldProps,
+  JSONFieldClientProps,
   JSONFieldErrorClientComponent,
   JSONFieldErrorServerComponent,
   JSONFieldLabelClientComponent,
   JSONFieldLabelServerComponent,
-  JSONFieldProps,
   MappedComponent,
+  NumberFieldClientProps,
   NumberFieldErrorClientComponent,
   NumberFieldErrorServerComponent,
   NumberFieldLabelClientComponent,
   NumberFieldLabelServerComponent,
-  NumberFieldProps,
+  PointFieldClientProps,
   PointFieldErrorClientComponent,
   PointFieldErrorServerComponent,
   PointFieldLabelClientComponent,
   PointFieldLabelServerComponent,
-  PointFieldProps,
+  RadioFieldClientProps,
   RadioFieldErrorClientComponent,
   RadioFieldErrorServerComponent,
   RadioFieldLabelClientComponent,
   RadioFieldLabelServerComponent,
-  RadioFieldProps,
+  RelationshipFieldClientProps,
   RelationshipFieldErrorClientComponent,
   RelationshipFieldErrorServerComponent,
   RelationshipFieldLabelClientComponent,
   RelationshipFieldLabelServerComponent,
-  RelationshipFieldProps,
+  RichTextFieldClientProps,
-  RichTextFieldProps,
+  RowFieldClientProps,
-  RowFieldProps,
   RowLabelComponent,
+  SelectFieldClientProps,
   SelectFieldErrorClientComponent,
   SelectFieldErrorServerComponent,
   SelectFieldLabelClientComponent,
   SelectFieldLabelServerComponent,
-  SelectFieldProps,
   StaticDescription,
-  TabsFieldProps,
+  TabsFieldClientProps,
+  TextareaFieldClientProps,
   TextareaFieldErrorClientComponent,
   TextareaFieldErrorServerComponent,
   TextareaFieldLabelClientComponent,
   TextareaFieldLabelServerComponent,
-  TextareaFieldProps,
   TextFieldErrorClientComponent,
   TextFieldErrorServerComponent,
   TextFieldLabelClientComponent,
   TextFieldLabelServerComponent,
-  UploadFieldProps,
+  UploadFieldClientProps,
 } from '../../admin/types.js'
 import type { SanitizedCollectionConfig, TypeWithID } from '../../collections/config/types.js'
 import type {
@@ -1425,26 +1425,26 @@ export type ClientField =
   | UploadFieldClient
 
 export type ClientFieldProps =
-  | ArrayFieldProps
+  | ArrayFieldClientProps
-  | BlockFieldProps
+  | BlocksFieldClientProps
-  | CheckboxFieldProps
+  | CheckboxFieldClientProps
-  | CodeFieldProps
+  | CodeFieldClientProps
-  | CollapsibleFieldProps
+  | CollapsibleFieldClientProps
-  | DateFieldProps
+  | DateFieldClientProps
-  | EmailFieldProps
+  | EmailFieldClientProps
-  | GroupFieldProps
+  | GroupFieldClientProps
   | HiddenFieldProps
-  | JSONFieldProps
+  | JSONFieldClientProps
-  | NumberFieldProps
+  | NumberFieldClientProps
-  | PointFieldProps
+  | PointFieldClientProps
-  | RadioFieldProps
+  | RadioFieldClientProps
-  | RelationshipFieldProps
+  | RelationshipFieldClientProps
-  | RichTextFieldProps
+  | RichTextFieldClientProps
-  | RowFieldProps
+  | RowFieldClientProps
-  | SelectFieldProps
+  | SelectFieldClientProps
-  | TabsFieldProps
+  | TabsFieldClientProps
-  | TextareaFieldProps
+  | TextareaFieldClientProps
-  | UploadFieldProps
+  | UploadFieldClientProps
 
 type ExtractFieldTypes<T> = T extends { type: infer U } ? U : never
 

packages/plugin-form-builder/src/collections/Forms/DynamicFieldSelector.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import type { SelectFieldProps, SelectFieldValidation } from 'payload'
+import type { SelectFieldClientProps, SelectFieldValidation } from 'payload'
 
 import { SelectField, useForm } from '@payloadcms/ui'
 import React, { useEffect, useState } from 'react'
@@ -8,7 +8,7 @@ import React, { useEffect, useState } from 'react'
 import type { SelectFieldOption } from '../../types.js'
 
 export const DynamicFieldSelector: React.FC<
-  { validate: SelectFieldValidation } & SelectFieldProps
+  { validate: SelectFieldValidation } & SelectFieldClientProps
 > = (props) => {
   const { fields, getDataByPath } = useForm()
 

packages/plugin-form-builder/src/collections/Forms/DynamicPriceSelector.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import type { Data, TextFieldProps } from 'payload'
+import type { Data, TextFieldClientComponent } from 'payload'
 
 import { TextField, useLocale, useWatchForm } from '@payloadcms/ui'
 import React, { useEffect, useState } from 'react'
@@ -10,7 +10,7 @@ type FieldWithID = {
   name: string
 }
 
-export const DynamicPriceSelector: React.FC<TextFieldProps> = (props) => {
+export const DynamicPriceSelector: TextFieldClientComponent = (props) => {
   const { field } = props
 
   const { fields, getData, getDataByPath } = useWatchForm()

packages/plugin-seo/src/fields/MetaDescription/MetaDescriptionComponent.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import type { FieldType, Options } from '@payloadcms/ui'
-import type { TextareaFieldProps } from 'payload'
+import type { TextareaFieldClientProps } from 'payload'
 
 import {
   FieldLabel,
@@ -25,7 +25,7 @@ const { maxLength, minLength } = defaults.description
 
 type MetaDescriptionProps = {
   readonly hasGenerateDescriptionFn: boolean
-} & TextareaFieldProps
+} & TextareaFieldClientProps
 
 export const MetaDescriptionComponent: React.FC<MetaDescriptionProps> = (props) => {
   const {

packages/plugin-seo/src/fields/MetaImage/MetaImageComponent.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import type { FieldType, Options } from '@payloadcms/ui'
-import type { UploadFieldProps } from 'payload'
+import type { UploadFieldClientProps } from 'payload'
 
 import {
   FieldLabel,
@@ -23,7 +23,7 @@ import { Pill } from '../../ui/Pill.js'
 
 type MetaImageProps = {
   readonly hasGenerateImageFn: boolean
-} & UploadFieldProps
+} & UploadFieldClientProps
 
 export const MetaImageComponent: React.FC<MetaImageProps> = (props) => {
   const {

packages/plugin-seo/src/fields/MetaTitle/MetaTitleComponent.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import type { FieldType, Options } from '@payloadcms/ui'
-import type { TextFieldProps } from 'payload'
+import type { TextFieldClientProps } from 'payload'
 
 import {
   FieldLabel,
@@ -26,7 +26,7 @@ const { maxLength, minLength } = defaults.title
 
 type MetaTitleProps = {
   readonly hasGenerateTitleFn: boolean
-} & TextFieldProps
+} & TextFieldClientProps
 
 export const MetaTitleComponent: React.FC<MetaTitleProps> = (props) => {
   const {

packages/richtext-lexical/src/types.ts

@@ -1,5 +1,5 @@
 import type { EditorConfig as LexicalEditorConfig, SerializedEditorState } from 'lexical'
-import type { RichTextAdapter, RichTextFieldProps, SanitizedConfig } from 'payload'
+import type { RichTextAdapter, RichTextFieldClientProps, SanitizedConfig } from 'payload'
 
 import type {
   BaseClientFeatureProps,
@@ -74,7 +74,7 @@ export type LexicalRichTextAdapterProvider =
 export type LexicalRichTextFieldProps = {
   admin: LexicalFieldAdminProps
   lexicalEditorConfig: LexicalEditorConfig
-} & RichTextFieldProps<SerializedEditorState, AdapterProps, object>
+} & RichTextFieldClientProps<SerializedEditorState, AdapterProps, object>
 
 export type AdapterProps = {
   editorConfig: SanitizedServerEditorConfig

packages/richtext-slate/src/types.ts

@@ -1,4 +1,4 @@
-import type { Field, PayloadComponent, RichTextFieldProps, SanitizedConfig } from 'payload'
+import type { Field, PayloadComponent, RichTextFieldClientProps, SanitizedConfig } from 'payload'
 import type { Editor } from 'slate'
 
 export type TextNode = { [x: string]: unknown; text: string }
@@ -70,4 +70,4 @@ export type AdapterArguments = {
   }
 }
 
-export type SlateFieldProps = RichTextFieldProps<any[], AdapterArguments, AdapterArguments>
+export type SlateFieldProps = RichTextFieldClientProps<any[], AdapterArguments, AdapterArguments>

packages/ui/src/fields/Array/index.tsx

@@ -1,5 +1,9 @@
 'use client'
-import type { ArrayFieldProps, ArrayField as ArrayFieldType } from 'payload'
+import type {
+  ArrayFieldClientComponent,
+  ArrayFieldClientProps,
+  ArrayField as ArrayFieldType,
+} from 'payload'
 
 import { getTranslation } from '@payloadcms/translations'
 import React, { useCallback } from 'react'
@@ -29,7 +33,7 @@ import './index.scss'
 
 const baseClass = 'array-field'
 
-export const ArrayFieldComponent: React.FC<ArrayFieldProps> = (props) => {
+export const ArrayFieldComponent: ArrayFieldClientComponent = (props) => {
   const {
     descriptionProps,
     errorProps,
@@ -88,7 +92,7 @@ export const ArrayFieldComponent: React.FC<ArrayFieldProps> = (props) => {
   })()
 
   // Handle labeling for Arrays, Global Arrays, and Blocks
-  const getLabels = (p: ArrayFieldProps): Partial<ArrayFieldType['labels']> => {
+  const getLabels = (p: ArrayFieldClientProps): Partial<ArrayFieldType['labels']> => {
     if ('labels' in p && p?.labels) {
       return p.labels
     }

packages/ui/src/fields/Blocks/index.tsx

@@ -1,5 +1,5 @@
 'use client'
-import type { BlockFieldProps } from 'payload'
+import type { BlocksFieldClientComponent } from 'payload'
 
 import { getTranslation } from '@payloadcms/translations'
 import React, { Fragment, useCallback } from 'react'
@@ -32,7 +32,7 @@ import './index.scss'
 
 const baseClass = 'blocks-field'
 
-const BlocksFieldComponent: React.FC<BlockFieldProps> = (props) => {
+const BlocksFieldComponent: BlocksFieldClientComponent = (props) => {
   const { i18n, t } = useTranslation()
 
   const {

packages/ui/src/fields/Checkbox/index.tsx

@@ -1,5 +1,9 @@
 'use client'
-import type { CheckboxFieldProps, CheckboxFieldValidation } from 'payload'
+import type {
+  CheckboxFieldClientComponent,
+  CheckboxFieldClientProps,
+  CheckboxFieldValidation,
+} from 'payload'
 
 import React, { useCallback } from 'react'
 
@@ -19,9 +23,9 @@ import { CheckboxInput } from './Input.js'
 
 const baseClass = 'checkbox'
 
-export { CheckboxFieldProps, CheckboxInput, type CheckboxInputProps }
+export { CheckboxFieldClientProps, CheckboxInput, type CheckboxInputProps }
 
-const CheckboxFieldComponent: React.FC<CheckboxFieldProps> = (props) => {
+const CheckboxFieldComponent: CheckboxFieldClientComponent = (props) => {
   const {
     id,
     checked: checkedFromProps,
@@ -38,10 +42,10 @@ const CheckboxFieldComponent: React.FC<CheckboxFieldProps> = (props) => {
         readOnly: readOnlyFromAdmin,
         style,
         width,
-      } = {} as CheckboxFieldProps['field']['admin'],
+      } = {} as CheckboxFieldClientProps['field']['admin'],
       label,
       required,
-    } = {} as CheckboxFieldProps['field'],
+    } = {} as CheckboxFieldClientProps['field'],
     labelProps,
     onChange: onChangeFromProps,
     partialChecked,

packages/ui/src/fields/Code/index.tsx

@@ -1,5 +1,5 @@
 'use client'
-import type { CodeFieldProps } from 'payload'
+import type { CodeFieldClientComponent } from 'payload'
 
 import React, { useCallback } from 'react'
 
@@ -21,7 +21,7 @@ const prismToMonacoLanguageMap = {
 
 const baseClass = 'code-field'
 
-const CodeFieldComponent: React.FC<CodeFieldProps> = (props) => {
+const CodeFieldComponent: CodeFieldClientComponent = (props) => {
   const {
     descriptionProps,
     errorProps,

packages/ui/src/fields/Collapsible/index.tsx

@@ -1,5 +1,5 @@
 'use client'
-import type { CollapsibleFieldProps, DocumentPreferences } from 'payload'
+import type { CollapsibleFieldClientComponent, DocumentPreferences } from 'payload'
 
 import React, { Fragment, useCallback, useEffect, useState } from 'react'
 
@@ -21,7 +21,7 @@ const baseClass = 'collapsible-field'
 import { useFormInitializing, useFormProcessing } from '../../forms/Form/context.js'
 import { FieldDescription } from '../FieldDescription/index.js'
 
-const CollapsibleFieldComponent: React.FC<CollapsibleFieldProps> = (props) => {
+const CollapsibleFieldComponent: CollapsibleFieldClientComponent = (props) => {
   const {
     descriptionProps,
     field,

packages/ui/src/fields/DateTime/index.tsx

@@ -1,5 +1,5 @@
 'use client'
-import type { DateFieldProps, DateFieldValidation } from 'payload'
+import type { DateFieldClientComponent, DateFieldValidation } from 'payload'
 
 import { getTranslation } from '@payloadcms/translations'
 import React, { useCallback } from 'react'
@@ -19,7 +19,7 @@ import { RenderComponent } from '../../providers/Config/RenderComponent.js'
 import { FieldDescription } from '../FieldDescription/index.js'
 import { FieldError } from '../FieldError/index.js'
 
-const DateTimeFieldComponent: React.FC<DateFieldProps> = (props) => {
+const DateTimeFieldComponent: DateFieldClientComponent = (props) => {
   const {
     descriptionProps,
     errorProps,

packages/ui/src/fields/Email/index.tsx

@@ -1,5 +1,9 @@
 'use client'
-import type { EmailFieldProps, EmailFieldValidation } from 'payload'
+import type {
+  EmailFieldClientComponent,
+  EmailFieldClientProps,
+  EmailFieldValidation,
+} from 'payload'
 
 import { getTranslation } from '@payloadcms/translations'
 import React, { useCallback } from 'react'
@@ -15,7 +19,7 @@ import { FieldLabel } from '../FieldLabel/index.js'
 import { fieldBaseClass } from '../shared/index.js'
 import './index.scss'
 
-const EmailFieldComponent: React.FC<EmailFieldProps> = (props) => {
+const EmailFieldComponent: EmailFieldClientComponent = (props) => {
   const {
     autoComplete,
     descriptionProps,
@@ -31,10 +35,10 @@ const EmailFieldComponent: React.FC<EmailFieldProps> = (props) => {
         placeholder,
         style,
         width,
-      } = {} as EmailFieldProps['field']['admin'],
+      } = {} as EmailFieldClientProps['field']['admin'],
       label,
       required,
-    } = {} as EmailFieldProps['field'],
+    } = {} as EmailFieldClientProps['field'],
     field,
     labelProps,
     readOnly: readOnlyFromTopLevelProps,

packages/ui/src/fields/Group/index.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import type { GroupFieldProps } from 'payload'
+import type { GroupFieldClientComponent } from 'payload'
 
 import { getTranslation } from '@payloadcms/translations'
 import React from 'react'
@@ -27,7 +27,7 @@ import { GroupProvider, useGroup } from './provider.js'
 
 const baseClass = 'group-field'
 
-export const GroupFieldComponent: React.FC<GroupFieldProps> = (props) => {
+export const GroupFieldComponent: GroupFieldClientComponent = (props) => {
   const {
     descriptionProps,
     field,

packages/ui/src/fields/JSON/index.tsx

@@ -1,5 +1,5 @@
 'use client'
-import type { JSONFieldProps } from 'payload'
+import type { JSONFieldClientComponent } from 'payload'
 
 import React, { useCallback, useEffect, useState } from 'react'
 
@@ -17,7 +17,7 @@ import { RenderComponent } from '../../providers/Config/RenderComponent.js'
 import { FieldDescription } from '../FieldDescription/index.js'
 import { FieldError } from '../FieldError/index.js'
 
-const JSONFieldComponent: React.FC<JSONFieldProps> = (props) => {
+const JSONFieldComponent: JSONFieldClientComponent = (props) => {
   const {
     descriptionProps,
     errorProps,

packages/ui/src/fields/Number/index.tsx

@@ -1,5 +1,5 @@
 'use client'
-import type { NumberFieldProps } from 'payload'
+import type { NumberFieldClientComponent, NumberFieldClientProps } from 'payload'
 
 import { getTranslation } from '@payloadcms/translations'
 import { isNumber } from 'payload/shared'
@@ -19,7 +19,7 @@ import { FieldLabel } from '../FieldLabel/index.js'
 import { fieldBaseClass } from '../shared/index.js'
 import './index.scss'
 
-const NumberFieldComponent: React.FC<NumberFieldProps> = (props) => {
+const NumberFieldComponent: NumberFieldClientComponent = (props) => {
   const {
     descriptionProps,
     errorProps,
@@ -35,7 +35,7 @@ const NumberFieldComponent: React.FC<NumberFieldProps> = (props) => {
         step = 1,
         style,
         width,
-      } = {} as NumberFieldProps['field']['admin'],
+      } = {} as NumberFieldClientProps['field']['admin'],
       hasMany = false,
       label,
       max = Infinity,

packages/ui/src/fields/Point/index.tsx

@@ -1,5 +1,5 @@
 'use client'
-import type { PointFieldProps, PointFieldValidation } from 'payload'
+import type { PointFieldClientComponent, PointFieldValidation } from 'payload'
 
 import { getTranslation } from '@payloadcms/translations'
 import React, { useCallback } from 'react'
@@ -18,7 +18,7 @@ import { FieldDescription } from '../FieldDescription/index.js'
 import { FieldError } from '../FieldError/index.js'
 import { FieldLabel } from '../FieldLabel/index.js'
 
-export const PointFieldComponent: React.FC<PointFieldProps> = (props) => {
+export const PointFieldComponent: PointFieldClientComponent = (props) => {
   const {
     descriptionProps,
     errorProps,

packages/ui/src/fields/RadioGroup/Radio/index.tsx

@@ -1,5 +1,5 @@
 'use client'
-import type { OptionObject, RadioFieldProps } from 'payload'
+import type { OptionObject, RadioFieldClientProps } from 'payload'
 
 import { getTranslation } from '@payloadcms/translations'
 import React from 'react'
@@ -13,7 +13,7 @@ const baseClass = 'radio-input'
 export const Radio: React.FC<{
   id: string
   isSelected: boolean
-  onChange: RadioFieldProps['onChange']
+  onChange: RadioFieldClientProps['onChange']
   option: OptionObject
   path: string
   readOnly?: boolean

packages/ui/src/fields/RadioGroup/index.tsx

@@ -1,5 +1,5 @@
 'use client'
-import type { RadioFieldProps } from 'payload'
+import type { RadioFieldClientComponent, RadioFieldClientProps } from 'payload'
 
 import { optionIsObject } from 'payload/shared'
 import React, { useCallback } from 'react'
@@ -18,7 +18,7 @@ import { useFieldProps } from '../../forms/FieldPropsProvider/index.js'
 import { FieldDescription } from '../FieldDescription/index.js'
 import { FieldError } from '../FieldError/index.js'
 
-const RadioGroupFieldComponent: React.FC<RadioFieldProps> = (props) => {
+const RadioGroupFieldComponent: RadioFieldClientComponent = (props) => {
   const {
     descriptionProps,
     errorProps,
@@ -33,11 +33,11 @@ const RadioGroupFieldComponent: React.FC<RadioFieldProps> = (props) => {
         readOnly: readOnlyFromAdmin,
         style,
         width,
-      } = {} as RadioFieldProps['field']['admin'],
+      } = {} as RadioFieldClientProps['field']['admin'],
       label,
       options = [],
       required,
-    } = {} as RadioFieldProps['field'],
+    } = {} as RadioFieldClientProps['field'],
     labelProps,
     onChange: onChangeFromProps,
     readOnly: readOnlyFromTopLevelProps,

packages/ui/src/fields/Relationship/index.tsx

@@ -1,5 +1,5 @@
 'use client'
-import type { PaginatedDocs, RelationshipFieldProps, Where } from 'payload'
+import type { PaginatedDocs, RelationshipFieldClientComponent, Where } from 'payload'
 
 import { wordBoundariesRegex } from 'payload/shared'
 import * as qs from 'qs-esm'
@@ -36,7 +36,7 @@ const maxResultsPerRequest = 10
 
 const baseClass = 'relationship'
 
-const RelationshipFieldComponent: React.FC<RelationshipFieldProps> = (props) => {
+const RelationshipFieldComponent: RelationshipFieldClientComponent = (props) => {
   const {
     descriptionProps,
     errorProps,

packages/ui/src/fields/RichText/index.tsx

@@ -1,7 +1,7 @@
 'use client'
-import type { RichTextFieldProps } from 'payload'
+import type { RichTextFieldClientProps } from 'payload'
 import type React from 'react'
 
-export const RichTextField: React.FC<RichTextFieldProps> = () => {
+export const RichTextField: React.FC<RichTextFieldClientProps> = () => {
   return null
 }

packages/ui/src/fields/Row/index.tsx

@@ -1,5 +1,5 @@
 'use client'
-import type { RowFieldProps } from 'payload'
+import type { RowFieldClientComponent } from 'payload'
 
 import React from 'react'
 
@@ -14,7 +14,7 @@ export { RowProvider, useRow }
 
 const baseClass = 'row'
 
-const RowFieldComponent: React.FC<RowFieldProps> = (props) => {
+const RowFieldComponent: RowFieldClientComponent = (props) => {
   const {
     field: { admin: { className } = {}, fields },
     forceRender = false,

packages/ui/src/fields/Select/index.tsx

@@ -1,5 +1,10 @@
 'use client'
-import type { Option, OptionObject, SelectFieldProps } from 'payload'
+import type {
+  Option,
+  OptionObject,
+  SelectFieldClientComponent,
+  SelectFieldClientProps,
+} from 'payload'
 
 import React, { useCallback } from 'react'
 
@@ -23,7 +28,7 @@ const formatOptions = (options: Option[]): OptionObject[] =>
     } as OptionObject
   })
 
-const SelectFieldComponent: React.FC<SelectFieldProps> = (props) => {
+const SelectFieldComponent: SelectFieldClientComponent = (props) => {
   const {
     field,
     field: {
@@ -37,7 +42,7 @@ const SelectFieldComponent: React.FC<SelectFieldProps> = (props) => {
         readOnly: readOnlyFromAdmin,
         style,
         width,
-      } = {} as SelectFieldProps['field']['admin'],
+      } = {} as SelectFieldClientProps['field']['admin'],
       hasMany = false,
       label,
       options: optionsFromProps = [],

packages/ui/src/fields/Tabs/index.tsx

@@ -1,5 +1,5 @@
 'use client'
-import type { DocumentPreferences, TabsFieldProps } from 'payload'
+import type { DocumentPreferences, TabsFieldClientComponent } from 'payload'
 
 import { getTranslation } from '@payloadcms/translations'
 import { tabHasName, toKebabCase } from 'payload/shared'
@@ -22,7 +22,7 @@ const baseClass = 'tabs-field'
 
 export { TabsProvider }
 
-const TabsFieldComponent: React.FC<TabsFieldProps> = (props) => {
+const TabsFieldComponent: TabsFieldClientComponent = (props) => {
   const {
     field,
     field: {

packages/ui/src/fields/Text/index.tsx

@@ -1,5 +1,5 @@
 'use client'
-import type { TextFieldProps } from 'payload'
+import type { TextFieldClientComponent } from 'payload'
 
 import React, { useCallback, useEffect, useState } from 'react'
 
@@ -17,7 +17,7 @@ import { TextInput } from './Input.js'
 
 export { TextInput, TextInputProps }
 
-const TextFieldComponent: React.FC<TextFieldProps> = (props) => {
+const TextFieldComponent: TextFieldClientComponent = (props) => {
   const {
     field,
     field: {

packages/ui/src/fields/Textarea/index.tsx

@@ -1,5 +1,5 @@
 'use client'
-import type { TextareaFieldProps, TextareaFieldValidation } from 'payload'
+import type { TextareaFieldClientComponent, TextareaFieldValidation } from 'payload'
 
 import { getTranslation } from '@payloadcms/translations'
 import React, { useCallback } from 'react'
@@ -17,7 +17,7 @@ import { TextareaInput } from './Input.js'
 
 export { TextareaInput, TextAreaInputProps }
 
-const TextareaFieldComponent: React.FC<TextareaFieldProps> = (props) => {
+const TextareaFieldComponent: TextareaFieldClientComponent = (props) => {
   const {
     descriptionProps,
     errorProps,

packages/ui/src/fields/Upload/index.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import type { UploadFieldProps } from 'payload'
+import type { UploadFieldClientProps } from 'payload'
 
 import React from 'react'
 
@@ -15,7 +15,7 @@ export type { UploadInputProps } from './Input.js'
 
 export const baseClass = 'upload'
 
-export function UploadComponent(props: UploadFieldProps) {
+export function UploadComponent(props: UploadFieldClientProps) {
   const {
     field: {
       _path,

templates/website/src/fields/slug/SlugComponent.tsx

@@ -10,15 +10,14 @@ import {
   useFormFields,
 } from '@payloadcms/ui'
 
-import type { TextFieldProps } from 'payload'
-
 import { formatSlug } from './formatSlug'
 import './index.scss'
+import { TextFieldClientProps } from 'payload'
 
 type SlugComponentProps = {
   fieldToUse: string
   checkboxFieldPath: string
-} & TextFieldProps
+} & TextFieldClientProps
 
 export const SlugComponent: React.FC<SlugComponentProps> = ({
   field,

test/_community/collections/Posts/MyClientComponent.tsx

@@ -0,0 +1,9 @@
+'use client'
+import type { TextFieldClientComponent } from 'payload'
+
+import React from 'react'
+
+export const MyClientComponent: TextFieldClientComponent = (props) => {
+  const { field } = props
+  return <p>{`The name of this field is: ${field.name}`}</p>
+}

test/_community/collections/Posts/MyComponent.tsx

@@ -1,6 +0,0 @@
-'use client'
-import React from 'react'
-
-export const MyComponent: React.FC = () => {
-  return <p>Some custom label</p>
-}

test/_community/collections/Posts/MyServerComponent.tsx

@@ -0,0 +1,9 @@
+import type { TextFieldServerComponent } from 'payload'
+
+import React from 'react'
+
+export const MyServerComponent: TextFieldServerComponent = (props) => {
+  const { field } = props
+
+  return <p>{`The name of this field is: ${field.name}`}</p>
+}

test/_community/collections/Posts/index.ts

@@ -11,11 +11,20 @@ export const PostsCollection: CollectionConfig = {
     {
       admin: {
         components: {
-          Label: '/collections/Posts/MyComponent.js#MyComponent',
+          Label: '/collections/Posts/MyClientComponent.js#MyClientComponent',
         },
-        description: 'This is a description',
       },
       name: 'text',
+      label: 'Client Text Field',
+      type: 'text',
+    },
+    {
+      admin: {
+        components: {
+          Label: '/collections/Posts/MyServerComponent.js#MyServerComponent',
+        },
+      },
+      name: 'serverTextField',
       type: 'text',
     },
     {

test/_community/payload-types.ts

@@ -54,7 +54,8 @@ export interface UserAuthOperations {
  */
 export interface Post {
   id: string;
-  text?: string | null;
+  customClientField?: string | null;
+  customServerField?: string | null;
   richText?: {
     root: {
       type: string;