docs: adds examples of typed custom field components (#10741)

Although the "customizing fields" doc provides a big picture overview of how to create custom field components, it is not explicit enough for developers to know exactly where to start. For example, it can be challenging to import the correct types when building these components, and the natural place to go looking for this information is on the fields docs themselves. Now, each field doc has its own dedicated "custom components" section which provides concrete examples for fields and field labels in both server and client component format, with more examples to come over time such as using inputs directly, etc. In the same vein, the "customizing fields" doc itself should probably be moved to the fields overview section so it remains as intuitive as possible when searching for this information.
2025-01-22 23:07:09 -05:00
parent 3501d47e2d
commit 8b3e2ff5e5
76 changed files with 2043 additions and 458 deletions
--- a/examples/custom-components/pnpm-lock.yaml
+++ b/examples/custom-components/pnpm-lock.yaml
--- a/examples/custom-components/src/app/(payload)/admin/importMap.js
+++ b/examples/custom-components/src/app/(payload)/admin/importMap.js
@@ -8,6 +8,10 @@ import { CustomCheckboxFieldLabelServer as CustomCheckboxFieldLabelServer_48cd2d
 import { CustomCheckboxFieldServer as CustomCheckboxFieldServer_85023d60242dd4cca7c406a728ec37a8 } from '@/collections/Fields/checkbox/components/server/Field'
 import { CustomCheckboxFieldLabelClient as CustomCheckboxFieldLabelClient_f2b214145c1cbe98957573cf62455194 } from '@/collections/Fields/checkbox/components/client/Label'
 import { CustomCheckboxFieldClient as CustomCheckboxFieldClient_a13e6003bc89da826df764d7234782de } from '@/collections/Fields/checkbox/components/client/Field'
+import { CustomCodeFieldLabelServer as CustomCodeFieldLabelServer_566aaa8491895af5900235f95e62c2cf } from '@/collections/Fields/code/components/server/Label'
+import { CustomCodeFieldServer as CustomCodeFieldServer_e76f292770f788ad4ec46a180ab3c174 } from '@/collections/Fields/code/components/server/Field'
+import { CustomCodeFieldLabelClient as CustomCodeFieldLabelClient_823b02f23d594204cfa7fcfc30aeed46 } from '@/collections/Fields/code/components/client/Label'
+import { CustomCodeFieldClient as CustomCodeFieldClient_2ef913b825e7bb326ec86b0f6ea4dd3c } from '@/collections/Fields/code/components/client/Field'
 import { CustomDateFieldLabelServer as CustomDateFieldLabelServer_ae9eb459b79a1363a40d62b1e463aa6b } from '@/collections/Fields/date/components/server/Label'
 import { CustomDateFieldServer as CustomDateFieldServer_9d448604d99b3b06826ea95986ffd27b } from '@/collections/Fields/date/components/server/Field'
 import { CustomDateFieldLabelClient as CustomDateFieldLabelClient_0b6c1439c63aadfd306cf432713a52d8 } from '@/collections/Fields/date/components/client/Label'
@@ -16,6 +20,10 @@ import { CustomEmailFieldLabelServer as CustomEmailFieldLabelServer_a5097abb06ef
 import { CustomEmailFieldServer as CustomEmailFieldServer_457ae84519701bf0b287c30a994ddab1 } from '@/collections/Fields/email/components/server/Field'
 import { CustomEmailFieldLabelClient as CustomEmailFieldLabelClient_147edabdb378c855b9c8c06b8c627e50 } from '@/collections/Fields/email/components/client/Label'
 import { CustomEmailFieldClient as CustomEmailFieldClient_e22bcec891915f255e5ac6e1850aeb97 } from '@/collections/Fields/email/components/client/Field'
+import { CustomJSONFieldLabelServer as CustomJSONFieldLabelServer_94d8c8f7c699cb282fb912bead88f8b6 } from '@/collections/Fields/json/components/server/Label'
+import { CustomJSONFieldServer as CustomJSONFieldServer_6034ebd8b071080c9e06e4abab7a6fd2 } from '@/collections/Fields/json/components/server/Field'
+import { CustomJSONFieldLabelClient as CustomJSONFieldLabelClient_16798ccfd3eb2cb009c4f0ea34c3c31e } from '@/collections/Fields/json/components/client/Label'
+import { CustomJSONFieldClient as CustomJSONFieldClient_077b2498f1ebe1df34940ffc4ce4f8e6 } from '@/collections/Fields/json/components/client/Field'
 import { CustomNumberFieldLabelServer as CustomNumberFieldLabelServer_1b47d0cd70ad88e23dcf9c4f91bf319f } from '@/collections/Fields/number/components/server/Label'
 import { CustomNumberFieldServer as CustomNumberFieldServer_54fc6ad95d89a3b66b59136e84d20b86 } from '@/collections/Fields/number/components/server/Field'
 import { CustomNumberFieldLabelClient as CustomNumberFieldLabelClient_dd3e3dcfc7b07c3a02f947ac81718a51 } from '@/collections/Fields/number/components/client/Label'
@@ -55,59 +63,130 @@ import { CustomDefaultRootView as CustomDefaultRootView_a2f8ce99b3a1692f7ec03a90
 import { CustomMinimalRootView as CustomMinimalRootView_9211f699dea5524a957f33011b786586 } from '@/components/views/CustomMinimalRootView'

 export const importMap = {
-  "@/collections/Fields/array/components/server/Label#CustomArrayFieldLabelServer": CustomArrayFieldLabelServer_f8d063e9b7f25c350451c1865199c947,
-  "@/collections/Fields/array/components/server/Field#CustomArrayFieldServer": CustomArrayFieldServer_4c3c139a9b1a198103c8a2ec2869c837,
-  "@/collections/Fields/array/components/client/Label#CustomArrayFieldLabelClient": CustomArrayFieldLabelClient_c07dc2c547c47aca8e9f471795279e9d,
-  "@/collections/Fields/array/components/client/Field#CustomArrayFieldClient": CustomArrayFieldClient_60ede271f2b85983daf36710010ad8ab,
-  "@/collections/Fields/blocks/components/server/Field#CustomBlocksFieldServer": CustomBlocksFieldServer_61732537ad2c492ac9938959902f6954,
-  "@/collections/Fields/blocks/components/client/Field#CustomBlocksFieldClient": CustomBlocksFieldClient_2ef3a03de3974b6f18f07623af0cd515,
-  "@/collections/Fields/checkbox/components/server/Label#CustomCheckboxFieldLabelServer": CustomCheckboxFieldLabelServer_48cd2d9639f54745ad4cdb6905c825d9,
-  "@/collections/Fields/checkbox/components/server/Field#CustomCheckboxFieldServer": CustomCheckboxFieldServer_85023d60242dd4cca7c406a728ec37a8,
-  "@/collections/Fields/checkbox/components/client/Label#CustomCheckboxFieldLabelClient": CustomCheckboxFieldLabelClient_f2b214145c1cbe98957573cf62455194,
-  "@/collections/Fields/checkbox/components/client/Field#CustomCheckboxFieldClient": CustomCheckboxFieldClient_a13e6003bc89da826df764d7234782de,
-  "@/collections/Fields/date/components/server/Label#CustomDateFieldLabelServer": CustomDateFieldLabelServer_ae9eb459b79a1363a40d62b1e463aa6b,
-  "@/collections/Fields/date/components/server/Field#CustomDateFieldServer": CustomDateFieldServer_9d448604d99b3b06826ea95986ffd27b,
-  "@/collections/Fields/date/components/client/Label#CustomDateFieldLabelClient": CustomDateFieldLabelClient_0b6c1439c63aadfd306cf432713a52d8,
-  "@/collections/Fields/date/components/client/Field#CustomDateFieldClient": CustomDateFieldClient_4ef537c727f5de7c26aaea94024a0b2c,
-  "@/collections/Fields/email/components/server/Label#CustomEmailFieldLabelServer": CustomEmailFieldLabelServer_a5097abb06efbe71fc6ba1636f7194ab,
-  "@/collections/Fields/email/components/server/Field#CustomEmailFieldServer": CustomEmailFieldServer_457ae84519701bf0b287c30a994ddab1,
-  "@/collections/Fields/email/components/client/Label#CustomEmailFieldLabelClient": CustomEmailFieldLabelClient_147edabdb378c855b9c8c06b8c627e50,
-  "@/collections/Fields/email/components/client/Field#CustomEmailFieldClient": CustomEmailFieldClient_e22bcec891915f255e5ac6e1850aeb97,
-  "@/collections/Fields/number/components/server/Label#CustomNumberFieldLabelServer": CustomNumberFieldLabelServer_1b47d0cd70ad88e23dcf9c4f91bf319f,
-  "@/collections/Fields/number/components/server/Field#CustomNumberFieldServer": CustomNumberFieldServer_54fc6ad95d89a3b66b59136e84d20b86,
-  "@/collections/Fields/number/components/client/Label#CustomNumberFieldLabelClient": CustomNumberFieldLabelClient_dd3e3dcfc7b07c3a02f947ac81718a51,
-  "@/collections/Fields/number/components/client/Field#CustomNumberFieldClient": CustomNumberFieldClient_5d5605680426c77470fd74d010fe051f,
-  "@/collections/Fields/point/components/server/Label#CustomPointFieldLabelServer": CustomPointFieldLabelServer_c5fb0c717f353a8c6149238dd7d92ec9,
-  "@/collections/Fields/point/components/server/Field#CustomPointFieldServer": CustomPointFieldServer_a23d13971ed0ff10615e3248bb1ee55d,
-  "@/collections/Fields/point/components/client/Label#CustomPointFieldLabelClient": CustomPointFieldLabelClient_3c6c8c891bc098021e618d5cf4dc3150,
-  "@/collections/Fields/point/components/client/Field#CustomPointFieldClient": CustomPointFieldClient_abb4ee1633cbc83b4cec9b8abb95f132,
-  "@/collections/Fields/radio/components/server/Label#CustomRadioFieldLabelServer": CustomRadioFieldLabelServer_5c732ac2af72bb41657cc9a1a22bc67b,
-  "@/collections/Fields/radio/components/server/Field#CustomRadioFieldServer": CustomRadioFieldServer_b7edb363e225e2976a994da8e8803e60,
-  "@/collections/Fields/radio/components/client/Label#CustomRadioFieldLabelClient": CustomRadioFieldLabelClient_d46d0583023d87065f05972901727bbf,
-  "@/collections/Fields/radio/components/client/Field#CustomRadioFieldClient": CustomRadioFieldClient_42845db96f999817cb9f0a590413d669,
-  "@/collections/Fields/relationship/components/server/Label#CustomRelationshipFieldLabelServer": CustomRelationshipFieldLabelServer_7c45510caabe204587b638c40f0d0a70,
-  "@/collections/Fields/relationship/components/server/Field#CustomRelationshipFieldServer": CustomRelationshipFieldServer_d2e0b17d4b1c00b1fc726f0ea55ddc16,
-  "@/collections/Fields/relationship/components/client/Label#CustomRelationshipFieldLabelClient": CustomRelationshipFieldLabelClient_37b268226ded7dd38d5cb8f2952f4b3a,
-  "@/collections/Fields/relationship/components/client/Field#CustomRelationshipFieldClient": CustomRelationshipFieldClient_eb1bc838beb92b05ba1bb9c1fdfd7869,
-  "@/collections/Fields/select/components/server/Label#CustomSelectFieldLabelServer": CustomSelectFieldLabelServer_653acab80b672fd4ebeeed757e09d4c9,
-  "@/collections/Fields/select/components/server/Field#CustomSelectFieldServer": CustomSelectFieldServer_ee886c859ef756c29ae7383a2be0a08a,
-  "@/collections/Fields/select/components/client/Label#CustomSelectFieldLabelClient": CustomSelectFieldLabelClient_2db542ef2e0a664acaa5679fc14aa54b,
-  "@/collections/Fields/select/components/client/Field#CustomSelectFieldClient": CustomSelectFieldClient_c8b4c7f3e98b5887ca262dd841bffa2f,
-  "@/collections/Fields/text/components/server/Label#CustomTextFieldLabelServer": CustomTextFieldLabelServer_64a4b68861269d69d4c16a0f651b7ac9,
-  "@/collections/Fields/text/components/server/Field#CustomTextFieldServer": CustomTextFieldServer_e0caaef49c00003336b08d834c0c9fe9,
-  "@/collections/Fields/text/components/client/Label#CustomTextFieldLabelClient": CustomTextFieldLabelClient_9af2b9e4733a9fc79fb9dfb1578c18bf,
-  "@/collections/Fields/text/components/client/Field#CustomTextFieldClient": CustomTextFieldClient_c7c0687b5204b201f8b1af831f34fd98,
-  "@/collections/Fields/textarea/components/server/Label#CustomTextareaFieldLabelServer": CustomTextareaFieldLabelServer_5c8f706a3452bccefa9f5044e2cd250c,
-  "@/collections/Fields/textarea/components/server/Field#CustomTextareaFieldServer": CustomTextareaFieldServer_3f7b621f5c4c42971fc099a1fa492d99,
-  "@/collections/Fields/textarea/components/client/Label#CustomTextareaFieldLabelClient": CustomTextareaFieldLabelClient_9959ee64353edb5f2606b52187275823,
-  "@/collections/Fields/textarea/components/client/Field#CustomTextareaFieldClient": CustomTextareaFieldClient_4fd3331c38982e86768c64dcc9a10691,
-  "@/collections/Views/components/CustomTabEditView#CustomTabEditView": CustomTabEditView_0a7acb05a3192ecfa7e07f8b42e7a193,
-  "@/collections/Views/components/CustomDefaultEditView#CustomDefaultEditView": CustomDefaultEditView_2d3c652c5909d3a3dc3464f0547d5424,
-  "@/collections/RootViews/components/CustomRootEditView#CustomRootEditView": CustomRootEditView_ba37229da543ad3c8dc40f7a48771f99,
-  "@/components/afterNavLinks/LinkToCustomView#LinkToCustomView": LinkToCustomView_6f16fe358985478a2ead2354ef2cc9a0,
-  "@/components/afterNavLinks/LinkToCustomMinimalView#LinkToCustomMinimalView": LinkToCustomMinimalView_fd2cefb054695a5b60b860a69d67d15d,
-  "@/components/afterNavLinks/LinkToCustomDefaultView#LinkToCustomDefaultView": LinkToCustomDefaultView_4c5f581c8bfa951ce2f83c24c4f36b3b,
-  "@/components/views/CustomRootView#CustomRootView": CustomRootView_1ebb91ef5ff1ea4dc9a27ceb8e9ee0ab,
-  "@/components/views/CustomDefaultRootView#CustomDefaultRootView": CustomDefaultRootView_a2f8ce99b3a1692f7ec03a907e1ea4ce,
-  "@/components/views/CustomMinimalRootView#CustomMinimalRootView": CustomMinimalRootView_9211f699dea5524a957f33011b786586
+  '@/collections/Fields/array/components/server/Label#CustomArrayFieldLabelServer':
+    CustomArrayFieldLabelServer_f8d063e9b7f25c350451c1865199c947,
+  '@/collections/Fields/array/components/server/Field#CustomArrayFieldServer':
+    CustomArrayFieldServer_4c3c139a9b1a198103c8a2ec2869c837,
+  '@/collections/Fields/array/components/client/Label#CustomArrayFieldLabelClient':
+    CustomArrayFieldLabelClient_c07dc2c547c47aca8e9f471795279e9d,
+  '@/collections/Fields/array/components/client/Field#CustomArrayFieldClient':
+    CustomArrayFieldClient_60ede271f2b85983daf36710010ad8ab,
+  '@/collections/Fields/blocks/components/server/Field#CustomBlocksFieldServer':
+    CustomBlocksFieldServer_61732537ad2c492ac9938959902f6954,
+  '@/collections/Fields/blocks/components/client/Field#CustomBlocksFieldClient':
+    CustomBlocksFieldClient_2ef3a03de3974b6f18f07623af0cd515,
+  '@/collections/Fields/checkbox/components/server/Label#CustomCheckboxFieldLabelServer':
+    CustomCheckboxFieldLabelServer_48cd2d9639f54745ad4cdb6905c825d9,
+  '@/collections/Fields/checkbox/components/server/Field#CustomCheckboxFieldServer':
+    CustomCheckboxFieldServer_85023d60242dd4cca7c406a728ec37a8,
+  '@/collections/Fields/checkbox/components/client/Label#CustomCheckboxFieldLabelClient':
+    CustomCheckboxFieldLabelClient_f2b214145c1cbe98957573cf62455194,
+  '@/collections/Fields/checkbox/components/client/Field#CustomCheckboxFieldClient':
+    CustomCheckboxFieldClient_a13e6003bc89da826df764d7234782de,
+  '@/collections/Fields/code/components/server/Label#CustomCodeFieldLabelServer':
+    CustomCodeFieldLabelServer_566aaa8491895af5900235f95e62c2cf,
+  '@/collections/Fields/code/components/server/Field#CustomCodeFieldServer':
+    CustomCodeFieldServer_e76f292770f788ad4ec46a180ab3c174,
+  '@/collections/Fields/code/components/client/Label#CustomCodeFieldLabelClient':
+    CustomCodeFieldLabelClient_823b02f23d594204cfa7fcfc30aeed46,
+  '@/collections/Fields/code/components/client/Field#CustomCodeFieldClient':
+    CustomCodeFieldClient_2ef913b825e7bb326ec86b0f6ea4dd3c,
+  '@/collections/Fields/date/components/server/Label#CustomDateFieldLabelServer':
+    CustomDateFieldLabelServer_ae9eb459b79a1363a40d62b1e463aa6b,
+  '@/collections/Fields/date/components/server/Field#CustomDateFieldServer':
+    CustomDateFieldServer_9d448604d99b3b06826ea95986ffd27b,
+  '@/collections/Fields/date/components/client/Label#CustomDateFieldLabelClient':
+    CustomDateFieldLabelClient_0b6c1439c63aadfd306cf432713a52d8,
+  '@/collections/Fields/date/components/client/Field#CustomDateFieldClient':
+    CustomDateFieldClient_4ef537c727f5de7c26aaea94024a0b2c,
+  '@/collections/Fields/email/components/server/Label#CustomEmailFieldLabelServer':
+    CustomEmailFieldLabelServer_a5097abb06efbe71fc6ba1636f7194ab,
+  '@/collections/Fields/email/components/server/Field#CustomEmailFieldServer':
+    CustomEmailFieldServer_457ae84519701bf0b287c30a994ddab1,
+  '@/collections/Fields/email/components/client/Label#CustomEmailFieldLabelClient':
+    CustomEmailFieldLabelClient_147edabdb378c855b9c8c06b8c627e50,
+  '@/collections/Fields/email/components/client/Field#CustomEmailFieldClient':
+    CustomEmailFieldClient_e22bcec891915f255e5ac6e1850aeb97,
+  '@/collections/Fields/json/components/server/Label#CustomJSONFieldLabelServer':
+    CustomJSONFieldLabelServer_94d8c8f7c699cb282fb912bead88f8b6,
+  '@/collections/Fields/json/components/server/Field#CustomJSONFieldServer':
+    CustomJSONFieldServer_6034ebd8b071080c9e06e4abab7a6fd2,
+  '@/collections/Fields/json/components/client/Label#CustomJSONFieldLabelClient':
+    CustomJSONFieldLabelClient_16798ccfd3eb2cb009c4f0ea34c3c31e,
+  '@/collections/Fields/json/components/client/Field#CustomJSONFieldClient':
+    CustomJSONFieldClient_077b2498f1ebe1df34940ffc4ce4f8e6,
+  '@/collections/Fields/number/components/server/Label#CustomNumberFieldLabelServer':
+    CustomNumberFieldLabelServer_1b47d0cd70ad88e23dcf9c4f91bf319f,
+  '@/collections/Fields/number/components/server/Field#CustomNumberFieldServer':
+    CustomNumberFieldServer_54fc6ad95d89a3b66b59136e84d20b86,
+  '@/collections/Fields/number/components/client/Label#CustomNumberFieldLabelClient':
+    CustomNumberFieldLabelClient_dd3e3dcfc7b07c3a02f947ac81718a51,
+  '@/collections/Fields/number/components/client/Field#CustomNumberFieldClient':
+    CustomNumberFieldClient_5d5605680426c77470fd74d010fe051f,
+  '@/collections/Fields/point/components/server/Label#CustomPointFieldLabelServer':
+    CustomPointFieldLabelServer_c5fb0c717f353a8c6149238dd7d92ec9,
+  '@/collections/Fields/point/components/server/Field#CustomPointFieldServer':
+    CustomPointFieldServer_a23d13971ed0ff10615e3248bb1ee55d,
+  '@/collections/Fields/point/components/client/Label#CustomPointFieldLabelClient':
+    CustomPointFieldLabelClient_3c6c8c891bc098021e618d5cf4dc3150,
+  '@/collections/Fields/point/components/client/Field#CustomPointFieldClient':
+    CustomPointFieldClient_abb4ee1633cbc83b4cec9b8abb95f132,
+  '@/collections/Fields/radio/components/server/Label#CustomRadioFieldLabelServer':
+    CustomRadioFieldLabelServer_5c732ac2af72bb41657cc9a1a22bc67b,
+  '@/collections/Fields/radio/components/server/Field#CustomRadioFieldServer':
+    CustomRadioFieldServer_b7edb363e225e2976a994da8e8803e60,
+  '@/collections/Fields/radio/components/client/Label#CustomRadioFieldLabelClient':
+    CustomRadioFieldLabelClient_d46d0583023d87065f05972901727bbf,
+  '@/collections/Fields/radio/components/client/Field#CustomRadioFieldClient':
+    CustomRadioFieldClient_42845db96f999817cb9f0a590413d669,
+  '@/collections/Fields/relationship/components/server/Label#CustomRelationshipFieldLabelServer':
+    CustomRelationshipFieldLabelServer_7c45510caabe204587b638c40f0d0a70,
+  '@/collections/Fields/relationship/components/server/Field#CustomRelationshipFieldServer':
+    CustomRelationshipFieldServer_d2e0b17d4b1c00b1fc726f0ea55ddc16,
+  '@/collections/Fields/relationship/components/client/Label#CustomRelationshipFieldLabelClient':
+    CustomRelationshipFieldLabelClient_37b268226ded7dd38d5cb8f2952f4b3a,
+  '@/collections/Fields/relationship/components/client/Field#CustomRelationshipFieldClient':
+    CustomRelationshipFieldClient_eb1bc838beb92b05ba1bb9c1fdfd7869,
+  '@/collections/Fields/select/components/server/Label#CustomSelectFieldLabelServer':
+    CustomSelectFieldLabelServer_653acab80b672fd4ebeeed757e09d4c9,
+  '@/collections/Fields/select/components/server/Field#CustomSelectFieldServer':
+    CustomSelectFieldServer_ee886c859ef756c29ae7383a2be0a08a,
+  '@/collections/Fields/select/components/client/Label#CustomSelectFieldLabelClient':
+    CustomSelectFieldLabelClient_2db542ef2e0a664acaa5679fc14aa54b,
+  '@/collections/Fields/select/components/client/Field#CustomSelectFieldClient':
+    CustomSelectFieldClient_c8b4c7f3e98b5887ca262dd841bffa2f,
+  '@/collections/Fields/text/components/server/Label#CustomTextFieldLabelServer':
+    CustomTextFieldLabelServer_64a4b68861269d69d4c16a0f651b7ac9,
+  '@/collections/Fields/text/components/server/Field#CustomTextFieldServer':
+    CustomTextFieldServer_e0caaef49c00003336b08d834c0c9fe9,
+  '@/collections/Fields/text/components/client/Label#CustomTextFieldLabelClient':
+    CustomTextFieldLabelClient_9af2b9e4733a9fc79fb9dfb1578c18bf,
+  '@/collections/Fields/text/components/client/Field#CustomTextFieldClient':
+    CustomTextFieldClient_c7c0687b5204b201f8b1af831f34fd98,
+  '@/collections/Fields/textarea/components/server/Label#CustomTextareaFieldLabelServer':
+    CustomTextareaFieldLabelServer_5c8f706a3452bccefa9f5044e2cd250c,
+  '@/collections/Fields/textarea/components/server/Field#CustomTextareaFieldServer':
+    CustomTextareaFieldServer_3f7b621f5c4c42971fc099a1fa492d99,
+  '@/collections/Fields/textarea/components/client/Label#CustomTextareaFieldLabelClient':
+    CustomTextareaFieldLabelClient_9959ee64353edb5f2606b52187275823,
+  '@/collections/Fields/textarea/components/client/Field#CustomTextareaFieldClient':
+    CustomTextareaFieldClient_4fd3331c38982e86768c64dcc9a10691,
+  '@/collections/Views/components/CustomTabEditView#CustomTabEditView':
+    CustomTabEditView_0a7acb05a3192ecfa7e07f8b42e7a193,
+  '@/collections/Views/components/CustomDefaultEditView#CustomDefaultEditView':
+    CustomDefaultEditView_2d3c652c5909d3a3dc3464f0547d5424,
+  '@/collections/RootViews/components/CustomRootEditView#CustomRootEditView':
+    CustomRootEditView_ba37229da543ad3c8dc40f7a48771f99,
+  '@/components/afterNavLinks/LinkToCustomView#LinkToCustomView':
+    LinkToCustomView_6f16fe358985478a2ead2354ef2cc9a0,
+  '@/components/afterNavLinks/LinkToCustomMinimalView#LinkToCustomMinimalView':
+    LinkToCustomMinimalView_fd2cefb054695a5b60b860a69d67d15d,
+  '@/components/afterNavLinks/LinkToCustomDefaultView#LinkToCustomDefaultView':
+    LinkToCustomDefaultView_4c5f581c8bfa951ce2f83c24c4f36b3b,
+  '@/components/views/CustomRootView#CustomRootView':
+    CustomRootView_1ebb91ef5ff1ea4dc9a27ceb8e9ee0ab,
+  '@/components/views/CustomDefaultRootView#CustomDefaultRootView':
+    CustomDefaultRootView_a2f8ce99b3a1692f7ec03a907e1ea4ce,
+  '@/components/views/CustomMinimalRootView#CustomMinimalRootView':
+    CustomMinimalRootView_9211f699dea5524a957f33011b786586,
 }
--- a/examples/custom-components/src/collections/Fields/array/components/client/Field.tsx
+++ b/examples/custom-components/src/collections/Fields/array/components/client/Field.tsx
@@ -5,5 +5,5 @@ import { ArrayField } from '@payloadcms/ui'
 import React from 'react'

 export const CustomArrayFieldClient: ArrayFieldClientComponent = (props) => {
-  return <ArrayField field={props?.field} path={props?.path} permissions={props?.permissions} />
+  return <ArrayField {...props} />
 }
--- a/examples/custom-components/src/collections/Fields/array/components/client/Label.tsx
+++ b/examples/custom-components/src/collections/Fields/array/components/client/Label.tsx
@@ -4,6 +4,6 @@ import type { ArrayFieldLabelClientComponent } from 'payload'
 import { FieldLabel } from '@payloadcms/ui'
 import React from 'react'

-export const CustomArrayFieldLabelClient: ArrayFieldLabelClientComponent = (props) => {
-  return <FieldLabel label={props?.label} path={props?.path} />
+export const CustomArrayFieldLabelClient: ArrayFieldLabelClientComponent = ({ field, path }) => {
+  return <FieldLabel label={field?.label || field?.name} path={path} required={field?.required} />
 }
--- a/examples/custom-components/src/collections/Fields/array/components/server/Field.tsx
+++ b/examples/custom-components/src/collections/Fields/array/components/server/Field.tsx
@@ -3,7 +3,13 @@ import type React from 'react'

 import { ArrayField } from '@payloadcms/ui'

-export const CustomArrayFieldServer: ArrayFieldServerComponent = (props) => {
-  const path = (props?.path || props?.field?.name || '') as string
-  return <ArrayField field={props.clientField} path={path} permissions={props?.permissions} />
+export const CustomArrayFieldServer: ArrayFieldServerComponent = ({
+  clientField,
+  path,
+  schemaPath,
+  permissions,
+}) => {
+  return (
+    <ArrayField field={clientField} path={path} schemaPath={schemaPath} permissions={permissions} />
+  )
 }
--- a/examples/custom-components/src/collections/Fields/array/components/server/Label.tsx
+++ b/examples/custom-components/src/collections/Fields/array/components/server/Label.tsx
@@ -3,6 +3,15 @@ import type { ArrayFieldLabelServerComponent } from 'payload'
 import { FieldLabel } from '@payloadcms/ui'
 import React from 'react'

-export const CustomArrayFieldLabelServer: ArrayFieldLabelServerComponent = (props) => {
-  return <FieldLabel label={props?.label} />
+export const CustomArrayFieldLabelServer: ArrayFieldLabelServerComponent = ({
+  clientField,
+  path,
+}) => {
+  return (
+    <FieldLabel
+      label={clientField?.label || clientField?.name}
+      required={clientField?.required}
+      path={path}
+    />
+  )
 }
--- a/examples/custom-components/src/collections/Fields/blocks/components/client/Field.tsx
+++ b/examples/custom-components/src/collections/Fields/blocks/components/client/Field.tsx
@@ -5,5 +5,5 @@ import { BlocksField } from '@payloadcms/ui'
 import React from 'react'

 export const CustomBlocksFieldClient: BlocksFieldClientComponent = (props) => {
-  return <BlocksField field={props?.field} path={props.path} permissions={props?.permissions} />
+  return <BlocksField {...props} />
 }
--- a/examples/custom-components/src/collections/Fields/blocks/components/client/Label.tsx
+++ b/examples/custom-components/src/collections/Fields/blocks/components/client/Label.tsx
@@ -4,6 +4,6 @@ import type { BlocksFieldLabelClientComponent } from 'payload'
 import { FieldLabel } from '@payloadcms/ui'
 import React from 'react'

-export const CustomBlocksFieldLabelClient: BlocksFieldLabelClientComponent = (props) => {
-  return <FieldLabel label={props?.label} />
+export const CustomBlocksFieldLabelClient: BlocksFieldLabelClientComponent = ({ field, path }) => {
+  return <FieldLabel label={field?.label || field?.name} path={path} required={field?.required} />
 }
--- a/examples/custom-components/src/collections/Fields/blocks/components/server/Field.tsx
+++ b/examples/custom-components/src/collections/Fields/blocks/components/server/Field.tsx
@@ -3,7 +3,18 @@ import type React from 'react'

 import { BlocksField } from '@payloadcms/ui'

-export const CustomBlocksFieldServer: BlocksFieldServerComponent = (props) => {
-  const path = (props?.path || props?.field?.name || '') as string
-  return <BlocksField field={props?.clientField} path={path} permissions={props?.permissions} />
+export const CustomBlocksFieldServer: BlocksFieldServerComponent = ({
+  clientField,
+  path,
+  schemaPath,
+  permissions,
+}) => {
+  return (
+    <BlocksField
+      field={clientField}
+      path={path}
+      schemaPath={schemaPath}
+      permissions={permissions}
+    />
+  )
 }
--- a/examples/custom-components/src/collections/Fields/blocks/components/server/Label.tsx
+++ b/examples/custom-components/src/collections/Fields/blocks/components/server/Label.tsx
@@ -3,6 +3,15 @@ import type { BlocksFieldLabelServerComponent } from 'payload'
 import { FieldLabel } from '@payloadcms/ui'
 import React from 'react'

-export const CustomBlocksFieldLabelServer: BlocksFieldLabelServerComponent = (props) => {
-  return <FieldLabel label={props?.label} />
+export const CustomBlocksFieldLabelServer: BlocksFieldLabelServerComponent = ({
+  clientField,
+  path,
+}) => {
+  return (
+    <FieldLabel
+      label={clientField?.label || clientField?.name}
+      path={path}
+      required={clientField?.required}
+    />
+  )
 }
--- a/examples/custom-components/src/collections/Fields/checkbox/components/client/Field.tsx
+++ b/examples/custom-components/src/collections/Fields/checkbox/components/client/Field.tsx
@@ -5,5 +5,5 @@ import { CheckboxField } from '@payloadcms/ui'
 import React from 'react'

 export const CustomCheckboxFieldClient: CheckboxFieldClientComponent = (props) => {
-  return <CheckboxField field={props?.field} path={props?.path} />
+  return <CheckboxField {...props} />
 }
--- a/examples/custom-components/src/collections/Fields/checkbox/components/client/Label.tsx
+++ b/examples/custom-components/src/collections/Fields/checkbox/components/client/Label.tsx
@@ -4,6 +4,9 @@ import type { CheckboxFieldLabelClientComponent } from 'payload'
 import { FieldLabel } from '@payloadcms/ui'
 import React from 'react'

-export const CustomCheckboxFieldLabelClient: CheckboxFieldLabelClientComponent = (props) => {
-  return <FieldLabel label={props?.label} path={props?.path} />
+export const CustomCheckboxFieldLabelClient: CheckboxFieldLabelClientComponent = ({
+  field,
+  path,
+}) => {
+  return <FieldLabel label={field?.label || field?.name} path={path} required={field?.required} />
 }
--- a/examples/custom-components/src/collections/Fields/checkbox/components/server/Field.tsx
+++ b/examples/custom-components/src/collections/Fields/checkbox/components/server/Field.tsx
@@ -3,7 +3,18 @@ import type React from 'react'

 import { CheckboxField } from '@payloadcms/ui'

-export const CustomCheckboxFieldServer: CheckboxFieldServerComponent = (props) => {
-  const path = (props?.path || props?.field?.name || '') as string
-  return <CheckboxField field={props?.clientField} path={path} />
+export const CustomCheckboxFieldServer: CheckboxFieldServerComponent = ({
+  clientField,
+  path,
+  schemaPath,
+  permissions,
+}) => {
+  return (
+    <CheckboxField
+      field={clientField}
+      path={path}
+      schemaPath={schemaPath}
+      permissions={permissions}
+    />
+  )
 }
--- a/examples/custom-components/src/collections/Fields/checkbox/components/server/Label.tsx
+++ b/examples/custom-components/src/collections/Fields/checkbox/components/server/Label.tsx
@@ -3,6 +3,15 @@ import type { CheckboxFieldLabelServerComponent } from 'payload'
 import { FieldLabel } from '@payloadcms/ui'
 import React from 'react'

-export const CustomCheckboxFieldLabelServer: CheckboxFieldLabelServerComponent = (props) => {
-  return <FieldLabel label={props?.label} path={props?.path} />
+export const CustomCheckboxFieldLabelServer: CheckboxFieldLabelServerComponent = ({
+  clientField,
+  path,
+}) => {
+  return (
+    <FieldLabel
+      label={clientField?.label || clientField?.name}
+      path={path}
+      required={clientField?.required}
+    />
+  )
 }
--- a/examples/custom-components/src/collections/Fields/code/components/client/Field.tsx
+++ b/examples/custom-components/src/collections/Fields/code/components/client/Field.tsx
@@ -0,0 +1,9 @@
+'use client'
+import type { CodeFieldClientComponent } from 'payload'
+
+import { CodeField } from '@payloadcms/ui'
+import React from 'react'
+
+export const CustomCodeFieldClient: CodeFieldClientComponent = (props) => {
+  return <CodeField {...props} />
+}
--- a/examples/custom-components/src/collections/Fields/code/components/client/Label.tsx
+++ b/examples/custom-components/src/collections/Fields/code/components/client/Label.tsx
@@ -0,0 +1,9 @@
+'use client'
+import type { CodeFieldLabelClientComponent } from 'payload'
+
+import { FieldLabel } from '@payloadcms/ui'
+import React from 'react'
+
+export const CustomCodeFieldLabelClient: CodeFieldLabelClientComponent = ({ field, path }) => {
+  return <FieldLabel label={field?.label || field?.name} path={path} required={field?.required} />
+}
--- a/examples/custom-components/src/collections/Fields/code/components/server/Field.tsx
+++ b/examples/custom-components/src/collections/Fields/code/components/server/Field.tsx
@@ -0,0 +1,15 @@
+import type { CodeFieldServerComponent } from 'payload'
+import type React from 'react'
+
+import { CodeField } from '@payloadcms/ui'
+
+export const CustomCodeFieldServer: CodeFieldServerComponent = ({
+  clientField,
+  path,
+  schemaPath,
+  permissions,
+}) => {
+  return (
+    <CodeField field={clientField} path={path} schemaPath={schemaPath} permissions={permissions} />
+  )
+}
--- a/examples/custom-components/src/collections/Fields/code/components/server/Label.tsx
+++ b/examples/custom-components/src/collections/Fields/code/components/server/Label.tsx
@@ -0,0 +1,17 @@
+import type { CodeFieldLabelServerComponent } from 'payload'
+
+import { FieldLabel } from '@payloadcms/ui'
+import React from 'react'
+
+export const CustomCodeFieldLabelServer: CodeFieldLabelServerComponent = ({
+  clientField,
+  path,
+}) => {
+  return (
+    <FieldLabel
+      label={clientField?.label || clientField?.name}
+      path={path}
+      required={clientField?.required}
+    />
+  )
+}
--- a/examples/custom-components/src/collections/Fields/code/index.ts
+++ b/examples/custom-components/src/collections/Fields/code/index.ts
@@ -0,0 +1,24 @@
+import type { CollectionConfig } from 'payload'
+
+export const codeFields: CollectionConfig['fields'] = [
+  {
+    name: 'codeFieldServerComponent',
+    type: 'code',
+    admin: {
+      components: {
+        Field: '@/collections/Fields/code/components/server/Field#CustomCodeFieldServer',
+        Label: '@/collections/Fields/code/components/server/Label#CustomCodeFieldLabelServer',
+      },
+    },
+  },
+  {
+    name: 'codeFieldClientComponent',
+    type: 'code',
+    admin: {
+      components: {
+        Field: '@/collections/Fields/code/components/client/Field#CustomCodeFieldClient',
+        Label: '@/collections/Fields/code/components/client/Label#CustomCodeFieldLabelClient',
+      },
+    },
+  },
+]
--- a/examples/custom-components/src/collections/Fields/date/components/client/Field.tsx
+++ b/examples/custom-components/src/collections/Fields/date/components/client/Field.tsx
@@ -5,5 +5,5 @@ import { DateTimeField } from '@payloadcms/ui'
 import React from 'react'

 export const CustomDateFieldClient: DateFieldClientComponent = (props) => {
-  return <DateTimeField field={props?.field} path={props?.path} />
+  return <DateTimeField {...props} />
 }
--- a/examples/custom-components/src/collections/Fields/date/components/client/Label.tsx
+++ b/examples/custom-components/src/collections/Fields/date/components/client/Label.tsx
@@ -4,6 +4,6 @@ import type { DateFieldLabelClientComponent } from 'payload'
 import { FieldLabel } from '@payloadcms/ui'
 import React from 'react'

-export const CustomDateFieldLabelClient: DateFieldLabelClientComponent = (props) => {
-  return <FieldLabel label={props?.label} path={props?.path} />
+export const CustomDateFieldLabelClient: DateFieldLabelClientComponent = ({ field, path }) => {
+  return <FieldLabel label={field?.label || field?.name} path={path} required={field?.required} />
 }
--- a/examples/custom-components/src/collections/Fields/date/components/server/Field.tsx
+++ b/examples/custom-components/src/collections/Fields/date/components/server/Field.tsx
@@ -3,7 +3,18 @@ import type React from 'react'

 import { DateTimeField } from '@payloadcms/ui'

-export const CustomDateFieldServer: DateFieldServerComponent = (props) => {
-  const path = (props?.path || props?.field?.name || '') as string
-  return <DateTimeField field={props?.clientField} path={path} />
+export const CustomDateFieldServer: DateFieldServerComponent = ({
+  clientField,
+  path,
+  schemaPath,
+  permissions,
+}) => {
+  return (
+    <DateTimeField
+      field={clientField}
+      path={path}
+      schemaPath={schemaPath}
+      permissions={permissions}
+    />
+  )
 }
--- a/examples/custom-components/src/collections/Fields/date/components/server/Label.tsx
+++ b/examples/custom-components/src/collections/Fields/date/components/server/Label.tsx
@@ -3,6 +3,15 @@ import type { DateFieldLabelServerComponent } from 'payload'
 import { FieldLabel } from '@payloadcms/ui'
 import React from 'react'

-export const CustomDateFieldLabelServer: DateFieldLabelServerComponent = (props) => {
-  return <FieldLabel label={props?.label} />
+export const CustomDateFieldLabelServer: DateFieldLabelServerComponent = ({
+  clientField,
+  path,
+}) => {
+  return (
+    <FieldLabel
+      label={clientField?.label || clientField?.name}
+      path={path}
+      required={clientField?.required}
+    />
+  )
 }
--- a/examples/custom-components/src/collections/Fields/email/components/client/Field.tsx
+++ b/examples/custom-components/src/collections/Fields/email/components/client/Field.tsx
@@ -5,5 +5,5 @@ import { EmailField } from '@payloadcms/ui'
 import React from 'react'

 export const CustomEmailFieldClient: EmailFieldClientComponent = (props) => {
-  return <EmailField field={props?.field} path={props?.path} />
+  return <EmailField {...props} />
 }
--- a/examples/custom-components/src/collections/Fields/email/components/client/Label.tsx
+++ b/examples/custom-components/src/collections/Fields/email/components/client/Label.tsx
@@ -4,6 +4,6 @@ import type { EmailFieldLabelClientComponent } from 'payload'
 import { FieldLabel } from '@payloadcms/ui'
 import React from 'react'

-export const CustomEmailFieldLabelClient: EmailFieldLabelClientComponent = (props) => {
-  return <FieldLabel label={props?.label} />
+export const CustomEmailFieldLabelClient: EmailFieldLabelClientComponent = ({ field, path }) => {
+  return <FieldLabel label={field?.label || field?.name} path={path} required={field?.required} />
 }
--- a/examples/custom-components/src/collections/Fields/email/components/server/Field.tsx
+++ b/examples/custom-components/src/collections/Fields/email/components/server/Field.tsx
@@ -3,7 +3,13 @@ import type React from 'react'

 import { EmailField } from '@payloadcms/ui'

-export const CustomEmailFieldServer: EmailFieldServerComponent = (props) => {
-  const path = (props?.path || props?.field?.name || '') as string
-  return <EmailField field={props?.clientField} path={path} />
+export const CustomEmailFieldServer: EmailFieldServerComponent = ({
+  clientField,
+  path,
+  schemaPath,
+  permissions,
+}) => {
+  return (
+    <EmailField field={clientField} path={path} schemaPath={schemaPath} permissions={permissions} />
+  )
 }
--- a/examples/custom-components/src/collections/Fields/email/components/server/Label.tsx
+++ b/examples/custom-components/src/collections/Fields/email/components/server/Label.tsx
@@ -3,6 +3,15 @@ import type { EmailFieldLabelServerComponent } from 'payload'
 import { FieldLabel } from '@payloadcms/ui'
 import React from 'react'

-export const CustomEmailFieldLabelServer: EmailFieldLabelServerComponent = (props) => {
-  return <FieldLabel label={props?.label} />
+export const CustomEmailFieldLabelServer: EmailFieldLabelServerComponent = ({
+  clientField,
+  path,
+}) => {
+  return (
+    <FieldLabel
+      label={clientField?.label || clientField?.name}
+      path={path}
+      required={clientField?.required}
+    />
+  )
 }
--- a/examples/custom-components/src/collections/Fields/index.ts
+++ b/examples/custom-components/src/collections/Fields/index.ts
@@ -3,8 +3,10 @@ import type { CollectionConfig, Field } from 'payload'
 import { arrayFields } from './array'
 import { blocksFields } from './blocks'
 import { checkboxFields } from './checkbox'
+import { codeFields } from './code'
 import { dateFields } from './date'
 import { emailFields } from './email'
+import { jsonFields } from './json'
 import { numberFields } from './number'
 import { pointFields } from './point'
 import { radioFields } from './radio'
@@ -28,8 +30,10 @@ export const CustomFields: CollectionConfig = {
      arrayFields,
      blocksFields,
      checkboxFields,
+      codeFields,
      dateFields,
      emailFields,
+      jsonFields,
      numberFields,
      pointFields,
      radioFields,
--- a/examples/custom-components/src/collections/Fields/json/components/client/Field.tsx
+++ b/examples/custom-components/src/collections/Fields/json/components/client/Field.tsx
@@ -0,0 +1,9 @@
+'use client'
+import type { JSONFieldClientComponent } from 'payload'
+
+import { JSONField } from '@payloadcms/ui'
+import React from 'react'
+
+export const CustomJSONFieldClient: JSONFieldClientComponent = (props) => {
+  return <JSONField {...props} />
+}
--- a/examples/custom-components/src/collections/Fields/json/components/client/Label.tsx
+++ b/examples/custom-components/src/collections/Fields/json/components/client/Label.tsx
@@ -0,0 +1,9 @@
+'use client'
+import type { JSONFieldLabelClientComponent } from 'payload'
+
+import { FieldLabel } from '@payloadcms/ui'
+import React from 'react'
+
+export const CustomJSONFieldLabelClient: JSONFieldLabelClientComponent = ({ field, path }) => {
+  return <FieldLabel label={field?.label || field?.name} path={path} required={field?.required} />
+}
--- a/examples/custom-components/src/collections/Fields/json/components/server/Field.tsx
+++ b/examples/custom-components/src/collections/Fields/json/components/server/Field.tsx
@@ -0,0 +1,15 @@
+import type { JSONFieldServerComponent } from 'payload'
+import type React from 'react'
+
+import { JSONField } from '@payloadcms/ui'
+
+export const CustomJSONFieldServer: JSONFieldServerComponent = ({
+  clientField,
+  path,
+  schemaPath,
+  permissions,
+}) => {
+  return (
+    <JSONField field={clientField} path={path} schemaPath={schemaPath} permissions={permissions} />
+  )
+}
--- a/examples/custom-components/src/collections/Fields/json/components/server/Label.tsx
+++ b/examples/custom-components/src/collections/Fields/json/components/server/Label.tsx
@@ -0,0 +1,17 @@
+import type { JSONFieldLabelServerComponent } from 'payload'
+
+import { FieldLabel } from '@payloadcms/ui'
+import React from 'react'
+
+export const CustomJSONFieldLabelServer: JSONFieldLabelServerComponent = ({
+  clientField,
+  path,
+}) => {
+  return (
+    <FieldLabel
+      label={clientField?.label || clientField?.name}
+      path={path}
+      required={clientField?.required}
+    />
+  )
+}
--- a/examples/custom-components/src/collections/Fields/json/index.ts
+++ b/examples/custom-components/src/collections/Fields/json/index.ts
@@ -0,0 +1,24 @@
+import type { CollectionConfig } from 'payload'
+
+export const jsonFields: CollectionConfig['fields'] = [
+  {
+    name: 'jsonFieldServerComponent',
+    type: 'json',
+    admin: {
+      components: {
+        Field: '@/collections/Fields/json/components/server/Field#CustomJSONFieldServer',
+        Label: '@/collections/Fields/json/components/server/Label#CustomJSONFieldLabelServer',
+      },
+    },
+  },
+  {
+    name: 'jsonFieldClientComponent',
+    type: 'json',
+    admin: {
+      components: {
+        Field: '@/collections/Fields/json/components/client/Field#CustomJSONFieldClient',
+        Label: '@/collections/Fields/json/components/client/Label#CustomJSONFieldLabelClient',
+      },
+    },
+  },
+]
--- a/examples/custom-components/src/collections/Fields/number/components/client/Field.tsx
+++ b/examples/custom-components/src/collections/Fields/number/components/client/Field.tsx
@@ -5,5 +5,5 @@ import { NumberField } from '@payloadcms/ui'
 import React from 'react'

 export const CustomNumberFieldClient: NumberFieldClientComponent = (props) => {
-  return <NumberField field={props?.field} path={props?.path} />
+  return <NumberField {...props} />
 }
--- a/examples/custom-components/src/collections/Fields/number/components/client/Label.tsx
+++ b/examples/custom-components/src/collections/Fields/number/components/client/Label.tsx
@@ -4,6 +4,6 @@ import type { NumberFieldLabelClientComponent } from 'payload'
 import { FieldLabel } from '@payloadcms/ui'
 import React from 'react'

-export const CustomNumberFieldLabelClient: NumberFieldLabelClientComponent = (props) => {
-  return <FieldLabel label={props?.label} path={props?.path} />
+export const CustomNumberFieldLabelClient: NumberFieldLabelClientComponent = ({ field, path }) => {
+  return <FieldLabel label={field?.label || field?.name} path={path} required={field?.required} />
 }
--- a/examples/custom-components/src/collections/Fields/number/components/server/Field.tsx
+++ b/examples/custom-components/src/collections/Fields/number/components/server/Field.tsx
@@ -3,7 +3,18 @@ import type React from 'react'

 import { NumberField } from '@payloadcms/ui'

-export const CustomNumberFieldServer: NumberFieldServerComponent = (props) => {
-  const path = (props?.path || props?.field?.name || '') as string
-  return <NumberField field={props?.clientField} path={path} />
+export const CustomNumberFieldServer: NumberFieldServerComponent = ({
+  clientField,
+  path,
+  schemaPath,
+  permissions,
+}) => {
+  return (
+    <NumberField
+      field={clientField}
+      path={path}
+      schemaPath={schemaPath}
+      permissions={permissions}
+    />
+  )
 }
--- a/examples/custom-components/src/collections/Fields/number/components/server/Label.tsx
+++ b/examples/custom-components/src/collections/Fields/number/components/server/Label.tsx
@@ -3,6 +3,15 @@ import type { NumberFieldLabelServerComponent } from 'payload'
 import { FieldLabel } from '@payloadcms/ui'
 import React from 'react'

-export const CustomNumberFieldLabelServer: NumberFieldLabelServerComponent = (props) => {
-  return <FieldLabel label={props?.label} />
+export const CustomNumberFieldLabelServer: NumberFieldLabelServerComponent = ({
+  clientField,
+  path,
+}) => {
+  return (
+    <FieldLabel
+      label={clientField?.label || clientField?.name}
+      path={path}
+      required={clientField?.required}
+    />
+  )
 }
--- a/examples/custom-components/src/collections/Fields/point/components/client/Field.tsx
+++ b/examples/custom-components/src/collections/Fields/point/components/client/Field.tsx
@@ -5,5 +5,5 @@ import { PointField } from '@payloadcms/ui'
 import React from 'react'

 export const CustomPointFieldClient: PointFieldClientComponent = (props) => {
-  return <PointField field={props?.field} path={props?.path} />
+  return <PointField {...props} />
 }
--- a/examples/custom-components/src/collections/Fields/point/components/client/Label.tsx
+++ b/examples/custom-components/src/collections/Fields/point/components/client/Label.tsx
@@ -4,6 +4,6 @@ import type { PointFieldLabelClientComponent } from 'payload'
 import { FieldLabel } from '@payloadcms/ui'
 import React from 'react'

-export const CustomPointFieldLabelClient: PointFieldLabelClientComponent = (props) => {
-  return <FieldLabel label={props?.label} path={props?.path} />
+export const CustomPointFieldLabelClient: PointFieldLabelClientComponent = ({ field, path }) => {
+  return <FieldLabel label={field?.label || field?.name} path={path} required={field?.required} />
 }
--- a/examples/custom-components/src/collections/Fields/point/components/server/Field.tsx
+++ b/examples/custom-components/src/collections/Fields/point/components/server/Field.tsx
@@ -3,7 +3,13 @@ import type React from 'react'

 import { PointField } from '@payloadcms/ui'

-export const CustomPointFieldServer: PointFieldServerComponent = (props) => {
-  const path = (props?.path || props?.field?.name || '') as string
-  return <PointField field={props?.clientField} path={path} />
+export const CustomPointFieldServer: PointFieldServerComponent = ({
+  clientField,
+  path,
+  schemaPath,
+  permissions,
+}) => {
+  return (
+    <PointField field={clientField} path={path} schemaPath={schemaPath} permissions={permissions} />
+  )
 }
--- a/examples/custom-components/src/collections/Fields/point/components/server/Label.tsx
+++ b/examples/custom-components/src/collections/Fields/point/components/server/Label.tsx
@@ -3,6 +3,15 @@ import type { PointFieldLabelServerComponent } from 'payload'
 import { FieldLabel } from '@payloadcms/ui'
 import React from 'react'

-export const CustomPointFieldLabelServer: PointFieldLabelServerComponent = (props) => {
-  return <FieldLabel label={props?.label} />
+export const CustomPointFieldLabelServer: PointFieldLabelServerComponent = ({
+  clientField,
+  path,
+}) => {
+  return (
+    <FieldLabel
+      label={clientField?.label || clientField?.name}
+      path={path}
+      required={clientField?.required}
+    />
+  )
 }
--- a/examples/custom-components/src/collections/Fields/radio/components/client/Field.tsx
+++ b/examples/custom-components/src/collections/Fields/radio/components/client/Field.tsx
@@ -5,5 +5,5 @@ import { RadioGroupField } from '@payloadcms/ui'
 import React from 'react'

 export const CustomRadioFieldClient: RadioFieldClientComponent = (props) => {
-  return <RadioGroupField field={props?.field} path={props?.path} />
+  return <RadioGroupField {...props} />
 }
--- a/examples/custom-components/src/collections/Fields/radio/components/client/Label.tsx
+++ b/examples/custom-components/src/collections/Fields/radio/components/client/Label.tsx
@@ -4,6 +4,6 @@ import type { RadioFieldLabelClientComponent } from 'payload'
 import { FieldLabel } from '@payloadcms/ui'
 import React from 'react'

-export const CustomRadioFieldLabelClient: RadioFieldLabelClientComponent = (props) => {
-  return <FieldLabel label={props?.label} path={props?.path} />
+export const CustomRadioFieldLabelClient: RadioFieldLabelClientComponent = ({ field, path }) => {
+  return <FieldLabel label={field?.label || field?.name} path={path} required={field?.required} />
 }
--- a/examples/custom-components/src/collections/Fields/radio/components/server/Field.tsx
+++ b/examples/custom-components/src/collections/Fields/radio/components/server/Field.tsx
@@ -3,7 +3,18 @@ import type React from 'react'

 import { RadioGroupField } from '@payloadcms/ui'

-export const CustomRadioFieldServer: RadioFieldServerComponent = (props) => {
-  const path = (props?.path || props?.field?.name || '') as string
-  return <RadioGroupField field={props?.clientField} path={path} />
+export const CustomRadioFieldServer: RadioFieldServerComponent = ({
+  clientField,
+  path,
+  schemaPath,
+  permissions,
+}) => {
+  return (
+    <RadioGroupField
+      field={clientField}
+      path={path}
+      schemaPath={schemaPath}
+      permissions={permissions}
+    />
+  )
 }
--- a/examples/custom-components/src/collections/Fields/radio/components/server/Label.tsx
+++ b/examples/custom-components/src/collections/Fields/radio/components/server/Label.tsx
@@ -3,6 +3,15 @@ import type { RadioFieldLabelServerComponent } from 'payload'
 import { FieldLabel } from '@payloadcms/ui'
 import React from 'react'

-export const CustomRadioFieldLabelServer: RadioFieldLabelServerComponent = (props) => {
-  return <FieldLabel label={props?.label} />
+export const CustomRadioFieldLabelServer: RadioFieldLabelServerComponent = ({
+  clientField,
+  path,
+}) => {
+  return (
+    <FieldLabel
+      label={clientField?.label || clientField?.name}
+      path={path}
+      required={clientField?.required}
+    />
+  )
 }
--- a/examples/custom-components/src/collections/Fields/relationship/components/client/Field.tsx
+++ b/examples/custom-components/src/collections/Fields/relationship/components/client/Field.tsx
@@ -5,5 +5,5 @@ import { RelationshipField } from '@payloadcms/ui'
 import React from 'react'

 export const CustomRelationshipFieldClient: RelationshipFieldClientComponent = (props) => {
-  return <RelationshipField field={props?.field} path={props?.path} />
+  return <RelationshipField {...props} />
 }
--- a/examples/custom-components/src/collections/Fields/relationship/components/client/Label.tsx
+++ b/examples/custom-components/src/collections/Fields/relationship/components/client/Label.tsx
@@ -4,8 +4,9 @@ import type { RelationshipFieldLabelClientComponent } from 'payload'
 import { FieldLabel } from '@payloadcms/ui'
 import React from 'react'

-export const CustomRelationshipFieldLabelClient: RelationshipFieldLabelClientComponent = (
-  props,
-) => {
-  return <FieldLabel label={props?.label} path={props?.path} />
+export const CustomRelationshipFieldLabelClient: RelationshipFieldLabelClientComponent = ({
+  field,
+  path,
+}) => {
+  return <FieldLabel label={field?.label || field?.name} path={path} required={field?.required} />
 }
--- a/examples/custom-components/src/collections/Fields/relationship/components/server/Field.tsx
+++ b/examples/custom-components/src/collections/Fields/relationship/components/server/Field.tsx
@@ -3,7 +3,18 @@ import type React from 'react'

 import { RelationshipField } from '@payloadcms/ui'

-export const CustomRelationshipFieldServer: RelationshipFieldServerComponent = (props) => {
-  const path = (props?.path || props?.field?.name || '') as string
-  return <RelationshipField field={props?.clientField} path={path} />
+export const CustomRelationshipFieldServer: RelationshipFieldServerComponent = ({
+  clientField,
+  path,
+  schemaPath,
+  permissions,
+}) => {
+  return (
+    <RelationshipField
+      field={clientField}
+      path={path}
+      schemaPath={schemaPath}
+      permissions={permissions}
+    />
+  )
 }
--- a/examples/custom-components/src/collections/Fields/relationship/components/server/Label.tsx
+++ b/examples/custom-components/src/collections/Fields/relationship/components/server/Label.tsx
@@ -3,8 +3,15 @@ import type { RelationshipFieldLabelServerComponent } from 'payload'
 import { FieldLabel } from '@payloadcms/ui'
 import React from 'react'

-export const CustomRelationshipFieldLabelServer: RelationshipFieldLabelServerComponent = (
-  props,
-) => {
-  return <FieldLabel label={props?.label} />
+export const CustomRelationshipFieldLabelServer: RelationshipFieldLabelServerComponent = ({
+  clientField,
+  path,
+}) => {
+  return (
+    <FieldLabel
+      label={clientField?.label || clientField?.name}
+      path={path}
+      required={clientField?.required}
+    />
+  )
 }
--- a/examples/custom-components/src/collections/Fields/select/components/client/Field.tsx
+++ b/examples/custom-components/src/collections/Fields/select/components/client/Field.tsx
@@ -5,5 +5,5 @@ import { SelectField } from '@payloadcms/ui'
 import React from 'react'

 export const CustomSelectFieldClient: SelectFieldClientComponent = (props) => {
-  return <SelectField field={props?.field} path={props?.path} />
+  return <SelectField {...props} />
 }
--- a/examples/custom-components/src/collections/Fields/select/components/client/Label.tsx
+++ b/examples/custom-components/src/collections/Fields/select/components/client/Label.tsx
@@ -4,6 +4,6 @@ import type { SelectFieldLabelClientComponent } from 'payload'
 import { FieldLabel } from '@payloadcms/ui'
 import React from 'react'

-export const CustomSelectFieldLabelClient: SelectFieldLabelClientComponent = (props) => {
-  return <FieldLabel label={props?.label} path={props?.path} />
+export const CustomSelectFieldLabelClient: SelectFieldLabelClientComponent = ({ field, path }) => {
+  return <FieldLabel label={field?.label || field?.name} path={path} required={field?.required} />
 }
--- a/examples/custom-components/src/collections/Fields/select/components/server/Field.tsx
+++ b/examples/custom-components/src/collections/Fields/select/components/server/Field.tsx
@@ -3,7 +3,18 @@ import type React from 'react'

 import { SelectField } from '@payloadcms/ui'

-export const CustomSelectFieldServer: SelectFieldServerComponent = (props) => {
-  const path = (props?.path || props?.field?.name || '') as string
-  return <SelectField field={props?.clientField} path={path} />
+export const CustomSelectFieldServer: SelectFieldServerComponent = ({
+  clientField,
+  path,
+  schemaPath,
+  permissions,
+}) => {
+  return (
+    <SelectField
+      field={clientField}
+      path={path}
+      schemaPath={schemaPath}
+      permissions={permissions}
+    />
+  )
 }
--- a/examples/custom-components/src/collections/Fields/select/components/server/Label.tsx
+++ b/examples/custom-components/src/collections/Fields/select/components/server/Label.tsx
@@ -3,6 +3,15 @@ import type { SelectFieldLabelServerComponent } from 'payload'
 import { FieldLabel } from '@payloadcms/ui'
 import React from 'react'

-export const CustomSelectFieldLabelServer: SelectFieldLabelServerComponent = (props) => {
-  return <FieldLabel label={props?.label} />
+export const CustomSelectFieldLabelServer: SelectFieldLabelServerComponent = ({
+  clientField,
+  path,
+}) => {
+  return (
+    <FieldLabel
+      label={clientField?.label || clientField?.name}
+      path={path}
+      required={clientField?.required}
+    />
+  )
 }
--- a/examples/custom-components/src/collections/Fields/text/components/client/Field.tsx
+++ b/examples/custom-components/src/collections/Fields/text/components/client/Field.tsx
@@ -5,5 +5,5 @@ import { TextField } from '@payloadcms/ui'
 import React from 'react'

 export const CustomTextFieldClient: TextFieldClientComponent = (props) => {
-  return <TextField field={props?.field} path={props?.path} />
+  return <TextField {...props} />
 }
--- a/examples/custom-components/src/collections/Fields/text/components/client/Label.tsx
+++ b/examples/custom-components/src/collections/Fields/text/components/client/Label.tsx
@@ -4,6 +4,6 @@ import type { TextFieldLabelClientComponent } from 'payload'
 import { FieldLabel } from '@payloadcms/ui'
 import React from 'react'

-export const CustomTextFieldLabelClient: TextFieldLabelClientComponent = (props) => {
-  return <FieldLabel label={props?.label} path={props?.path} />
+export const CustomTextFieldLabelClient: TextFieldLabelClientComponent = ({ field, path }) => {
+  return <FieldLabel label={field?.label || field?.name} path={path} required={field?.required} />
 }
--- a/examples/custom-components/src/collections/Fields/text/components/server/Field.tsx
+++ b/examples/custom-components/src/collections/Fields/text/components/server/Field.tsx
@@ -3,7 +3,13 @@ import type React from 'react'

 import { TextField } from '@payloadcms/ui'

-export const CustomTextFieldServer: TextFieldServerComponent = (props) => {
-  const path = (props?.path || props?.field?.name || '') as string
-  return <TextField field={props?.clientField} path={path} />
+export const CustomTextFieldServer: TextFieldServerComponent = ({
+  clientField,
+  path,
+  schemaPath,
+  permissions,
+}) => {
+  return (
+    <TextField field={clientField} path={path} schemaPath={schemaPath} permissions={permissions} />
+  )
 }
--- a/examples/custom-components/src/collections/Fields/text/components/server/Label.tsx
+++ b/examples/custom-components/src/collections/Fields/text/components/server/Label.tsx
@@ -3,6 +3,15 @@ import type { TextFieldLabelServerComponent } from 'payload'
 import { FieldLabel } from '@payloadcms/ui'
 import React from 'react'

-export const CustomTextFieldLabelServer: TextFieldLabelServerComponent = (props) => {
-  return <FieldLabel label={props?.label} />
+export const CustomTextFieldLabelServer: TextFieldLabelServerComponent = ({
+  clientField,
+  path,
+}) => {
+  return (
+    <FieldLabel
+      label={clientField?.label || clientField?.name}
+      path={path}
+      required={clientField?.required}
+    />
+  )
 }
--- a/examples/custom-components/src/collections/Fields/textarea/components/client/Field.tsx
+++ b/examples/custom-components/src/collections/Fields/textarea/components/client/Field.tsx
@@ -5,5 +5,5 @@ import { TextareaField } from '@payloadcms/ui'
 import React from 'react'

 export const CustomTextareaFieldClient: TextareaFieldClientComponent = (props) => {
-  return <TextareaField field={props?.field} path={props?.path} />
+  return <TextareaField {...props} />
 }
--- a/examples/custom-components/src/collections/Fields/textarea/components/client/Label.tsx
+++ b/examples/custom-components/src/collections/Fields/textarea/components/client/Label.tsx
@@ -4,6 +4,9 @@ import type { TextareaFieldLabelClientComponent } from 'payload'
 import { FieldLabel } from '@payloadcms/ui'
 import React from 'react'

-export const CustomTextareaFieldLabelClient: TextareaFieldLabelClientComponent = (props) => {
-  return <FieldLabel label={props?.label} path={props?.path} />
+export const CustomTextareaFieldLabelClient: TextareaFieldLabelClientComponent = ({
+  field,
+  path,
+}) => {
+  return <FieldLabel label={field?.label || field?.name} path={path} required={field?.required} />
 }
--- a/examples/custom-components/src/collections/Fields/textarea/components/server/Field.tsx
+++ b/examples/custom-components/src/collections/Fields/textarea/components/server/Field.tsx
@@ -3,7 +3,18 @@ import type React from 'react'

 import { TextareaField } from '@payloadcms/ui'

-export const CustomTextareaFieldServer: TextareaFieldServerComponent = (props) => {
-  const path = (props?.path || props?.field?.name || '') as string
-  return <TextareaField field={props?.clientField} path={path} />
+export const CustomTextareaFieldServer: TextareaFieldServerComponent = ({
+  clientField,
+  path,
+  schemaPath,
+  permissions,
+}) => {
+  return (
+    <TextareaField
+      field={clientField}
+      path={path}
+      schemaPath={schemaPath}
+      permissions={permissions}
+    />
+  )
 }
--- a/examples/custom-components/src/collections/Fields/textarea/components/server/Label.tsx
+++ b/examples/custom-components/src/collections/Fields/textarea/components/server/Label.tsx
@@ -3,6 +3,15 @@ import type { TextareaFieldLabelServerComponent } from 'payload'
 import { FieldLabel } from '@payloadcms/ui'
 import React from 'react'

-export const CustomTextareaFieldLabelServer: TextareaFieldLabelServerComponent = (props) => {
-  return <FieldLabel label={props?.label} />
+export const CustomTextareaFieldLabelServer: TextareaFieldLabelServerComponent = ({
+  clientField,
+  path,
+}) => {
+  return (
+    <FieldLabel
+      label={clientField?.label || clientField?.name}
+      path={path}
+      required={clientField?.required}
+    />
+  )
 }
--- a/examples/custom-components/src/payload-types.ts
+++ b/examples/custom-components/src/payload-types.ts
@@ -98,10 +98,30 @@ export interface CustomField {
    | null;
  checkboxFieldServerComponent?: boolean | null;
  checkboxFieldClientComponent?: boolean | null;
+  codeFieldServerComponent?: string | null;
+  codeFieldClientComponent?: string | null;
  dateFieldServerComponent?: string | null;
  dateFieldClientComponent?: string | null;
  emailFieldServerComponent?: string | null;
  emailFieldClientComponent?: string | null;
+  jsonFieldServerComponent?:
+    | {
+        [k: string]: unknown;
+      }
+    | unknown[]
+    | string
+    | number
+    | boolean
+    | null;
+  jsonFieldClientComponent?:
+    | {
+        [k: string]: unknown;
+      }
+    | unknown[]
+    | string
+    | number
+    | boolean
+    | null;
  numberFieldServerComponent?: number | null;
  numberFieldClientComponent?: number | null;
  /**
@@ -271,10 +291,14 @@ export interface CustomFieldsSelect<T extends boolean = true> {
      };
  checkboxFieldServerComponent?: T;
  checkboxFieldClientComponent?: T;
+  codeFieldServerComponent?: T;
+  codeFieldClientComponent?: T;
  dateFieldServerComponent?: T;
  dateFieldClientComponent?: T;
  emailFieldServerComponent?: T;
  emailFieldClientComponent?: T;
+  jsonFieldServerComponent?: T;
+  jsonFieldClientComponent?: T;
  numberFieldServerComponent?: T;
  numberFieldClientComponent?: T;
  pointFieldServerComponent?: T;