RadioGroup & Checkbox label prop (DES-68)

Pre-release · Type: ✨ Feature

Related issues: DES-68 / WEB-847

Problem

The clickable area of RadioGroupItem and Checkbox was only the icon itself (14×14px); the text-label area could not trigger selection, which did not meet the design spec.

Changed Files

• 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

Changes

RadioGroupItem and Checkbox gain label / labelClassName props. When label is passed, the icon and text are wrapped in a <label> element so the entire row is clickable. The disabled state is passed to the container via data-disabled, preserving the cursor-not-allowed style.

Usage example

<RadioGroup defaultValue="apple">
  <RadioGroupItem value="apple" label="Apple" />
  <RadioGroupItem value="banana" label="Banana" />
</RadioGroup>

<Checkbox label="同意条款" />