From 4233df850bbd9140948ecbb5583a842e2491281e Mon Sep 17 00:00:00 2001
From: Sasha <enjoythepain1337@gmail.com>
Date: Fri, 27 Sep 2024 03:31:14 +0300
Subject: [PATCH] docs: add note about condition with custom field component

---
 docs/admin/fields.mdx | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/docs/admin/fields.mdx b/docs/admin/fields.mdx
index f34019928b8..9801571273b 100644
--- a/docs/admin/fields.mdx
+++ b/docs/admin/fields.mdx
@@ -569,3 +569,20 @@ The `condition` function should return a boolean that will control if the field
   ]
 }
 ```
+
+<Banner type="warning">
+  <strong>Note:</strong>
+  When using [Custom Field Components](#field-components) and `condition` together, you need to wrap them with the `withCondition` HOC.
+  Example:
+  ```tsx
+    'use client'
+    import { withCondition } from '@payloadcms/ui'
+    import React from 'react'
+
+    const Component: TextFieldClientComponent = ({ field }) => {
+      return <input placeholder="custom component" name={field.name} />
+    }
+
+    export const CustomTextFieldClient = withCondition(Component)
+  ```
+</Banner>