diff --git a/packages/components/radio/__tests__/radio.test.tsx b/packages/components/radio/__tests__/radio.test.tsx
index 73faab2597..5fe22f4b49 100644
--- a/packages/components/radio/__tests__/radio.test.tsx
+++ b/packages/components/radio/__tests__/radio.test.tsx
@@ -135,6 +135,42 @@ describe('Radio group', () => {
expect(vm.radio).toEqual(6)
})
+ it('id auto derive', async () => {
+ const wrapper1 = _mount(
+ `
+ 3
+ 6
+ 9
+ `,
+ () => ({
+ radio: 3,
+ })
+ )
+
+ const wrapper2 = _mount(
+ `
+ 3
+ 6
+ 9
+ `,
+ () => ({
+ radio: 3,
+ })
+ )
+
+ const id1 = wrapper1
+ .findComponent({ name: 'ElRadio' })
+ .find('input')
+ .attributes('name')
+
+ const id2 = wrapper2
+ .findComponent({ name: 'ElRadio' })
+ .find('input')
+ .attributes('name')
+
+ expect(id1).not.toEqual(id2)
+ })
+
it('disabled', async () => {
const wrapper = _mount(
`
diff --git a/packages/components/radio/src/radio-group.vue b/packages/components/radio/src/radio-group.vue
index b746f5282f..e33ae528ea 100644
--- a/packages/components/radio/src/radio-group.vue
+++ b/packages/components/radio/src/radio-group.vue
@@ -27,6 +27,7 @@ import { radioGroupKey } from '@element-plus/tokens'
import {
useFormItem,
useFormItemInputId,
+ useId,
useNamespace,
} from '@element-plus/hooks'
import { debugWarn } from '@element-plus/utils'
@@ -37,11 +38,11 @@ defineOptions({
name: 'ElRadioGroup',
})
-let id = 1
const props = defineProps(radioGroupProps)
const emit = defineEmits(radioGroupEmits)
const ns = useNamespace('radio')
+const radioId = useId()
const radioGroupRef = ref()
const { formItem } = useFormItem()
const { inputId: groupId, isLabeledByFormItem } = useFormItemInputId(props, {
@@ -62,10 +63,8 @@ onMounted(() => {
}
})
-const randomName = `el-radio-group-${id++}`
-
const name = computed(() => {
- return props.name || randomName
+ return props.name || radioId.value
})
provide(