diff --git a/docs/en-US/component/select.md b/docs/en-US/component/select.md
index 84cb194b98..cd72515ec7 100644
--- a/docs/en-US/component/select.md
+++ b/docs/en-US/component/select.md
@@ -109,10 +109,14 @@ select/allow-create
 
 :::
 
-:::tip
+## Use value-key attribute
 
 If the binding value of Select is an object, make sure to assign `value-key` as its unique identity key name.
 
+:::demo By using the `value-key` attribute, data with duplicate labels can be properly handled. The value of the `label` property is duplicated, but the option can be identified through the `id`.
+
+select/value-key
+
 :::
 
 ## Select Attributes
diff --git a/docs/examples/select/value-key.vue b/docs/examples/select/value-key.vue
new file mode 100644
index 0000000000..db69bd7b7e
--- /dev/null
+++ b/docs/examples/select/value-key.vue
@@ -0,0 +1,33 @@
+<template>
+  <div class="m-4">
+    <el-select v-model="value" value-key="id" placeholder="Select">
+      <el-option
+        v-for="item in options"
+        :key="item.id"
+        :label="item.label"
+        :value="item"
+      />
+    </el-select>
+    <p>
+      selected option's description:
+      {{ value ? value.desc : 'no select' }}
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+type Option = {
+  id: number
+  label: string
+  desc: string
+}
+const value = ref<Option>()
+const options = ref([
+  { id: 1, label: 'Option A', desc: 'Option A - 230506' },
+  { id: 2, label: 'Option B', desc: 'Option B - 230506' },
+  { id: 3, label: 'Option C', desc: 'Option C - 230506' },
+  { id: 4, label: 'Option A', desc: 'Option A - 230507' },
+])
+</script>