From 8b4a21136bcb7ef2c177940dbc35692105f984e0 Mon Sep 17 00:00:00 2001
From: betavs <34408516+betavs@users.noreply.github.com>
Date: Sun, 1 Jun 2025 18:31:49 +0800
Subject: [PATCH] fix(components): [form-item] cannot be set to div tag for
 rendering (#20608)

---
 .../form/__tests__/form-item.test.tsx         | 37 +++++++++++++++++++
 packages/components/form/src/form-item.vue    |  2 +-
 2 files changed, 38 insertions(+), 1 deletion(-)

diff --git a/packages/components/form/__tests__/form-item.test.tsx b/packages/components/form/__tests__/form-item.test.tsx
index ec1a96faf4..8f3645f2ee 100644
--- a/packages/components/form/__tests__/form-item.test.tsx
+++ b/packages/components/form/__tests__/form-item.test.tsx
@@ -133,6 +133,43 @@ describe('ElFormItem', () => {
     })
   })
 
+  it('form-item label for', async () => {
+    const wrapper = mount({
+      setup() {
+        const form = reactive({
+          name: '',
+          email: '',
+          address: '',
+        })
+
+        return () => (
+          <div>
+            <Form model={form}>
+              <FormItem label="name">
+                <Input v-model={form.name} />
+              </FormItem>
+              <FormItem label="email" for="">
+                <Input v-model={form.email} />
+              </FormItem>
+              <FormItem label="address" for="address">
+                <Input v-model={form.address} />
+              </FormItem>
+            </Form>
+          </div>
+        )
+      },
+    })
+
+    await nextTick()
+    const [name, email, address] = wrapper
+      .findAll('.el-form-item__label')
+      .map((el) => el.element.tagName.toLowerCase())
+
+    expect(name).toBe('label')
+    expect(email).toBe('div')
+    expect(address).toBe('label')
+  })
+
   it('form-item label position', () => {
     const wrapper = mount({
       setup() {
diff --git a/packages/components/form/src/form-item.vue b/packages/components/form/src/form-item.vue
index 83e5b72f69..4bf524ef6c 100644
--- a/packages/components/form/src/form-item.vue
+++ b/packages/components/form/src/form-item.vue
@@ -168,7 +168,7 @@ const hasLabel = computed<boolean>(() => {
 
 const labelFor = computed<string | undefined>(() => {
   return (
-    props.for || (inputIds.value.length === 1 ? inputIds.value[0] : undefined)
+    props.for ?? (inputIds.value.length === 1 ? inputIds.value[0] : undefined)
   )
 })