diff --git a/src/frontend/components/property-type/base-property-props.ts b/src/frontend/components/property-type/base-property-props.ts
index 1d13001e2..0e5d878b4 100644
--- a/src/frontend/components/property-type/base-property-props.ts
+++ b/src/frontend/components/property-type/base-property-props.ts
@@ -136,56 +136,7 @@ export type ShowPropertyProps = {
 
 
 /**
- * On change callback - It takes either
- * one argument which is entire {@link RecordJSON} or 2 arguments - one
- * __property.name__ and the second one: __value__. Used by the __edit__ and __filter__ components.
- *
- * Lets take a look at an example of overriding edit component:
- * ```typescript
- * import React, { ReactNode } from 'react'
- * import { BasePropertyProps, PropertyInEdit, StyledInput } from 'admin-bro'
- *
- * export default class Edit extends React.Component<PropertyProps> {
- *   constructor(props) {
- *     super(props)
- *     this.handleInputChange = this.handleInputChange.bind(this)
- *   }
- *
- *   handleInputChange(event): void {
- *     const { onChange, property, record } = this.props
- *
- *     // Here is the interesting part:
- *     onChange(property.name, event.target.value)
- *
- *     // or you can pass an entire record. This is the same as above but gives you
- *     // much more flexibility
- *     const newRecord = { ...record }
- *     newRecord.params[property.name] = event.target.value
- *     onChange(newRecord)
- *   }
- *
- *   render(): ReactNode {
- *     const { property, record } = this.props
- *     const error = record.errors && record.errors[property.name]
- *     const value = (record.params && typeof record.params[property.name] !== 'undefined')
- *       ? record.params[property.name]
- *       : ''
- *     return (
- *       <PropertyInEdit property={property} error={error}>
- *         <StyledInput
- *           type="text"
- *           className="input"
- *           id={property.name}
- *           name={property.name}
- *           onChange={this.handleInputChange}
- *           value={value}
- *         />
- *       </PropertyInEdit>
- *     )
- *   }
- * }
- * ```
- *
+ * @load ./docs/on-property-change.doc.md
  * @memberof BasePropertyComponent
  * @alias OnPropertyChange
  */
diff --git a/src/frontend/components/property-type/docs/on-property-change.doc.md b/src/frontend/components/property-type/docs/on-property-change.doc.md
new file mode 100644
index 000000000..1c2cacf7e
--- /dev/null
+++ b/src/frontend/components/property-type/docs/on-property-change.doc.md
@@ -0,0 +1,41 @@
+On change callback - It can take: 
+
+* one argument which is an entire {@link RecordJSON} 
+* 2 arguments - one __property.name__ and the second one: __value__. 
+
+* Used by the __edit__ and __filter__ components.
+ 
+Let's take a look at an example of the edit component
+
+It has one button: "Set Name". When this button is clicked - it triggers `onChange` callback
+function. In this case we are passing an updated record, so that we can change value of another
+property: `name`.
+
+```javascript
+  import React from 'react'
+  import { unflatten } from 'admin-bro'
+  import { Button, Box } from '@admin-bro/design-system'
+
+  const ValueTrigger = (props) => {
+    const { onChange, record } = props
+
+    const handleClick = (): void => {
+      onChange({
+        ...record,
+        params: {
+          ...record.params,
+          name: 'my new name',
+        },
+      })
+    }
+
+    return (
+      <Box mb="xxl">
+        <Button type="button" onClick={handleClick}>Set Name</Button>
+      </Box>
+    )
+  }
+
+  export default ValueTrigger
+ 
+```
\ No newline at end of file