diff --git a/content/docs/reference/types/reference.mdx b/content/docs/reference/types/reference.mdx
index 55f113675..a820fe395 100644
--- a/content/docs/reference/types/reference.mdx
+++ b/content/docs/reference/types/reference.mdx
@@ -1,6 +1,6 @@
 ---
 title: The "reference" field
-last_edited: '2024-09-12T01:50:26.823Z'
+last_edited: '2024-10-03T05:10:48.908Z'
 next: ''
 previous: ''
 ---
@@ -141,6 +141,122 @@ You can search your reference with reference selector.
     }
 ```
 
+### Filter reference
+
+If you have a long list of reference items, you can filter them in the schema using the `ui.collectionFilter` field using a property from the referenced collection.
+
+<WarningCallout body="The current `collectionFilter`only supports properties of type string and is also **case sensitive** ( e.g. Using the example below, if you enter `australia`, it will not filter authors by `Australia`)." />
+
+> Scenario: You have a list of authors in different locations, and you only want the reference selected in your post collection to be authors from a specific location.
+
+```typescript
+const referenceField = {
+  label: 'Author',
+  name: 'author',
+  type: 'reference',
+  ui: {
+    collectionFilter: {
+      author: {
+        location: 'Australia'
+      }
+    },
+  },
+  collections: ['author'],
+}
+```
+
+It's also possible to filter references options based on a list of values.
+
+```typescript
+const referenceField = {
+  label: 'Author',
+  name: 'author',
+  type: 'reference',
+  ui: {
+    collectionFilter: {
+      author: {
+        location: ['Australia','United States']
+      }
+    },
+  },
+  collections: ['author'],
+}
+```
+
+Reference fields on multiple collections can be filtered by the values in either collection.
+
+```typescript
+const referenceField = {
+  label: 'Author & Post',
+  name: 'author and post',
+  type: 'reference',
+  ui: {
+    collectionFilter: {
+      author: {
+        location: ['Australia','United States']
+      },
+      post: {
+        status: 'published',
+      },
+    },
+  },
+  collections: ['author', 'post'],
+}
+```
+
+The `collectionFilter` also support function input, when you need it for dynamic rendering. The input function will trigger during run time.
+
+```typescript
+// Dynamic reference list - You can define as a function here if you need dynamic list but need to make sure the return type match the schema
+
+const getLocation = () => {
+  const url = new URL('https://bob-northwind-sydney.com')
+  const hostname = url.hostname
+  return hostname
+};
+
+const referenceField = {
+  label: 'Author & Post',
+  name: 'author and post',
+  type: 'reference',
+  ui: {
+    collectionFilter: () => {
+      const location = getLocation();
+      return {
+        author : {
+          location : location
+        }
+      }
+    },
+  },
+  collections: ['author'],
+}
+```
+
+> Note : If you pass as function, the functions need to be passed as executables, not references. The below example will not works.
+
+```typescript
+const referenceField = {
+  label: 'Author & Post',
+  name: 'author and post',
+  type: 'reference',
+  ui: {
+    collectionFilter: () => {
+      return {
+        author : {
+          location : () => {
+            const url = new URL('https://bob-northwind-sydney.com')
+            const hostname = url.hostname
+            return hostname
+          };
+        }
+      }
+    },
+  },
+  collections: ['author'],
+}
+```
+
 ### Customizing Reference Selector with optionComponent
 
 The default reference selector displays the file path, there are cases where you may want to customize what is displayed in the dropdown to provide a better user experience. For example, showing the author's name instead of the file name can make the selection process more intuitive.