From e123ec16e586a4aff239ff4adab41c95c50a12ae Mon Sep 17 00:00:00 2001
From: lijianan <574980606@qq.com>
Date: Mon, 24 Feb 2025 13:41:19 +0800
Subject: [PATCH] feat: Radio.Group & Checkbox.Group Option support className
 (#52917)

---
 components/checkbox/Group.tsx                 |  5 +++-
 .../__snapshots__/demo-extend.test.ts.snap    | 12 ++++-----
 .../__snapshots__/demo.test.tsx.snap          | 12 ++++-----
 components/checkbox/demo/group.tsx            | 18 ++++++-------
 components/checkbox/index.en-US.md            |  5 +++-
 components/checkbox/index.zh-CN.md            |  5 +++-
 .../__snapshots__/demo-extend.test.ts.snap    | 26 +++++++++----------
 .../__snapshots__/demo.test.tsx.snap          | 26 +++++++++----------
 components/radio/demo/radiogroup-options.tsx  | 12 ++++-----
 components/radio/demo/radiogroup.tsx          |  4 +++
 components/radio/group.tsx                    |  3 ++-
 components/radio/index.en-US.md               |  9 ++++---
 components/radio/index.zh-CN.md               |  9 ++++---
 13 files changed, 81 insertions(+), 65 deletions(-)

diff --git a/components/checkbox/Group.tsx b/components/checkbox/Group.tsx
index 5656fcb993..2f658f92c5 100644
--- a/components/checkbox/Group.tsx
+++ b/components/checkbox/Group.tsx
@@ -14,6 +14,7 @@ export interface CheckboxOptionType<T = any> {
   label: React.ReactNode;
   value: T;
   style?: React.CSSProperties;
+  className?: string; // 👈 5.25.0+
   disabled?: boolean;
   title?: string;
   id?: string;
@@ -125,7 +126,7 @@ const CheckboxGroup = React.forwardRef(
             value={option.value}
             checked={value.includes(option.value)}
             onChange={option.onChange}
-            className={`${groupPrefixCls}-item`}
+            className={classNames(`${groupPrefixCls}-item`, option.className)}
             style={option.style}
             title={option.title}
             id={option.id}
@@ -145,6 +146,7 @@ const CheckboxGroup = React.forwardRef(
       registerValue,
       cancelValue,
     };
+
     const classString = classNames(
       groupPrefixCls,
       {
@@ -156,6 +158,7 @@ const CheckboxGroup = React.forwardRef(
       rootCls,
       hashId,
     );
+
     return wrapCSSVar(
       <div className={classString} style={style} {...domProps} ref={ref}>
         <GroupContext.Provider value={context}>{childrenNode}</GroupContext.Provider>
diff --git a/components/checkbox/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/checkbox/__tests__/__snapshots__/demo-extend.test.ts.snap
index 3caf9863ad..ef9a898551 100644
--- a/components/checkbox/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/checkbox/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -691,7 +691,7 @@ Array [
     class="ant-checkbox-group"
   >
     <label
-      class="ant-checkbox-wrapper ant-checkbox-group-item"
+      class="ant-checkbox-wrapper ant-checkbox-group-item label-1"
     >
       <span
         class="ant-checkbox ant-wave-target"
@@ -712,7 +712,7 @@ Array [
       </span>
     </label>
     <label
-      class="ant-checkbox-wrapper ant-checkbox-wrapper-checked ant-checkbox-group-item"
+      class="ant-checkbox-wrapper ant-checkbox-wrapper-checked ant-checkbox-group-item label-2"
     >
       <span
         class="ant-checkbox ant-wave-target ant-checkbox-checked"
@@ -734,7 +734,7 @@ Array [
       </span>
     </label>
     <label
-      class="ant-checkbox-wrapper ant-checkbox-group-item"
+      class="ant-checkbox-wrapper ant-checkbox-group-item label-3"
     >
       <span
         class="ant-checkbox ant-wave-target"
@@ -761,7 +761,7 @@ Array [
     class="ant-checkbox-group"
   >
     <label
-      class="ant-checkbox-wrapper ant-checkbox-wrapper-checked ant-checkbox-wrapper-disabled ant-checkbox-group-item"
+      class="ant-checkbox-wrapper ant-checkbox-wrapper-checked ant-checkbox-wrapper-disabled ant-checkbox-group-item label-1"
     >
       <span
         class="ant-checkbox ant-wave-target ant-checkbox-checked ant-checkbox-disabled"
@@ -784,7 +784,7 @@ Array [
       </span>
     </label>
     <label
-      class="ant-checkbox-wrapper ant-checkbox-wrapper-disabled ant-checkbox-group-item"
+      class="ant-checkbox-wrapper ant-checkbox-wrapper-disabled ant-checkbox-group-item label-2"
     >
       <span
         class="ant-checkbox ant-wave-target ant-checkbox-disabled"
@@ -806,7 +806,7 @@ Array [
       </span>
     </label>
     <label
-      class="ant-checkbox-wrapper ant-checkbox-wrapper-disabled ant-checkbox-group-item"
+      class="ant-checkbox-wrapper ant-checkbox-wrapper-disabled ant-checkbox-group-item label-3"
     >
       <span
         class="ant-checkbox ant-wave-target ant-checkbox-disabled"
diff --git a/components/checkbox/__tests__/__snapshots__/demo.test.tsx.snap b/components/checkbox/__tests__/__snapshots__/demo.test.tsx.snap
index 9782c106fe..8340148ad8 100644
--- a/components/checkbox/__tests__/__snapshots__/demo.test.tsx.snap
+++ b/components/checkbox/__tests__/__snapshots__/demo.test.tsx.snap
@@ -649,7 +649,7 @@ Array [
     class="ant-checkbox-group"
   >
     <label
-      class="ant-checkbox-wrapper ant-checkbox-group-item"
+      class="ant-checkbox-wrapper ant-checkbox-group-item label-1"
     >
       <span
         class="ant-checkbox ant-wave-target"
@@ -670,7 +670,7 @@ Array [
       </span>
     </label>
     <label
-      class="ant-checkbox-wrapper ant-checkbox-wrapper-checked ant-checkbox-group-item"
+      class="ant-checkbox-wrapper ant-checkbox-wrapper-checked ant-checkbox-group-item label-2"
     >
       <span
         class="ant-checkbox ant-wave-target ant-checkbox-checked"
@@ -692,7 +692,7 @@ Array [
       </span>
     </label>
     <label
-      class="ant-checkbox-wrapper ant-checkbox-group-item"
+      class="ant-checkbox-wrapper ant-checkbox-group-item label-3"
     >
       <span
         class="ant-checkbox ant-wave-target"
@@ -719,7 +719,7 @@ Array [
     class="ant-checkbox-group"
   >
     <label
-      class="ant-checkbox-wrapper ant-checkbox-wrapper-checked ant-checkbox-wrapper-disabled ant-checkbox-group-item"
+      class="ant-checkbox-wrapper ant-checkbox-wrapper-checked ant-checkbox-wrapper-disabled ant-checkbox-group-item label-1"
     >
       <span
         class="ant-checkbox ant-wave-target ant-checkbox-checked ant-checkbox-disabled"
@@ -742,7 +742,7 @@ Array [
       </span>
     </label>
     <label
-      class="ant-checkbox-wrapper ant-checkbox-wrapper-disabled ant-checkbox-group-item"
+      class="ant-checkbox-wrapper ant-checkbox-wrapper-disabled ant-checkbox-group-item label-2"
     >
       <span
         class="ant-checkbox ant-wave-target ant-checkbox-disabled"
@@ -764,7 +764,7 @@ Array [
       </span>
     </label>
     <label
-      class="ant-checkbox-wrapper ant-checkbox-wrapper-disabled ant-checkbox-group-item"
+      class="ant-checkbox-wrapper ant-checkbox-wrapper-disabled ant-checkbox-group-item label-3"
     >
       <span
         class="ant-checkbox ant-wave-target ant-checkbox-disabled"
diff --git a/components/checkbox/demo/group.tsx b/components/checkbox/demo/group.tsx
index fbd36094e9..a8816e3cc0 100644
--- a/components/checkbox/demo/group.tsx
+++ b/components/checkbox/demo/group.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Checkbox } from 'antd';
-import type { GetProp } from 'antd';
+import type { CheckboxOptionType, GetProp } from 'antd';
 
 const onChange: GetProp<typeof Checkbox.Group, 'onChange'> = (checkedValues) => {
   console.log('checked = ', checkedValues);
@@ -8,16 +8,16 @@ const onChange: GetProp<typeof Checkbox.Group, 'onChange'> = (checkedValues) =>
 
 const plainOptions = ['Apple', 'Pear', 'Orange'];
 
-const options = [
-  { label: 'Apple', value: 'Apple' },
-  { label: 'Pear', value: 'Pear' },
-  { label: 'Orange', value: 'Orange' },
+const options: CheckboxOptionType<string>[] = [
+  { label: 'Apple', value: 'Apple', className: 'label-1' },
+  { label: 'Pear', value: 'Pear', className: 'label-2' },
+  { label: 'Orange', value: 'Orange', className: 'label-3' },
 ];
 
-const optionsWithDisabled = [
-  { label: 'Apple', value: 'Apple' },
-  { label: 'Pear', value: 'Pear' },
-  { label: 'Orange', value: 'Orange', disabled: false },
+const optionsWithDisabled: CheckboxOptionType<string>[] = [
+  { label: 'Apple', value: 'Apple', className: 'label-1' },
+  { label: 'Pear', value: 'Pear', className: 'label-2' },
+  { label: 'Orange', value: 'Orange', className: 'label-3', disabled: false },
 ];
 
 const App: React.FC = () => (
diff --git a/components/checkbox/index.en-US.md b/components/checkbox/index.en-US.md
index 66e5543aac..e54dc65fbc 100644
--- a/components/checkbox/index.en-US.md
+++ b/components/checkbox/index.en-US.md
@@ -44,7 +44,7 @@ Common props ref：[Common props](/docs/react/common-props)
 | onBlur | Called when leaving the component | function() | - |  |
 | onFocus | Called when entering the component | function() | - |  |
 
-#### Checkbox Group
+#### Checkbox.Group
 
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
@@ -53,6 +53,9 @@ Common props ref：[Common props](/docs/react/common-props)
 | name | The `name` property of all `input[type="checkbox"]` children | string | - |  |
 | options | Specifies options | string\[] \| number\[] \| Option\[] | \[] |  |
 | value | Used for setting the currently selected value | (string \| number \| boolean)\[] | \[] |  |
+| title | title of the option | `string` | - |  |
+| className | className of the option | `string` | - | 5.25.0 |
+| style | styles of the option | `React.CSSProperties` | - |  |
 | onChange | The callback function that is triggered when the state changes | (checkedValue: T[]) => void | - |  |
 
 ##### Option
diff --git a/components/checkbox/index.zh-CN.md b/components/checkbox/index.zh-CN.md
index 86845f4252..a46363ccf5 100644
--- a/components/checkbox/index.zh-CN.md
+++ b/components/checkbox/index.zh-CN.md
@@ -45,7 +45,7 @@ demo:
 | onBlur | 失去焦点时的回调 | function() | - |  |
 | onFocus | 获得焦点时的回调 | function() | - |  |
 
-#### Checkbox Group
+#### Checkbox.Group
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
@@ -54,6 +54,9 @@ demo:
 | name | CheckboxGroup 下所有 `input[type="checkbox"]` 的 `name` 属性 | string | - |  |
 | options | 指定可选项 | string\[] \| number\[] \| Option\[] | \[] |  |
 | value | 指定选中的选项 | (string \| number \| boolean)\[] | \[] |  |
+| title | 选项的 title | `string` | - |  |
+| className | 选项的类名 | `string` | - | 5.25.0 |
+| style | 选项的样式 | `React.CSSProperties` | - |  |
 | onChange | 变化时的回调函数 | (checkedValue: T[]) => void | - |  |
 
 ##### Option
diff --git a/components/radio/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/radio/__tests__/__snapshots__/demo-extend.test.ts.snap
index e83d679135..ca8faf2ebd 100644
--- a/components/radio/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/radio/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -1130,7 +1130,7 @@ exports[`renders components/radio/demo/radiogroup.tsx extend context correctly 1
   class="ant-radio-group ant-radio-group-outline"
 >
   <label
-    class="ant-radio-wrapper ant-radio-wrapper-checked"
+    class="ant-radio-wrapper ant-radio-wrapper-checked option-1"
   >
     <span
       class="ant-radio ant-wave-target ant-radio-checked"
@@ -1177,7 +1177,7 @@ exports[`renders components/radio/demo/radiogroup.tsx extend context correctly 1
     </span>
   </label>
   <label
-    class="ant-radio-wrapper"
+    class="ant-radio-wrapper option-2"
   >
     <span
       class="ant-radio ant-wave-target"
@@ -1223,7 +1223,7 @@ exports[`renders components/radio/demo/radiogroup.tsx extend context correctly 1
     </span>
   </label>
   <label
-    class="ant-radio-wrapper"
+    class="ant-radio-wrapper option-3"
   >
     <span
       class="ant-radio ant-wave-target"
@@ -1269,7 +1269,7 @@ exports[`renders components/radio/demo/radiogroup.tsx extend context correctly 1
     </span>
   </label>
   <label
-    class="ant-radio-wrapper"
+    class="ant-radio-wrapper option-4"
   >
     <span
       class="ant-radio ant-wave-target"
@@ -1718,7 +1718,7 @@ Array [
     class="ant-radio-group ant-radio-group-outline"
   >
     <label
-      class="ant-radio-wrapper ant-radio-wrapper-checked"
+      class="ant-radio-wrapper ant-radio-wrapper-checked label-1"
     >
       <span
         class="ant-radio ant-wave-target ant-radio-checked"
@@ -1741,7 +1741,7 @@ Array [
       </span>
     </label>
     <label
-      class="ant-radio-wrapper"
+      class="ant-radio-wrapper label-2"
     >
       <span
         class="ant-radio ant-wave-target"
@@ -1763,7 +1763,7 @@ Array [
       </span>
     </label>
     <label
-      class="ant-radio-wrapper ant-radio-wrapper-disabled"
+      class="ant-radio-wrapper ant-radio-wrapper-disabled label-3"
     >
       <span
         class="ant-radio ant-wave-target ant-radio-disabled"
@@ -1792,7 +1792,7 @@ Array [
     class="ant-radio-group ant-radio-group-outline"
   >
     <label
-      class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"
+      class="ant-radio-button-wrapper ant-radio-button-wrapper-checked label-1"
     >
       <span
         class="ant-radio-button ant-radio-button-checked"
@@ -1815,7 +1815,7 @@ Array [
       </span>
     </label>
     <label
-      class="ant-radio-button-wrapper"
+      class="ant-radio-button-wrapper label-2"
     >
       <span
         class="ant-radio-button"
@@ -1837,7 +1837,7 @@ Array [
       </span>
     </label>
     <label
-      class="ant-radio-button-wrapper"
+      class="ant-radio-button-wrapper label-3"
       title="Orange"
     >
       <span
@@ -1866,7 +1866,7 @@ Array [
     class="ant-radio-group ant-radio-group-solid"
   >
     <label
-      class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"
+      class="ant-radio-button-wrapper ant-radio-button-wrapper-checked label-1"
     >
       <span
         class="ant-radio-button ant-radio-button-checked"
@@ -1889,7 +1889,7 @@ Array [
       </span>
     </label>
     <label
-      class="ant-radio-button-wrapper"
+      class="ant-radio-button-wrapper label-2"
     >
       <span
         class="ant-radio-button"
@@ -1911,7 +1911,7 @@ Array [
       </span>
     </label>
     <label
-      class="ant-radio-button-wrapper ant-radio-button-wrapper-disabled"
+      class="ant-radio-button-wrapper ant-radio-button-wrapper-disabled label-3"
     >
       <span
         class="ant-radio-button ant-radio-button-disabled"
diff --git a/components/radio/__tests__/__snapshots__/demo.test.tsx.snap b/components/radio/__tests__/__snapshots__/demo.test.tsx.snap
index 79c64d8831..60ec21cd41 100644
--- a/components/radio/__tests__/__snapshots__/demo.test.tsx.snap
+++ b/components/radio/__tests__/__snapshots__/demo.test.tsx.snap
@@ -1116,7 +1116,7 @@ exports[`renders components/radio/demo/radiogroup.tsx correctly 1`] = `
   class="ant-radio-group ant-radio-group-outline"
 >
   <label
-    class="ant-radio-wrapper ant-radio-wrapper-checked"
+    class="ant-radio-wrapper ant-radio-wrapper-checked option-1"
   >
     <span
       class="ant-radio ant-wave-target ant-radio-checked"
@@ -1163,7 +1163,7 @@ exports[`renders components/radio/demo/radiogroup.tsx correctly 1`] = `
     </span>
   </label>
   <label
-    class="ant-radio-wrapper"
+    class="ant-radio-wrapper option-2"
   >
     <span
       class="ant-radio ant-wave-target"
@@ -1209,7 +1209,7 @@ exports[`renders components/radio/demo/radiogroup.tsx correctly 1`] = `
     </span>
   </label>
   <label
-    class="ant-radio-wrapper"
+    class="ant-radio-wrapper option-3"
   >
     <span
       class="ant-radio ant-wave-target"
@@ -1255,7 +1255,7 @@ exports[`renders components/radio/demo/radiogroup.tsx correctly 1`] = `
     </span>
   </label>
   <label
-    class="ant-radio-wrapper"
+    class="ant-radio-wrapper option-4"
   >
     <span
       class="ant-radio ant-wave-target"
@@ -1698,7 +1698,7 @@ Array [
     class="ant-radio-group ant-radio-group-outline"
   >
     <label
-      class="ant-radio-wrapper ant-radio-wrapper-checked"
+      class="ant-radio-wrapper ant-radio-wrapper-checked label-1"
     >
       <span
         class="ant-radio ant-wave-target ant-radio-checked"
@@ -1721,7 +1721,7 @@ Array [
       </span>
     </label>
     <label
-      class="ant-radio-wrapper"
+      class="ant-radio-wrapper label-2"
     >
       <span
         class="ant-radio ant-wave-target"
@@ -1743,7 +1743,7 @@ Array [
       </span>
     </label>
     <label
-      class="ant-radio-wrapper ant-radio-wrapper-disabled"
+      class="ant-radio-wrapper ant-radio-wrapper-disabled label-3"
     >
       <span
         class="ant-radio ant-wave-target ant-radio-disabled"
@@ -1772,7 +1772,7 @@ Array [
     class="ant-radio-group ant-radio-group-outline"
   >
     <label
-      class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"
+      class="ant-radio-button-wrapper ant-radio-button-wrapper-checked label-1"
     >
       <span
         class="ant-radio-button ant-radio-button-checked"
@@ -1795,7 +1795,7 @@ Array [
       </span>
     </label>
     <label
-      class="ant-radio-button-wrapper"
+      class="ant-radio-button-wrapper label-2"
     >
       <span
         class="ant-radio-button"
@@ -1817,7 +1817,7 @@ Array [
       </span>
     </label>
     <label
-      class="ant-radio-button-wrapper"
+      class="ant-radio-button-wrapper label-3"
       title="Orange"
     >
       <span
@@ -1846,7 +1846,7 @@ Array [
     class="ant-radio-group ant-radio-group-solid"
   >
     <label
-      class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"
+      class="ant-radio-button-wrapper ant-radio-button-wrapper-checked label-1"
     >
       <span
         class="ant-radio-button ant-radio-button-checked"
@@ -1869,7 +1869,7 @@ Array [
       </span>
     </label>
     <label
-      class="ant-radio-button-wrapper"
+      class="ant-radio-button-wrapper label-2"
     >
       <span
         class="ant-radio-button"
@@ -1891,7 +1891,7 @@ Array [
       </span>
     </label>
     <label
-      class="ant-radio-button-wrapper ant-radio-button-wrapper-disabled"
+      class="ant-radio-button-wrapper ant-radio-button-wrapper-disabled label-3"
     >
       <span
         class="ant-radio-button ant-radio-button-disabled"
diff --git a/components/radio/demo/radiogroup-options.tsx b/components/radio/demo/radiogroup-options.tsx
index b3297a57e0..8eb50bb3c6 100644
--- a/components/radio/demo/radiogroup-options.tsx
+++ b/components/radio/demo/radiogroup-options.tsx
@@ -6,15 +6,15 @@ import type { CheckboxGroupProps } from 'antd/es/checkbox';
 const plainOptions: CheckboxGroupProps<string>['options'] = ['Apple', 'Pear', 'Orange'];
 
 const options: CheckboxGroupProps<string>['options'] = [
-  { label: 'Apple', value: 'Apple' },
-  { label: 'Pear', value: 'Pear' },
-  { label: 'Orange', value: 'Orange', title: 'Orange' },
+  { label: 'Apple', value: 'Apple', className: 'label-1' },
+  { label: 'Pear', value: 'Pear', className: 'label-2' },
+  { label: 'Orange', value: 'Orange', title: 'Orange', className: 'label-3' },
 ];
 
 const optionsWithDisabled: CheckboxGroupProps<string>['options'] = [
-  { label: 'Apple', value: 'Apple' },
-  { label: 'Pear', value: 'Pear' },
-  { label: 'Orange', value: 'Orange', disabled: true },
+  { label: 'Apple', value: 'Apple', className: 'label-1' },
+  { label: 'Pear', value: 'Pear', className: 'label-2' },
+  { label: 'Orange', value: 'Orange', className: 'label-3', disabled: true },
 ];
 
 const App: React.FC = () => {
diff --git a/components/radio/demo/radiogroup.tsx b/components/radio/demo/radiogroup.tsx
index ef6df7e624..612d46d9b3 100644
--- a/components/radio/demo/radiogroup.tsx
+++ b/components/radio/demo/radiogroup.tsx
@@ -22,6 +22,7 @@ const App: React.FC = () => {
       options={[
         {
           value: 1,
+          className: 'option-1',
           label: (
             <Flex gap="small" justify="center" align="center" vertical>
               <LineChartOutlined style={{ fontSize: 18 }} />
@@ -31,6 +32,7 @@ const App: React.FC = () => {
         },
         {
           value: 2,
+          className: 'option-2',
           label: (
             <Flex gap="small" justify="center" align="center" vertical>
               <DotChartOutlined style={{ fontSize: 18 }} />
@@ -40,6 +42,7 @@ const App: React.FC = () => {
         },
         {
           value: 3,
+          className: 'option-3',
           label: (
             <Flex gap="small" justify="center" align="center" vertical>
               <BarChartOutlined style={{ fontSize: 18 }} />
@@ -49,6 +52,7 @@ const App: React.FC = () => {
         },
         {
           value: 4,
+          className: 'option-4',
           label: (
             <Flex gap="small" justify="center" align="center" vertical>
               <PieChartOutlined style={{ fontSize: 18 }} />
diff --git a/components/radio/group.tsx b/components/radio/group.tsx
index f66ab52f22..863ac5b67e 100644
--- a/components/radio/group.tsx
+++ b/components/radio/group.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import classNames from 'classnames';
+import useId from 'rc-util/lib/hooks/useId';
 import useMergedState from 'rc-util/lib/hooks/useMergedState';
 import pickAttrs from 'rc-util/lib/pickAttrs';
 
@@ -15,7 +16,6 @@ import type {
 } from './interface';
 import Radio from './radio';
 import useStyle from './style';
-import useId from 'rc-util/lib/hooks/useId';
 
 const RadioGroup = React.forwardRef<HTMLDivElement, RadioGroupProps>((props, ref) => {
   const { getPrefixCls, direction } = React.useContext(ConfigContext);
@@ -98,6 +98,7 @@ const RadioGroup = React.forwardRef<HTMLDivElement, RadioGroupProps>((props, ref
           checked={value === option.value}
           title={option.title}
           style={option.style}
+          className={option.className} // 👈 5.25.0+
           id={option.id}
           required={option.required}
         >
diff --git a/components/radio/index.en-US.md b/components/radio/index.en-US.md
index 0eb7c0519e..36a681b33e 100644
--- a/components/radio/index.en-US.md
+++ b/components/radio/index.en-US.md
@@ -20,9 +20,9 @@ return (
   <Radio.Group
     value={value}
     options={[
-      { value: 1, label: "A" },
-      { value: 2, label: "B"},
-      { value: 3, label: "C" },
+      { value: 1, label: 'A' },
+      { value: 2, label: 'B' },
+      { value: 3, label: 'C' },
     ]}
   />
 );
@@ -70,7 +70,7 @@ Common props ref：[Common props](/docs/react/common-props)
 | disabled | Disable radio | boolean | false |
 | value | According to value for comparison, to determine whether the selected | any | - |
 
-### RadioGroup
+### Radio.Group
 
 Radio group can wrap a group of `Radio`。
 
@@ -94,6 +94,7 @@ Radio group can wrap a group of `Radio`。
 | label | The text used to display as the Radio option | `string` | - | 4.4.0 |
 | value | The value associated with the Radio option | `string` \| `number` \| `boolean` | - | 4.4.0 |
 | style | The style to apply to the Radio option | `React.CSSProperties` | - | 4.4.0 |
+| className | className of the Radio option | `string` | - | 5.25.0 |
 | disabled | Specifies whether the Radio option is disabled | `boolean` | `false` | 4.4.0 |
 | title | Adds the Title attribute value | `string` | - | 4.4.0 |
 | id | Adds the Radio Id attribute value | `string` | - | 4.4.0 |
diff --git a/components/radio/index.zh-CN.md b/components/radio/index.zh-CN.md
index f04bc3434a..a63cfc725a 100644
--- a/components/radio/index.zh-CN.md
+++ b/components/radio/index.zh-CN.md
@@ -21,9 +21,9 @@ return (
   <Radio.Group
     value={value}
     options={[
-      { value: 1, label: "A" },
-      { value: 2, label: "B"},
-      { value: 3, label: "C" },
+      { value: 1, label: 'A' },
+      { value: 2, label: 'B' },
+      { value: 3, label: 'C' },
     ]}
   />
 );
@@ -92,11 +92,12 @@ return (
 
 ### CheckboxOptionType
 
-| Property | Description | Type | Default | Version |
+| 属性 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
 | label | 用于作为 Radio 选项展示的文本 | `string` | - | 4.4.0 |
 | value | 关联 Radio 选项的值 | `string` \| `number` \| `boolean` | - | 4.4.0 |
 | style | 应用到 Radio 选项的 style | `React.CSSProperties` | - | 4.4.0 |
+| className | Radio 选项的类名 | `string` | - | 5.25.0 |
 | disabled | 指定 Radio 选项是否要禁用 | `boolean` | `false` | 4.4.0 |
 | title | 添加 Title 属性值 | `string` | - | 4.4.0 |
 | id | 添加 Radio Id 属性值 | `string` | - | 4.4.0 |