diff --git a/src/mention/demos/enUS/render-label.demo.md b/src/mention/demos/enUS/render-label.demo.md
index b940ed234..c84248b19 100644
--- a/src/mention/demos/enUS/render-label.demo.md
+++ b/src/mention/demos/enUS/render-label.demo.md
@@ -1,6 +1,6 @@
 # Render Label
 
-If you use `render-label` batch rendering, input matching will be performed according to `value`.
+If `option.label` is not a string, `option.value` will be used to match option by default.
 
 ```html
 <n-mention :options="options" :render-label="renderLabel" />
@@ -8,8 +8,7 @@ If you use `render-label` batch rendering, input matching will be performed acco
 
 ```js
 import { defineComponent, h } from 'vue'
-import { NIcon } from 'naive-ui'
-import { HappyOutline as HappyIcon } from '@vicons/ionicons5'
+import { NAvatar } from 'naive-ui'
 
 export default defineComponent({
   setup () {
@@ -30,11 +29,12 @@ export default defineComponent({
       ],
       renderLabel: (option) =>
         h('div', { style: 'display: flex; align-items: center;' }, [
-          h(
-            NIcon,
-            { style: 'margin-right: 5px' },
-            { default: () => h(HappyIcon) }
-          ),
+          h(NAvatar, {
+            style: 'margin-right: 8px;',
+            size: 24,
+            round: true,
+            src: 'https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg'
+          }),
           option.value
         ])
     }
diff --git a/src/mention/demos/zhCN/render-label.demo.md b/src/mention/demos/zhCN/render-label.demo.md
index d620be229..78a66b1e4 100644
--- a/src/mention/demos/zhCN/render-label.demo.md
+++ b/src/mention/demos/zhCN/render-label.demo.md
@@ -1,6 +1,6 @@
 # 控制菜单渲染
 
-如果使用了 `render-label` 批量渲染，输入匹配则会根据 `value` 进行匹配
+如果选项的 `label` 不是字符串，默认情况下会使用 `value` 进行匹配。
 
 ```html
 <n-mention :options="options" :render-label="renderLabel" />
@@ -8,8 +8,7 @@
 
 ```js
 import { defineComponent, h } from 'vue'
-import { NIcon } from 'naive-ui'
-import { HappyOutline as HappyIcon } from '@vicons/ionicons5'
+import { NAvatar } from 'naive-ui'
 
 export default defineComponent({
   setup () {
@@ -30,11 +29,12 @@ export default defineComponent({
       ],
       renderLabel: (option) =>
         h('div', { style: 'display: flex; align-items: center;' }, [
-          h(
-            NIcon,
-            { style: 'margin-right: 5px' },
-            { default: () => h(HappyIcon) }
-          ),
+          h(NAvatar, {
+            style: 'margin-right: 8px;',
+            size: 24,
+            round: true,
+            src: 'https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg'
+          }),
           option.value
         ])
     }
diff --git a/src/mention/src/Mention.tsx b/src/mention/src/Mention.tsx
index a4c07b66d..d2e058577 100644
--- a/src/mention/src/Mention.tsx
+++ b/src/mention/src/Mention.tsx
@@ -13,6 +13,7 @@ import {
 import { createTreeMate } from 'treemate'
 import { VBinder, VFollower, VTarget, FollowerInst } from 'vueuc'
 import { useIsMounted, useMergedState } from 'vooks'
+import { RenderLabel } from '../../_internal/select-menu/src/interface'
 import type { Size as InputSize } from '../../input/src/interface'
 import { NInput } from '../../input'
 import type { InputInst } from '../../input'
@@ -30,10 +31,8 @@ import type { ThemeProps } from '../../_mixins'
 import { mentionLight } from '../styles'
 import type { MentionTheme } from '../styles'
 import { getRelativePosition } from './utils'
-
-import style from './styles/index.cssr'
 import type { MentionOption } from './interface'
-import { RenderLabel } from '../../_internal/select-menu/src/interface'
+import style from './styles/index.cssr'
 
 const mentionProps = {
   ...(useTheme.props as ThemeProps<MentionTheme>),