跳到主要内容

RadioGroup & Checkbox 新增 label prop 扩大点击区域（DES-68）

Pre-release · 类型： ✨ 新功能

关联 issue：DES-68 / WEB-847

问题​

RadioGroupItem 和 Checkbox 的可点击区域仅为图标本身（14×14px），文字标签区域无法触发选中，不符合设计规范要求。

改动文件​

  • packages/design/src/components/RadioGroup/RadioGroup.tsx
  • packages/design/src/components/RadioGroup/styles.ts
  • packages/design/src/components/Checkbox/Checkbox.tsx
  • packages/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="同意条款" />