[Component] [checkbox] el-checkbox 组件在配合 value 属性使用时,触发浏览器控制台的无障碍/自动填充警告
Author: h-129Created Aug 31, 2026Updated Sep 1, 2026
Labelsa11y
Bug Type: Component
Environment
- Vue Version:
3.5.40 - Element Plus Version:
2.14.3 - Browser / OS:
UserAgent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/151.0.0.0 Safari/537.36 - Build Tool:
Vite
Reproduction
Related Component
el-checkbox
Reproduction Link
Steps to reproduce
1、使用 Vue 3 + Element Plus 的最新版本。
2、在页面中使用 配合 ,并且按照最新推荐的 API 使用 value 属性(而不是用 label 当作值)。
3、打开现代浏览器(如 Chrome 或 Edge)的开发者工具。
刷新页面,查看控制台 (Console)。
What is Expected?
浏览器控制台无任何警告。组件底层能够自动生成并匹配正确的 和 属性,或者提供统一的机制避免浏览器的 Accessibility (无障碍) 和 Autofill (自动填充) 检查报错。
What is actually happening?
浏览器控制台会抛出警告提示(虽然不影响功能,但对开发者体验不够友好): The label's for attribute doesn't match any element id. This might prevent the browser from correctly autofilling the form and accessibility tools from working correctly. To fix this issue, make sure the label's for attribute references the correct id of a form field.
Additional comments
这个问题在表单密集型后台系统中会产生大量黄色警告,导致控制台信息杂乱。似乎是因为底层的 没有正确继承或生成与外层包裹的 相匹配的 id 属性导致的。希望官方能在后续版本中优化原生属性的透传或自动 ID 生成逻辑,谢谢!
Source: element-plus/element-plus