RadioGroup & Checkbox 新增 label prop 扩大点击区域(DES-68)
Pre-release · 类型: ✨ 新功能
问题
RadioGroupItem 和 Checkbox 的可点击区域仅为图标本身(14×14px),文字标签区域无法触发选中,不符合设计规范要求。
改动文件
packages/design/src/components/RadioGroup/RadioGroup.tsxpackages/design/src/components/RadioGroup/styles.tspackages/design/src/components/Checkbox/Checkbox.tsxpackages/design/src/components/Checkbox/styles.ts
改动内容
RadioGroupItem 和 Checkbox 新增 label / labelClassName prop。传入 label 时,图标与文字被包裹在 <label> 元素内,整行均可点击。禁用状态通过 data-disabled 传递给容器,保持 cursor-not-allowed 样式。
用法示例
<RadioGroup defaultValue="apple">
<RadioGroupItem value="apple" label="Apple" />
<RadioGroupItem value="banana" label="Banana" />
</RadioGroup>
<Checkbox label="同意条款" />