From fa6d0ab5c8cabd1b69cc4af2a06f876068826f5e Mon Sep 17 00:00:00 2001
From: byq1213 <byq1213@qq.com>
Date: Sun, 18 Aug 2024 19:38:26 +0800
Subject: [PATCH] =?UTF-8?q?feat(radio):=20=E9=87=8D=E6=9E=84radio=20dom?=
 =?UTF-8?q?=E6=8E=A5=E5=8F=A3,=E8=A1=A5=E5=85=85=E5=AF=B9=E5=BA=94?=
 =?UTF-8?q?=E6=96=87=E6=A1=A3=E5=92=8C=E9=80=82=E9=85=8D=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

fix #461
---
 site/mobile/mobile.config.js                |    2 +-
 src/_common                                 |    2 +-
 src/radio/Radio.tsx                         |  128 +-
 src/radio/RadioGroup.tsx                    |   13 +-
 src/radio/_example/{base.jsx => base.tsx}   |    8 +-
 src/radio/_example/card.tsx                 |   25 +
 src/radio/_example/custom.tsx               |   39 +
 src/radio/_example/group.jsx                |   40 -
 src/radio/_example/horizontal.tsx           |   13 +
 src/radio/_example/icon.jsx                 |   15 -
 src/radio/_example/icon.tsx                 |   11 +
 src/radio/_example/{index.jsx => index.tsx} |   38 +-
 src/radio/_example/leftStrokeLine.jsx       |   24 -
 src/radio/_example/placement.tsx            |   11 +
 src/radio/_example/right.jsx                |   19 -
 src/radio/_example/rightStrokeLine.jsx      |   23 -
 src/radio/_example/size.jsx                 |   10 -
 src/radio/_example/status.jsx               |   46 -
 src/radio/_example/status.tsx               |   21 +
 src/radio/_example/style/index.less         |   66 +-
 src/radio/defaultProps.ts                   |   28 +
 src/radio/radio.en-US.md                    |   47 +
 src/radio/radio.md                          |   44 +-
 src/radio/style/index.js                    |    4 +-
 src/radio/style/index.less                  |    9 -
 src/radio/type.ts                           |   71 +-
 test/snap/__snapshots__/csr.test.jsx.snap   | 1848 +++++++++++++++++++
 test/snap/__snapshots__/ssr.test.jsx.snap   |   16 +
 28 files changed, 2305 insertions(+), 316 deletions(-)
 rename src/radio/_example/{base.jsx => base.tsx} (72%)
 create mode 100644 src/radio/_example/card.tsx
 create mode 100644 src/radio/_example/custom.tsx
 delete mode 100644 src/radio/_example/group.jsx
 create mode 100644 src/radio/_example/horizontal.tsx
 delete mode 100644 src/radio/_example/icon.jsx
 create mode 100644 src/radio/_example/icon.tsx
 rename src/radio/_example/{index.jsx => index.tsx} (59%)
 delete mode 100644 src/radio/_example/leftStrokeLine.jsx
 create mode 100644 src/radio/_example/placement.tsx
 delete mode 100644 src/radio/_example/right.jsx
 delete mode 100644 src/radio/_example/rightStrokeLine.jsx
 delete mode 100644 src/radio/_example/size.jsx
 delete mode 100644 src/radio/_example/status.jsx
 create mode 100644 src/radio/_example/status.tsx
 create mode 100644 src/radio/defaultProps.ts
 create mode 100644 src/radio/radio.en-US.md
 delete mode 100644 src/radio/style/index.less

diff --git a/site/mobile/mobile.config.js b/site/mobile/mobile.config.js
index b02c6b3c3..e61b732c6 100644
--- a/site/mobile/mobile.config.js
+++ b/site/mobile/mobile.config.js
@@ -58,7 +58,7 @@ export default {
     {
       title: 'Radio 单选框',
       name: 'radio',
-      component: () => import('tdesign-mobile-react/radio/_example/index.jsx'),
+      component: () => import('tdesign-mobile-react/radio/_example/index.tsx'),
     },
     {
       title: 'Rate 评分',
diff --git a/src/_common b/src/_common
index 762c4d5d5..a61e5fef4 160000
--- a/src/_common
+++ b/src/_common
@@ -1 +1 @@
-Subproject commit 762c4d5d576db1262a4c26d03b133077422749ca
+Subproject commit a61e5fef4566350e771377500dafdbcd46a23d3b
diff --git a/src/radio/Radio.tsx b/src/radio/Radio.tsx
index 905899ccc..bb3b65f25 100644
--- a/src/radio/Radio.tsx
+++ b/src/radio/Radio.tsx
@@ -1,11 +1,14 @@
-import React, { createContext, CSSProperties, forwardRef, Ref, useContext, useRef } from 'react';
+import React, { createContext, forwardRef, useContext, useRef } from 'react';
+import type { CSSProperties, Ref } from 'react';
 import classNames from 'classnames';
-import { CheckIcon } from 'tdesign-icons-react';
+import { CheckIcon, CheckCircleFilledIcon } from 'tdesign-icons-react';
 import forwardRefWithStatics from '../_util/forwardRefWithStatics';
 import useConfig from '../_util/useConfig';
 import useDefault from '../_util/useDefault';
-import { TdRadioProps } from './type';
-import RadioGroup from './RadioGroup';
+import type { TdRadioProps } from './type';
+import RadioGroup from './RadioGroup old';
+import useDefaultProps from '../hooks/useDefaultProps';
+import { radioDefaultProps } from './defaultProps';
 
 export interface RadioProps extends TdRadioProps {
   ref?: Ref<HTMLDivElement>;
@@ -31,23 +34,23 @@ const Radio = forwardRef((_props: RadioProps, ref: Ref<HTMLDivElement>) => {
   const props = context ? context.inject(_props) : _props;
 
   const {
-    align = 'left',
-    allowUncheck = false,
-    checked = false,
-    defaultChecked = false,
-    children,
+    allowUncheck,
+    block,
+    checked,
     content,
+    defaultChecked,
     contentDisabled,
+    placement,
     disabled,
     icon,
     label,
-    maxContentRow = 5,
-    maxLabelRow = 3,
+    maxContentRow,
+    maxLabelRow,
     name,
     value,
-    // borderless = false,
+    borderless,
     onChange,
-  } = props;
+  } = useDefaultProps<TdRadioProps>(props, radioDefaultProps);
 
   const [radioChecked, setRadioChecked] = useDefault(checked, defaultChecked, onChange);
 
@@ -66,21 +69,30 @@ const Radio = forwardRef((_props: RadioProps, ref: Ref<HTMLDivElement>) => {
 
   const renderIcon = () => {
     if (Array.isArray(icon)) {
-      return radioChecked ? icon[0] : icon[1] ?? null;
+      return radioChecked ? icon[0] : (icon[1] ?? null);
+    }
+    if (radioChecked) {
+      if (icon === 'circle') {
+        return <CheckCircleFilledIcon className={`${classPrefix}__icon-wrap`} />;
+      }
+      if (icon === 'line') {
+        return <CheckIcon className={`${classPrefix}__icon-wrap`} />;
+      }
+      if (icon === 'dot') {
+        let dotIconClassName = `${classPrefix}__icon-${icon}`;
+        disabled && (dotIconClassName += ` ${classPrefix}__icon-${icon}--disabled`);
+        return <div className={dotIconClassName} />;
+      }
+    } else {
+      if (icon === 'circle' || icon === 'dot') {
+        let circleIconClassName = `${classPrefix}__icon-circle`;
+        disabled && (circleIconClassName += ` ${classPrefix}__icon-circle--disabled`);
+        return <div className={circleIconClassName} />;
+      }
+      if (icon === 'line') {
+        return <div className="placeholder" />;
+      }
     }
-    return (
-      <div
-        className={classNames(
-          `${classPrefix}__icon`, {
-            [`${classPrefix}__icon--checked`]: radioChecked,
-            [`${classPrefix}__icon--disabled`]: disabled,
-            // [`${classPrefix}__icon--strock`]: icon === 'stroke-line',
-            [`${classPrefix}__icon--custom`]: Array.isArray(icon),
-        })}
-      >
-        <CheckIcon size={16} />
-      </div>
-    );
   };
 
   const labelStyle = {
@@ -88,18 +100,11 @@ const Radio = forwardRef((_props: RadioProps, ref: Ref<HTMLDivElement>) => {
     color: disabled ? '#dcdcdc' : 'inherit',
   };
 
-  const radioClassName = classNames(
-    `${classPrefix}`,
-    { [`${prefix}-is-checked`]: radioChecked },
-    { [`${prefix}-is-disabled`]: disabled },
-
-  );
+  const radioClassName = classNames(`${classPrefix}`, `${classPrefix}--${placement}`, {
+    [`${classPrefix}--block`]: block,
+  });
 
-  const titleClassName = classNames(
-    `${prefix}__content-title`,
-    { [`${prefix}-is-disabled`]: disabled },
-    { [`${prefix}__content-right-title`]: align === 'right' },
-  )
+  const titleClassName = classNames(`${classPrefix}__title`, { [`${classPrefix}__title--disabled`]: disabled });
 
   const input = (
     <input
@@ -110,7 +115,7 @@ const Radio = forwardRef((_props: RadioProps, ref: Ref<HTMLDivElement>) => {
       // @ts-ignore
       value={value}
       disabled={disabled}
-      className={classNames(`${classPrefix}__original-${align}`)}
+      className={classNames(`${classPrefix}__original`)}
       checked={radioChecked}
       onClick={(e) => {
         e.stopPropagation();
@@ -122,30 +127,31 @@ const Radio = forwardRef((_props: RadioProps, ref: Ref<HTMLDivElement>) => {
     />
   );
 
+  const iconClass = classNames(`${classPrefix}__icon`, `${classPrefix}__icon--${placement}`, {
+    [`${classPrefix}__icon--checked`]: radioChecked,
+    [`${classPrefix}__icon--disabled`]: disabled,
+  });
   return (
     <div className={radioClassName} ref={ref} onClick={() => switchRadioChecked()}>
-      <span className={`${classPrefix}__content-wrap`}>
-        {align === 'left' &&<span className={ `${classPrefix}__icon-wrap ${classPrefix}__icon-left-wrap`}>
-          {input}
-          {renderIcon()}
-        </span>}
-        <span className={`${classPrefix}__label-wrap`}>
-          {label && <span className={titleClassName} style={labelStyle}>{label}</span>}
-          {(children || content) && (
-            <div className={`${classPrefix}__content-inner`}  style={getLimitRow(maxContentRow)}>
-              {children || content}
-            </div>
-          )}
-        </span>
-        {align === 'right' &&<span className={ `${classPrefix}__icon-wrap ${classPrefix}__icon-right-wrap`}>
-          {input}
-          {renderIcon()}
-        </span>}
-      </span>
-      {/* 下边框 */}
-      { <div className={`${classPrefix}__border ${classPrefix}__border--${align}`}></div>}
-      {/* { !borderless && <div className={`${classPrefix}__border ${classPrefix}__border--${align}`}></div>} */}
-      <div ></div>
+      {input}
+      <div className={iconClass}>{renderIcon()}</div>
+      <div className={`${classPrefix}__content`}>
+        {label && (
+          <span className={titleClassName} style={labelStyle}>
+            {label}
+          </span>
+        )}
+        {content && (
+          <div
+            className={`${classPrefix}__description ${disabled && `${classPrefix}__description--disabled`}`}
+            style={getLimitRow(maxContentRow)}
+          >
+            {content}
+          </div>
+        )}
+      </div>
+
+      {!borderless && block && <div className={`${classPrefix}__border ${classPrefix}__border--${placement}`}></div>}
     </div>
   );
 });
diff --git a/src/radio/RadioGroup.tsx b/src/radio/RadioGroup.tsx
index 25fa61e9e..059b35234 100644
--- a/src/radio/RadioGroup.tsx
+++ b/src/radio/RadioGroup.tsx
@@ -1,8 +1,9 @@
-import React, { FC, ReactNode, useRef } from 'react';
+import React, { useRef } from 'react';
+import type { FC, ReactNode } from 'react';
 import useConfig from '../_util/useConfig';
 import Radio, { RadioContext, RadioContextValue, RadioProps } from './Radio';
-import { TdRadioGroupProps } from './type';
 import useDefault from '../_util/useDefault';
+import type { TdRadioGroupProps } from './type';
 
 export interface RadioGroupProps extends TdRadioGroupProps {
   children?: ReactNode;
@@ -53,12 +54,8 @@ const RadioGroup: FC<RadioGroupProps> = (props) => {
       );
     });
   return (
-    <div ref={groupRef} className={`${classPrefix}-radio-group`}>
-      <div className={`${classPrefix}-cell-group`}>
-        <div className={`${classPrefix}cell-group__container`}>
-          <RadioContext.Provider value={context}>{options?.length ? renderOptions() : children}</RadioContext.Provider>
-        </div>
-      </div>
+    <div ref={groupRef} className={`${classPrefix}-radio-group ${props.className || ''}`}>
+      <RadioContext.Provider value={context}>{options?.length ? renderOptions() : children}</RadioContext.Provider>
     </div>
   );
 };
diff --git a/src/radio/_example/base.jsx b/src/radio/_example/base.tsx
similarity index 72%
rename from src/radio/_example/base.jsx
rename to src/radio/_example/base.tsx
index 8f34b3095..29c0b4d56 100644
--- a/src/radio/_example/base.jsx
+++ b/src/radio/_example/base.tsx
@@ -8,9 +8,11 @@ export default function Base() {
       <Radio label="单选" value="idx0"></Radio>
       <Radio label="单选" value="idx1"></Radio>
       <Radio label="单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选" value="idx2"></Radio>
-      <Radio label="单选" value="idx3">
-        单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选
-      </Radio>
+      <Radio
+        label="单选"
+        value="idx3"
+        content="描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息"
+      ></Radio>
     </RadioGroup>
   );
 }
diff --git a/src/radio/_example/card.tsx b/src/radio/_example/card.tsx
new file mode 100644
index 000000000..4e6b9cf3f
--- /dev/null
+++ b/src/radio/_example/card.tsx
@@ -0,0 +1,25 @@
+import React, { useState } from 'react';
+import { Radio, RadioGroup } from 'tdesign-mobile-react';
+
+export default function () {
+  const [defaultValue, setDefaultValue] = useState('1');
+  const options = [
+    {
+      value: '1',
+      label: '单选',
+    },
+    {
+      value: '2',
+      label: '单选',
+    },
+    {
+      value: '3',
+      label: '单选标题多行单选标题多行单选标题多行单选标题多行单选标题多行',
+    },
+  ];
+  return (
+    <RadioGroup className="theme-card" value={defaultValue} onChange={setDefaultValue}>
+      {options.map((opt) => <Radio value={opt.value} label={opt.label} key={opt.value}></Radio>)}
+    </RadioGroup>
+  );
+}
diff --git a/src/radio/_example/custom.tsx b/src/radio/_example/custom.tsx
new file mode 100644
index 000000000..5fef346e0
--- /dev/null
+++ b/src/radio/_example/custom.tsx
@@ -0,0 +1,39 @@
+import React, { useState } from 'react';
+import { Radio, RadioGroup } from 'tdesign-mobile-react';
+import { Icon } from 'tdesign-icons-react';
+import TDemoBlock from '../../../site/mobile/components/DemoBlock';
+
+export default function () {
+  const [defaultValue, setDefaultValue] = useState(0);
+  const [defaultValueH, setDefaultValueH] = useState(0);
+  return (
+    <>
+      <TDemoBlock summary="单选框尺寸规格">
+        <RadioGroup value={defaultValue} onChange={(value) => setDefaultValue(value)}>
+          {Array.from(Array(3), (_, key) => (
+            <div className={`card ${defaultValue === key ? 'card--active' : ''}`} key={key}>
+              {defaultValue === key && <Icon name="check" color="#fff" className="card__icon" />}
+              <Radio
+                value={key}
+                borderless
+                label="单选"
+                content="描述信息描述信息描述信息描述信息描述信息"
+                icon="none"
+              ></Radio>
+            </div>
+          ))}
+        </RadioGroup>
+      </TDemoBlock>
+      <TDemoBlock summary="横向卡片单选框">
+        <RadioGroup className="horizontal-box" value={defaultValueH} onChange={(value) => setDefaultValueH(value)}>
+          {Array.from(Array(3), (_, key) => (
+            <div className={`card ${defaultValueH === key ? 'card--active' : ''}`} key={key}>
+              {defaultValueH === key && <Icon name="check" color="#fff" className="card__icon" />}
+              <Radio borderless value={key} label="单选" icon="none"></Radio>
+            </div>
+          ))}
+        </RadioGroup>
+      </TDemoBlock>
+    </>
+  );
+}
diff --git a/src/radio/_example/group.jsx b/src/radio/_example/group.jsx
deleted file mode 100644
index ec4fe54f2..000000000
--- a/src/radio/_example/group.jsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import React, { useState } from 'react';
-import { RadioGroup, Radio } from 'tdesign-mobile-react';
-
-export default function () {
-  const itemOptions = ['北京', '上海', '广州', '深圳'];
-  const [city, setCity] = useState('北京');
-  const [city2, setCity2] = useState('');
-  const [city3, setCity3] = useState('');
-  return (
-    <>
-      <RadioGroup value={city} options={itemOptions} onChange={(value) => setCity(`${value}`)}></RadioGroup>
-      <div style={{ marginTop: 10 }}>
-        <RadioGroup value={city2} onChange={(value) => setCity2(`${value}`)}>
-          <Radio value="bj">北京</Radio>
-          <Radio value="sh">上海</Radio>
-          <Radio value="gz">广州</Radio>
-          <Radio value="sz">深圳</Radio>
-        </RadioGroup>
-      </div>
-      <div style={{ marginTop: 10 }}>
-        <RadioGroup value={city2} onChange={(value) => setCity2(`${value}`)} disabled>
-          <Radio value="bj">北京</Radio>
-          <Radio value="sh">上海</Radio>
-          <Radio value="gz">广州</Radio>
-          <Radio value="sz">深圳</Radio>
-        </RadioGroup>
-      </div>
-      <div style={{ marginTop: 10 }}>
-        <RadioGroup value={city3} onChange={(value) => setCity3(`${value}`)}>
-          <Radio value="bj">北京</Radio>
-          <Radio value="sh" disabled>
-            上海
-          </Radio>
-          <Radio value="gz">广州</Radio>
-          <Radio value="sz">深圳</Radio>
-        </RadioGroup>
-      </div>
-    </>
-  );
-}
diff --git a/src/radio/_example/horizontal.tsx b/src/radio/_example/horizontal.tsx
new file mode 100644
index 000000000..cd44e51e5
--- /dev/null
+++ b/src/radio/_example/horizontal.tsx
@@ -0,0 +1,13 @@
+import React, { useState } from 'react';
+import { Radio, RadioGroup } from 'tdesign-mobile-react';
+
+export default function Base() {
+  const [defaultValue, setDefaultValue] = useState('idx0');
+  return (
+    <RadioGroup value={defaultValue} className="box" onChange={(value) => setDefaultValue(value)}>
+      <Radio block={false} label="单选标题" value="idx0"></Radio>
+      <Radio block={false} label="单选标题" value="idx1"></Radio>
+      <Radio block={false} label="单选标题" value="idx2"></Radio>
+    </RadioGroup>
+  );
+}
diff --git a/src/radio/_example/icon.jsx b/src/radio/_example/icon.jsx
deleted file mode 100644
index f3bfe8745..000000000
--- a/src/radio/_example/icon.jsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import React, { useState } from 'react';
-import { CheckRectangleFilledIcon, RectangleIcon } from 'tdesign-icons-react';
-import { Radio, RadioGroup } from 'tdesign-mobile-react';
-
-export default function () {
-  const [defaultValue, setDefaultValue] = useState('idx2');
-  const icons = [<CheckRectangleFilledIcon key="1" color="#0052d9" />, <RectangleIcon key="2" />];
-
-  return (
-    <RadioGroup value={defaultValue} onChange={(value) => setDefaultValue(value)}>
-      <Radio value="idx1" label="单选" icon={icons}></Radio>
-      <Radio value="idx2" label="单选" icon={icons}></Radio>
-    </RadioGroup>
-  );
-}
diff --git a/src/radio/_example/icon.tsx b/src/radio/_example/icon.tsx
new file mode 100644
index 000000000..146897685
--- /dev/null
+++ b/src/radio/_example/icon.tsx
@@ -0,0 +1,11 @@
+import React from 'react';
+import { Radio } from 'tdesign-mobile-react';
+
+export default function () {
+  return (
+    <>
+      <Radio label="单选" icon="line" defaultChecked></Radio>
+      <Radio label="单选" icon="dot" defaultChecked></Radio>
+    </>
+  );
+}
diff --git a/src/radio/_example/index.jsx b/src/radio/_example/index.tsx
similarity index 59%
rename from src/radio/_example/index.jsx
rename to src/radio/_example/index.tsx
index 76a7e55a7..f261c30c4 100644
--- a/src/radio/_example/index.jsx
+++ b/src/radio/_example/index.tsx
@@ -2,57 +2,57 @@ import React from 'react';
 import TDemoHeader from '../../../site/mobile/components/DemoHeader';
 import TDemoBlock from '../../../site/mobile/components/DemoBlock';
 import BaseDemo from './base';
-import RightDemo from './right';
-import LeftStrokeLineDemo from './leftStrokeLine';
-import RightStrokeLineDemo from './rightStrokeLine';
+import HorizontalDemo from './horizontal';
 import StatusDemo from './status';
 import IconDemo from './icon';
-import SizeDemo from './size';
-import './style/index.less'
+import PlacementDemo from './placement';
+import CardDemo from './card';
+import CustomDemo from './custom';
+import './style/index.less';
 
 export default function RadioDemo() {
   return (
     <div className="tdesign-mobile-demo">
       <TDemoHeader title="Radio 单选框" summary="用于在预设的一组选项中执行单项选择，并呈现选择结果。" />
 
-      <TDemoBlock title="01 类型" summary="左侧圆形单选框">
+      <TDemoBlock title="01 组件类型" summary="纵向单选框">
         <div className="radio-demo">
           <BaseDemo />
         </div>
       </TDemoBlock>
-      <TDemoBlock summary="右侧圆形单选框">
+
+      <TDemoBlock summary="横向单选框">
         <div className="radio-demo">
-          <RightDemo />
+          <HorizontalDemo />
         </div>
       </TDemoBlock>
 
-      <TDemoBlock summary="左侧勾形单选框">
+      <TDemoBlock title="02 组件状态" summary="单选框禁用状态">
         <div className="radio-demo">
-          <LeftStrokeLineDemo />
+          <StatusDemo />
         </div>
       </TDemoBlock>
 
-      <TDemoBlock summary="右侧勾形单选框">
+      <TDemoBlock title="03 组件样式" summary="勾选样式">
         <div className="radio-demo">
-          <RightStrokeLineDemo />
+          <IconDemo />
         </div>
       </TDemoBlock>
-
-      <TDemoBlock title="02 状态" summary="单选框禁用状态">
+      <TDemoBlock summary="勾选显示位置">
         <div className="radio-demo">
-          <StatusDemo />
+          <PlacementDemo />
         </div>
       </TDemoBlock>
 
-      <TDemoBlock title="03 特殊类型" summary="自定义图标多选框">
+      <TDemoBlock summary="非通栏单选样式">
         <div className="radio-demo">
-          <IconDemo />
+          <CardDemo />
         </div>
       </TDemoBlock>
 
-      <TDemoBlock title="04 规格" summary="单选框尺寸规格">
+      <TDemoBlock title="04 特殊样式">
         <div className="radio-demo">
-          <SizeDemo />
+          <CustomDemo />
         </div>
       </TDemoBlock>
     </div>
diff --git a/src/radio/_example/leftStrokeLine.jsx b/src/radio/_example/leftStrokeLine.jsx
deleted file mode 100644
index fb612b75f..000000000
--- a/src/radio/_example/leftStrokeLine.jsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import React, { useState } from 'react';
-import { Radio, RadioGroup } from 'tdesign-mobile-react';
-import { CheckIcon } from 'tdesign-icons-react';
-
-export default function Base() {
-  const [defaultValue, setDefaultValue] = useState('idx0');
-  const CheckedIcon = <CheckIcon key="1" color="#0052d9" />;
-  return (
-    <>
-      <RadioGroup value={defaultValue} onChange={(value) => setDefaultValue(value)}>
-        <Radio value="idx0" label="单选" icon={[CheckedIcon]}></Radio>
-        <Radio value="idx1" label="单选" icon={[CheckedIcon]}></Radio>
-        <Radio
-          value="idx2"
-          label="单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选"
-          icon={[CheckedIcon]}
-        ></Radio>
-        <Radio label="单选" icon={[CheckedIcon]} value="idx3">
-          单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选
-        </Radio>
-      </RadioGroup>
-    </>
-  );
-}
diff --git a/src/radio/_example/placement.tsx b/src/radio/_example/placement.tsx
new file mode 100644
index 000000000..cfeb39c8d
--- /dev/null
+++ b/src/radio/_example/placement.tsx
@@ -0,0 +1,11 @@
+import React from 'react';
+import { Radio } from 'tdesign-mobile-react';
+
+export default function () {
+  return (
+    <>
+      <Radio label="单选" defaultChecked></Radio>
+      <Radio label="单选" placement="right" defaultChecked></Radio>
+    </>
+  );
+}
diff --git a/src/radio/_example/right.jsx b/src/radio/_example/right.jsx
deleted file mode 100644
index 3baa08f2e..000000000
--- a/src/radio/_example/right.jsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import React, { useState } from 'react';
-import { Radio, RadioGroup } from 'tdesign-mobile-react';
-
-export default function () {
-  const [defaultValue, setDefaultValue] = useState('idx0');
-  return (
-    <RadioGroup value={defaultValue} onChange={setDefaultValue}>
-      <Radio label="单选" align="right" value="idx0"></Radio>
-      <Radio label="单选" align="right" value="idx1"></Radio>
-      <Radio label="单选" align="right" value="idx2"></Radio>
-      <Radio
-        label="单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选"
-        maxLabelRow="1"
-        align="right"
-        value="idx3"
-      />
-    </RadioGroup>
-  );
-}
diff --git a/src/radio/_example/rightStrokeLine.jsx b/src/radio/_example/rightStrokeLine.jsx
deleted file mode 100644
index 35462a517..000000000
--- a/src/radio/_example/rightStrokeLine.jsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import React, { useState } from 'react';
-import { Radio, RadioGroup } from 'tdesign-mobile-react';
-import { CheckIcon } from 'tdesign-icons-react';
-
-export default function () {
-  const [defaultValue, setDefaultValue] = useState('idx1');
-  const CheckedIcon = <CheckIcon key="1" color="#0052d9" />;
-
-  return (
-    <RadioGroup value={defaultValue} onChange={setDefaultValue}>
-      <Radio label="单选" align="right" icon={[CheckedIcon]} value="idx1"></Radio>
-      <Radio
-        label="单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选"
-        align="right"
-        icon={[CheckedIcon]}
-        value="idx2"
-      ></Radio>
-      <Radio label="单选" align="right" icon={[CheckedIcon]} value="idx3">
-        单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选
-      </Radio>
-    </RadioGroup>
-  );
-}
diff --git a/src/radio/_example/size.jsx b/src/radio/_example/size.jsx
deleted file mode 100644
index 6bc8bc6c6..000000000
--- a/src/radio/_example/size.jsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import React from 'react';
-import { Radio, RadioGroup } from 'tdesign-mobile-react';
-
-export default function () {
-  return (
-    <RadioGroup>
-      <Radio value="H48" label="单选 H48"></Radio>
-    </RadioGroup>
-  );
-}
diff --git a/src/radio/_example/status.jsx b/src/radio/_example/status.jsx
deleted file mode 100644
index f117cc5f0..000000000
--- a/src/radio/_example/status.jsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import React from 'react';
-import { CheckIcon } from 'tdesign-icons-react';
-import { Radio, RadioGroup } from 'tdesign-mobile-react';
-import TDemoBlock from '../../../site/mobile/components/DemoBlock';
-
-export default function () {
-  const defaultValue = 'idx2';
-  const icon = <CheckIcon key="1" />;
-
-  return (
-    <>
-      <div style={{ marginTop: '10px' }}>
-        <TDemoBlock>
-          <RadioGroup disabled value={defaultValue}>
-            <Radio label="单选" value="idx1"></Radio>
-            <Radio label="单选" value="idx2"></Radio>
-          </RadioGroup>
-        </TDemoBlock>
-      </div>
-      <div style={{ marginTop: '10px' }}>
-        <TDemoBlock>
-          <RadioGroup disabled value={defaultValue}>
-            <Radio label="单选" value="idx1" icon={[icon]}></Radio>
-            <Radio label="单选" value="idx2" icon={[icon]}></Radio>
-          </RadioGroup>
-        </TDemoBlock>
-      </div>
-      <div style={{ marginTop: '10px' }}>
-        <TDemoBlock>
-          <RadioGroup disabled value={defaultValue}>
-            <Radio label="单选" value="idx1" align="right"></Radio>
-            <Radio label="单选" value="idx2" align="right"></Radio>
-          </RadioGroup>
-        </TDemoBlock>
-      </div>
-      <div style={{ marginTop: '10px' }}>
-        <TDemoBlock>
-          <RadioGroup disabled value={defaultValue}>
-            <Radio label="单选" value="idx1" icon={[icon]} align="right"></Radio>
-            <Radio label="单选" value="idx2" icon={[icon]} align="right"></Radio>
-          </RadioGroup>
-        </TDemoBlock>
-      </div>
-    </>
-  );
-}
diff --git a/src/radio/_example/status.tsx b/src/radio/_example/status.tsx
new file mode 100644
index 000000000..69ea5cb14
--- /dev/null
+++ b/src/radio/_example/status.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import { Radio, RadioGroup } from 'tdesign-mobile-react';
+
+export default function () {
+  const defaultValue = '1';
+  const options = [
+    {
+      value: '1',
+      label: '选项禁用-已选',
+    },
+    {
+      value: '2',
+      label: '选项禁用-默认',
+    },
+  ];
+  return (
+    <RadioGroup disabled value={defaultValue}>
+      {options.map((opt) => <Radio value={opt.value} label={opt.label} disabled key={opt.value}></Radio>)}
+    </RadioGroup>
+  );
+}
diff --git a/src/radio/_example/style/index.less b/src/radio/_example/style/index.less
index be559a925..1fd3797d7 100644
--- a/src/radio/_example/style/index.less
+++ b/src/radio/_example/style/index.less
@@ -1,4 +1,66 @@
 
-.radio-demo {
-  background-color: #fff;
+.box {
+    padding: 16px;
+    display: flex;
+    justify-content: space-between;
+    background-color: var(--bg-color-demo, #fff);
 }
+
+.theme-card {
+  border-radius: 12px;
+  margin: 16px;
+  overflow: hidden;
+}
+.card {
+  display: block;
+  position: relative;
+  margin: 16px;
+  border-radius: 6px;
+  overflow: hidden;
+  box-sizing: border-box;
+  border: 1.5px solid #fff;
+}
+
+.card--active {
+  border-color: #0052d9;
+  z-index: 0;
+}
+
+.card--active::after {
+  content: '';
+  display: block;
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 0;
+  border: 14px solid #0052d9;
+  border-bottom-color: transparent;
+  border-right-color: transparent;
+  z-index: inherit !important;
+}
+
+.card__icon {
+  display: block;
+  color: #fff;
+  position: absolute;
+  left: 1.5px;
+  top: 1.5px;
+  z-index: 1;
+}
+
+/* 横向布局 */
+.horizontal-box {
+  width: calc(100% - 32px);
+  display: flex;
+  align-items: center;
+  margin: 16px;
+}
+
+.horizontal-box .card {
+  flex: 1;
+  margin: 0;
+}
+
+.horizontal-box .card + .card {
+  margin-left: 12px;
+}
\ No newline at end of file
diff --git a/src/radio/defaultProps.ts b/src/radio/defaultProps.ts
new file mode 100644
index 000000000..781f4fa0b
--- /dev/null
+++ b/src/radio/defaultProps.ts
@@ -0,0 +1,28 @@
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import { TdRadioProps, TdRadioGroupProps } from './type';
+
+export const radioDefaultProps: TdRadioProps = {
+  align: 'left',
+  allowUncheck: false,
+  block: true,
+  borderless: undefined,
+  defaultChecked: false,
+  contentDisabled: false,
+  disabled: undefined,
+  icon: 'circle',
+  maxContentRow: 5,
+  maxLabelRow: 3,
+  placement: 'left',
+  value: undefined,
+};
+
+export const radioGroupDefaultProps: TdRadioGroupProps = {
+  allowUncheck: false,
+  borderless: false,
+  disabled: undefined,
+  icon: 'circle',
+  placement: 'left',
+};
diff --git a/src/radio/radio.en-US.md b/src/radio/radio.en-US.md
new file mode 100644
index 000000000..92810c64c
--- /dev/null
+++ b/src/radio/radio.en-US.md
@@ -0,0 +1,47 @@
+:: BASE_DOC ::
+
+## API
+
+### Radio Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+className | String | - | className of component | N
+style | Object | - | CSS(Cascading Style Sheets)，Typescript：`React.CSSProperties` | N
+align | String | left | options: left/right | N
+allowUncheck | Boolean | false | \- | N
+block | Boolean | true | \- | N
+borderless | Boolean | undefined | \- | N
+checked | Boolean | false | \- | N
+defaultChecked | Boolean | false | uncontrolled property | N
+children | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
+content | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
+contentDisabled | Boolean | false | \- | N
+disabled | Boolean | undefined | \- | N
+icon | String / Array | 'circle' | Typescript：`'circle' \| 'line' \| 'dot' \| 'none' \|Array<TNode>`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
+label | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
+maxContentRow | Number | 5 | \- | N
+maxLabelRow | Number | 3 | \- | N
+name | String | - | \- | N
+placement | String | left | options: left/right | N
+value | String / Number / Boolean | undefined | Typescript：`string \| number \| boolean` | N
+onChange | Function |  | Typescript：`(checked: boolean, context: { e: ChangeEvent }) => void`<br/> | N
+
+
+### RadioGroup Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+className | String | - | className of component | N
+style | Object | - | CSS(Cascading Style Sheets)，Typescript：`React.CSSProperties` | N
+allowUncheck | Boolean | false | \- | N
+borderless | Boolean | false | \- | N
+disabled | Boolean | undefined | \- | N
+icon | String / Array | 'circle' | Typescript：`'circle' \| 'line' \| 'dot' \| Array<TNode>`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
+keys | Object | - | Typescript：`KeysType`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
+name | String | - | \- | N
+options | Array | - | Typescript：`Array<RadioOption>` `type RadioOption = string \| number \| RadioOptionObj` `interface RadioOptionObj { label?: string \| TNode; value?: string \| number \| boolean; disabled?: boolean }`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/radio/type.ts) | N
+placement | String | left | options: left/right | N
+value | String / Number / Boolean | - | Typescript：`T` `type RadioValue = string \| number \| boolean`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/radio/type.ts) | N
+defaultValue | String / Number / Boolean | - | uncontrolled property。Typescript：`T` `type RadioValue = string \| number \| boolean`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/radio/type.ts) | N
+onChange | Function |  | Typescript：`(value: T, context: { e: ChangeEvent }) => void`<br/> | N
diff --git a/src/radio/radio.md b/src/radio/radio.md
index 9a806bd6b..6bbe974c2 100644
--- a/src/radio/radio.md
+++ b/src/radio/radio.md
@@ -1,37 +1,47 @@
 :: BASE_DOC ::
 
 ## API
+
 ### Radio Props
 
-名称 | 类型 | 默认值 | 说明 | 必传
+名称 | 类型 | 默认值 | 描述 | 必传
 -- | -- | -- | -- | --
 className | String | - | 类名 | N
 style | Object | - | 样式，TS 类型：`React.CSSProperties` | N
-align | String | left | 复选框和内容相对位置。可选项：left/right | N
+align | String | left | 已废弃。复选框和内容相对位置。可选项：left/right | N
 allowUncheck | Boolean | false | 是否允许取消选中 | N
-checked | Boolean | - | 是否选中 | N
-defaultChecked | Boolean | - | 是否选中。非受控属性 | N
-children | TNode | - | 单选内容，同 label。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
-content | TNode | - | 单选内容。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
-contentDisabled | Boolean | - | 是否禁用组件内容（content）触发选中 | N
-disabled | Boolean | undefined | 是否为禁用态 | N
-icon | Array | - | 自定义选中图标和非选中图标。示例：[选中态图标，非选中态图标]。TS 类型：`Array<TNode>`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
-label | TNode | - | 主文案。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
+block | Boolean | true | 是否为块级元素 | N
+borderless | Boolean | undefined | 是否开启无边框模式 | N
+checked | Boolean | false | 是否选中 | N
+defaultChecked | Boolean | false | 是否选中。非受控属性 | N
+children | TNode | - | 单选内容，同 label。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
+content | TNode | - | 单选内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
+contentDisabled | Boolean | false | 是否禁用组件内容（content）触发选中 | N
+disabled | Boolean | undefined | 是否为禁用态。如果存在父组件 RadioGroup，默认值由 RadioGroup.disabled 控制。优先级：Radio.disabled > RadioGroup.disabled > Form.disabled | N
+icon | String / Array | 'circle' | 自定义选中图标和非选中图标。示例：[选中态图标地址，非选中态图标地址]。使用 String 时，值为 circle 表示填充型图标、值为 line 表示描边型图标、值为 dot 表示圆点图标、值为 'none' 则表示没有图标。TS 类型：`'circle' \| 'line' \| 'dot' \| 'none' \|Array<TNode>`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
+label | TNode | - | 主文案。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
 maxContentRow | Number | 5 | 内容最大行数限制 | N
 maxLabelRow | Number | 3 | 主文案最大行数限制 | N
 name | String | - | HTML 元素原生属性 | N
-value | String / Number / Boolean | undefined | 单选按钮的值。TS 类型：`RadioValue` `type RadioValue = string | number | boolean`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/radio/type.ts) | N
+placement | String | left | 复选框和内容相对位置。可选项：left/right | N
+value | String / Number / Boolean | undefined | 单选按钮的值。TS 类型：`string \| number \| boolean` | N
 onChange | Function |  | TS 类型：`(checked: boolean, context: { e: ChangeEvent }) => void`<br/>选中状态变化时触发 | N
 
+
 ### RadioGroup Props
 
-名称 | 类型 | 默认值 | 说明 | 必传
+名称 | 类型 | 默认值 | 描述 | 必传
 -- | -- | -- | -- | --
 className | String | - | 类名 | N
 style | Object | - | 样式，TS 类型：`React.CSSProperties` | N
-disabled | Boolean | undefined | 是否禁用全部子单选框 | N
+allowUncheck | Boolean | false | 是否允许取消选中 | N
+borderless | Boolean | false | 是否开启无边框模式；优先级低于 Radio | N
+disabled | Boolean | undefined | 是否禁用全部子单选框。优先级：Radio.disabled > RadioGroup.disabled > Form.disabled | N
+icon | String / Array | 'circle' | 自定义选中图标和非选中图标。示例：[选中态图标地址，非选中态图标地址]。使用 String 时，值为 circle 表示填充型图标、值为 line 表示描边型图标、值为 dot 表示圆点图标。TS 类型：`'circle' \| 'line' \| 'dot' \| Array<TNode>`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
+keys | Object | - | 用来定义 value / label 在 `options` 中对应的字段别名。TS 类型：`KeysType`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
 name | String | - | HTML 元素原生属性 | N
-options | Array | - | 单选组件按钮形式。RadioOption 数据类型为 string 或 number 时，表示 label 和 value 值相同。TS 类型：`Array<RadioOption>` `type RadioOption = string | number | RadioOptionObj` `interface RadioOptionObj { label?: string | TNode; value?: string | number; disabled?: boolean }`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/radio/type.ts) | N
-value | String / Number / Boolean | undefined | 选中的值。TS 类型：`RadioValue` | N
-defaultValue | String / Number / Boolean | undefined | 选中的值。非受控属性。TS 类型：`RadioValue` | N
-onChange | Function |  | TS 类型：`(value: RadioValue, context: { e: ChangeEvent }) => void`<br/>选中值发生变化时触发 | N
+options | Array | - | 单选组件按钮形式。RadioOption 数据类型为 string 或 number 时，表示 label 和 value 值相同。TS 类型：`Array<RadioOption>` `type RadioOption = string \| number \| RadioOptionObj` `interface RadioOptionObj { label?: string \| TNode; value?: string \| number \| boolean; disabled?: boolean }`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/radio/type.ts) | N
+placement | String | left | 复选框和内容相对位置。可选项：left/right | N
+value | String / Number / Boolean | - | 选中的值。TS 类型：`T` `type RadioValue = string \| number \| boolean`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/radio/type.ts) | N
+defaultValue | String / Number / Boolean | - | 选中的值。非受控属性。TS 类型：`T` `type RadioValue = string \| number \| boolean`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/radio/type.ts) | N
+onChange | Function |  | TS 类型：`(value: T, context: { e: ChangeEvent }) => void`<br/>选中值发生变化时触发 | N
diff --git a/src/radio/style/index.js b/src/radio/style/index.js
index f23ec6acf..1b755a934 100644
--- a/src/radio/style/index.js
+++ b/src/radio/style/index.js
@@ -1,4 +1,2 @@
-import '../../_common/style/mobile/components/radio/_index.less';
+import '../../_common/style/mobile/components/radio/v2/_index.less';
 import '../../_common/style/mobile/components/radio-group/_index.less';
-
-import './index.less';
diff --git a/src/radio/style/index.less b/src/radio/style/index.less
deleted file mode 100644
index 916806e40..000000000
--- a/src/radio/style/index.less
+++ /dev/null
@@ -1,9 +0,0 @@
-.t-radio__wrap {
-  align-self: flex-start;
-}
-
-.t-radio.t-is-checked {
-  .t-radio__checked__disable-icon {
-    color: #dcdcdc;
-  }
-}
diff --git a/src/radio/type.ts b/src/radio/type.ts
index aa000cb94..cfc5954da 100644
--- a/src/radio/type.ts
+++ b/src/radio/type.ts
@@ -4,12 +4,12 @@
  * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
  * */
 
-import { TNode } from '../common';
+import { TNode, KeysType } from '../common';
 import { ChangeEvent } from 'react';
 
 export interface TdRadioProps {
   /**
-   * 复选框和内容相对位置
+   * 已废弃。复选框和内容相对位置
    * @default left
    */
   align?: 'left' | 'right';
@@ -18,12 +18,23 @@ export interface TdRadioProps {
    * @default false
    */
   allowUncheck?: boolean;
+  /**
+   * 是否为块级元素
+   * @default true
+   */
+  block?: boolean;
+  /**
+   * 是否开启无边框模式
+   */
+  borderless?: boolean;
   /**
    * 是否选中
+   * @default false
    */
   checked?: boolean;
   /**
    * 是否选中，非受控属性
+   * @default false
    */
   defaultChecked?: boolean;
   /**
@@ -36,17 +47,18 @@ export interface TdRadioProps {
   content?: TNode;
   /**
    * 是否禁用组件内容（content）触发选中
+   * @default false
    */
   contentDisabled?: boolean;
   /**
-   * 是否为禁用态
+   * 是否为禁用态。如果存在父组件 RadioGroup，默认值由 RadioGroup.disabled 控制。优先级：Radio.disabled > RadioGroup.disabled > Form.disabled
    */
   disabled?: boolean;
   /**
-   * 自定义选中图标和非选中图标。示例：[选中态图标地址，非选中态图标地址]。值为 fill-circle 表示图标为填充型图标，值为 stroke-line 表示图标为描边型图标
-   * @default 'fill-circle'
+   * 自定义选中图标和非选中图标。示例：[选中态图标地址，非选中态图标地址]。使用 String 时，值为 circle 表示填充型图标、值为 line 表示描边型图标、值为 dot 表示圆点图标、值为 'none' 则表示没有图标
+   * @default 'circle'
    */
-  icon?: Array<TNode>;
+  icon?: 'circle' | 'line' | 'dot' | 'none' | Array<TNode>;
   /**
    * 主文案
    */
@@ -66,21 +78,45 @@ export interface TdRadioProps {
    * @default ''
    */
   name?: string;
+  /**
+   * 复选框和内容相对位置
+   * @default left
+   */
+  placement?: 'left' | 'right';
   /**
    * 单选按钮的值
    */
-  value?: RadioValue;
+  value?: string | number | boolean;
   /**
    * 选中状态变化时触发
    */
   onChange?: (checked: boolean, context: { e: ChangeEvent<HTMLDivElement> }) => void;
 }
 
-export interface TdRadioGroupProps {
+export interface TdRadioGroupProps<T = RadioValue> {
+  /**
+   * 是否允许取消选中
+   * @default false
+   */
+  allowUncheck?: boolean;
+  /**
+   * 是否开启无边框模式；优先级低于 Radio
+   * @default false
+   */
+  borderless?: boolean;
   /**
-   * 是否禁用全部子单选框
+   * 是否禁用全部子单选框。优先级：Radio.disabled > RadioGroup.disabled > Form.disabled
    */
   disabled?: boolean;
+  /**
+   * 自定义选中图标和非选中图标。示例：[选中态图标地址，非选中态图标地址]。使用 String 时，值为 circle 表示填充型图标、值为 line 表示描边型图标、值为 dot 表示圆点图标
+   * @default 'circle'
+   */
+  icon?: 'circle' | 'line' | 'dot' | Array<TNode>;
+  /**
+   * 用来定义 value / label 在 `options` 中对应的字段别名
+   */
+  keys?: KeysType;
   /**
    * HTML 元素原生属性
    * @default ''
@@ -90,26 +126,31 @@ export interface TdRadioGroupProps {
    * 单选组件按钮形式。RadioOption 数据类型为 string 或 number 时，表示 label 和 value 值相同
    */
   options?: Array<RadioOption>;
+  /**
+   * 复选框和内容相对位置
+   * @default left
+   */
+  placement?: 'left' | 'right';
   /**
    * 选中的值
    */
-  value?: RadioValue;
+  value?: T;
   /**
    * 选中的值，非受控属性
    */
-  defaultValue?: RadioValue;
+  defaultValue?: T;
   /**
    * 选中值发生变化时触发
    */
-  onChange?: (value: RadioValue, context: { e: ChangeEvent<HTMLInputElement> }) => void;
+  onChange?: (value: T, context: { e: ChangeEvent<HTMLDivElement> }) => void;
 }
 
-export type RadioValue = string | number | boolean;
-
 export type RadioOption = string | number | RadioOptionObj;
 
 export interface RadioOptionObj {
   label?: string | TNode;
-  value?: string | number;
+  value?: string | number | boolean;
   disabled?: boolean;
 }
+
+export type RadioValue = string | number | boolean;
diff --git a/test/snap/__snapshots__/csr.test.jsx.snap b/test/snap/__snapshots__/csr.test.jsx.snap
index 0a91d394e..06cc76426 100644
--- a/test/snap/__snapshots__/csr.test.jsx.snap
+++ b/test/snap/__snapshots__/csr.test.jsx.snap
@@ -6122,6 +6122,1838 @@ exports[`csr snapshot test > csr test src/progress/_example/transition.tsx 1`] =
 </div>
 `;
 
+exports[`csr snapshot test > csr test src/radio/_example/base.tsx 1`] = `
+<div>
+  <div
+    class="t-radio-group "
+  >
+    <div
+      class="t-radio t-radio--left t-radio--block"
+    >
+      <input
+        checked=""
+        class="t-radio__original"
+        readonly=""
+        type="radio"
+        value="idx0"
+      />
+      <div
+        class="t-radio__icon t-radio__icon--left t-radio__icon--checked"
+      >
+        <svg
+          class="t-icon t-icon-check-circle-filled t-radio__icon-wrap"
+          fill="none"
+          height="1em"
+          viewBox="0 0 24 24"
+          width="1em"
+        >
+          <path
+            d="M12 23a11 11 0 100-22 11 11 0 000 22zM7.5 10.59l3 3 6-6L17.91 9l-7.41 7.41L6.09 12l1.41-1.41z"
+            fill="currentColor"
+          />
+        </svg>
+      </div>
+      <div
+        class="t-radio__content"
+      >
+        <span
+          class="t-radio__title"
+          style="display: -webkit-box; overflow: hidden; -webkit-line-clamp: 3;"
+        >
+          单选
+        </span>
+      </div>
+      <div
+        class="t-radio__border t-radio__border--left"
+      />
+    </div>
+    <div
+      class="t-radio t-radio--left t-radio--block"
+    >
+      <input
+        class="t-radio__original"
+        readonly=""
+        type="radio"
+        value="idx1"
+      />
+      <div
+        class="t-radio__icon t-radio__icon--left"
+      >
+        <div
+          class="t-radio__icon-circle"
+        />
+      </div>
+      <div
+        class="t-radio__content"
+      >
+        <span
+          class="t-radio__title"
+          style="display: -webkit-box; overflow: hidden; -webkit-line-clamp: 3;"
+        >
+          单选
+        </span>
+      </div>
+      <div
+        class="t-radio__border t-radio__border--left"
+      />
+    </div>
+    <div
+      class="t-radio t-radio--left t-radio--block"
+    >
+      <input
+        class="t-radio__original"
+        readonly=""
+        type="radio"
+        value="idx2"
+      />
+      <div
+        class="t-radio__icon t-radio__icon--left"
+      >
+        <div
+          class="t-radio__icon-circle"
+        />
+      </div>
+      <div
+        class="t-radio__content"
+      >
+        <span
+          class="t-radio__title"
+          style="display: -webkit-box; overflow: hidden; -webkit-line-clamp: 3;"
+        >
+          单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选
+        </span>
+      </div>
+      <div
+        class="t-radio__border t-radio__border--left"
+      />
+    </div>
+    <div
+      class="t-radio t-radio--left t-radio--block"
+    >
+      <input
+        class="t-radio__original"
+        readonly=""
+        type="radio"
+        value="idx3"
+      />
+      <div
+        class="t-radio__icon t-radio__icon--left"
+      >
+        <div
+          class="t-radio__icon-circle"
+        />
+      </div>
+      <div
+        class="t-radio__content"
+      >
+        <span
+          class="t-radio__title"
+          style="display: -webkit-box; overflow: hidden; -webkit-line-clamp: 3;"
+        >
+          单选
+        </span>
+        <div
+          class="t-radio__description undefined"
+          style="display: -webkit-box; overflow: hidden; -webkit-line-clamp: 5;"
+        >
+          描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息
+        </div>
+      </div>
+      <div
+        class="t-radio__border t-radio__border--left"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`csr snapshot test > csr test src/radio/_example/card.tsx 1`] = `
+<div>
+  <div
+    class="t-radio-group theme-card"
+  >
+    <div
+      class="t-radio t-radio--left t-radio--block"
+    >
+      <input
+        checked=""
+        class="t-radio__original"
+        readonly=""
+        type="radio"
+        value="1"
+      />
+      <div
+        class="t-radio__icon t-radio__icon--left t-radio__icon--checked"
+      >
+        <svg
+          class="t-icon t-icon-check-circle-filled t-radio__icon-wrap"
+          fill="none"
+          height="1em"
+          viewBox="0 0 24 24"
+          width="1em"
+        >
+          <path
+            d="M12 23a11 11 0 100-22 11 11 0 000 22zM7.5 10.59l3 3 6-6L17.91 9l-7.41 7.41L6.09 12l1.41-1.41z"
+            fill="currentColor"
+          />
+        </svg>
+      </div>
+      <div
+        class="t-radio__content"
+      >
+        <span
+          class="t-radio__title"
+          style="display: -webkit-box; overflow: hidden; -webkit-line-clamp: 3;"
+        >
+          单选
+        </span>
+      </div>
+      <div
+        class="t-radio__border t-radio__border--left"
+      />
+    </div>
+    <div
+      class="t-radio t-radio--left t-radio--block"
+    >
+      <input
+        class="t-radio__original"
+        readonly=""
+        type="radio"
+        value="2"
+      />
+      <div
+        class="t-radio__icon t-radio__icon--left"
+      >
+        <div
+          class="t-radio__icon-circle"
+        />
+      </div>
+      <div
+        class="t-radio__content"
+      >
+        <span
+          class="t-radio__title"
+          style="display: -webkit-box; overflow: hidden; -webkit-line-clamp: 3;"
+        >
+          单选
+        </span>
+      </div>
+      <div
+        class="t-radio__border t-radio__border--left"
+      />
+    </div>
+    <div
+      class="t-radio t-radio--left t-radio--block"
+    >
+      <input
+        class="t-radio__original"
+        readonly=""
+        type="radio"
+        value="3"
+      />
+      <div
+        class="t-radio__icon t-radio__icon--left"
+      >
+        <div
+          class="t-radio__icon-circle"
+        />
+      </div>
+      <div
+        class="t-radio__content"
+      >
+        <span
+          class="t-radio__title"
+          style="display: -webkit-box; overflow: hidden; -webkit-line-clamp: 3;"
+        >
+          单选标题多行单选标题多行单选标题多行单选标题多行单选标题多行
+        </span>
+      </div>
+      <div
+        class="t-radio__border t-radio__border--left"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`csr snapshot test > csr test src/radio/_example/custom.tsx 1`] = `
+<div>
+  <div
+    class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"
+  >
+    <div
+      class="tdesign-mobile-demo-block__header"
+    >
+      <p
+        class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle"
+      >
+        单选框尺寸规格
+      </p>
+    </div>
+    <div
+      class="tdesign-mobile-demo-block__slot"
+    >
+      <div
+        class="t-radio-group "
+      >
+        <div
+          class="card card--active"
+        >
+          <svg
+            class="t-icon t-icon-check card__icon"
+            color="#fff"
+          >
+            <use
+              xlink:href="#t-icon-check"
+            />
+          </svg>
+          <div
+            class="t-radio t-radio--left t-radio--block"
+          >
+            <input
+              checked=""
+              class="t-radio__original"
+              readonly=""
+              type="radio"
+              value="0"
+            />
+            <div
+              class="t-radio__icon t-radio__icon--left t-radio__icon--checked"
+            />
+            <div
+              class="t-radio__content"
+            >
+              <span
+                class="t-radio__title"
+                style="display: -webkit-box; overflow: hidden; -webkit-line-clamp: 3;"
+              >
+                单选
+              </span>
+              <div
+                class="t-radio__description undefined"
+                style="display: -webkit-box; overflow: hidden; -webkit-line-clamp: 5;"
+              >
+                描述信息描述信息描述信息描述信息描述信息
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          class="card "
+        >
+          <div
+            class="t-radio t-radio--left t-radio--block"
+          >
+            <input
+              class="t-radio__original"
+              readonly=""
+              type="radio"
+              value="1"
+            />
+            <div
+              class="t-radio__icon t-radio__icon--left"
+            />
+            <div
+              class="t-radio__content"
+            >
+              <span
+                class="t-radio__title"
+                style="display: -webkit-box; overflow: hidden; -webkit-line-clamp: 3;"
+              >
+                单选
+              </span>
+              <div
+                class="t-radio__description undefined"
+                style="display: -webkit-box; overflow: hidden; -webkit-line-clamp: 5;"
+              >
+                描述信息描述信息描述信息描述信息描述信息
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          class="card "
+        >
+          <div
+            class="t-radio t-radio--left t-radio--block"
+          >
+            <input
+              class="t-radio__original"
+              readonly=""
+              type="radio"
+              value="2"
+            />
+            <div
+              class="t-radio__icon t-radio__icon--left"
+            />
+            <div
+              class="t-radio__content"
+            >
+              <span
+                class="t-radio__title"
+                style="display: -webkit-box; overflow: hidden; -webkit-line-clamp: 3;"
+              >
+                单选
+              </span>
+              <div
+                class="t-radio__description undefined"
+                style="display: -webkit-box; overflow: hidden; -webkit-line-clamp: 5;"
+              >
+                描述信息描述信息描述信息描述信息描述信息
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"
+  >
+    <div
+      class="tdesign-mobile-demo-block__header"
+    >
+      <p
+        class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle"
+      >
+        横向卡片单选框
+      </p>
+    </div>
+    <div
+      class="tdesign-mobile-demo-block__slot"
+    >
+      <div
+        class="t-radio-group horizontal-box"
+      >
+        <div
+          class="card card--active"
+        >
+          <svg
+            class="t-icon t-icon-check card__icon"
+            color="#fff"
+          >
+            <use
+              xlink:href="#t-icon-check"
+            />
+          </svg>
+          <div
+            class="t-radio t-radio--left t-radio--block"
+          >
+            <input
+              checked=""
+              class="t-radio__original"
+              readonly=""
+              type="radio"
+              value="0"
+            />
+            <div
+              class="t-radio__icon t-radio__icon--left t-radio__icon--checked"
+            />
+            <div
+              class="t-radio__content"
+            >
+              <span
+                class="t-radio__title"
+                style="display: -webkit-box; overflow: hidden; -webkit-line-clamp: 3;"
+              >
+                单选
+              </span>
+            </div>
+          </div>
+        </div>
+        <div
+          class="card "
+        >
+          <div
+            class="t-radio t-radio--left t-radio--block"
+          >
+            <input
+              class="t-radio__original"
+              readonly=""
+              type="radio"
+              value="1"
+            />
+            <div
+              class="t-radio__icon t-radio__icon--left"
+            />
+            <div
+              class="t-radio__content"
+            >
+              <span
+                class="t-radio__title"
+                style="display: -webkit-box; overflow: hidden; -webkit-line-clamp: 3;"
+              >
+                单选
+              </span>
+            </div>
+          </div>
+        </div>
+        <div
+          class="card "
+        >
+          <div
+            class="t-radio t-radio--left t-radio--block"
+          >
+            <input
+              class="t-radio__original"
+              readonly=""
+              type="radio"
+              value="2"
+            />
+            <div
+              class="t-radio__icon t-radio__icon--left"
+            />
+            <div
+              class="t-radio__content"
+            >
+              <span
+                class="t-radio__title"
+                style="display: -webkit-box; overflow: hidden; -webkit-line-clamp: 3;"
+              >
+                单选
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`csr snapshot test > csr test src/radio/_example/horizontal.tsx 1`] = `
+<div>
+  <div
+    class="t-radio-group box"
+  >
+    <div
+      class="t-radio t-radio--left"
+    >
+      <input
+        checked=""
+        class="t-radio__original"
+        readonly=""
+        type="radio"
+        value="idx0"
+      />
+      <div
+        class="t-radio__icon t-radio__icon--left t-radio__icon--checked"
+      >
+        <svg
+          class="t-icon t-icon-check-circle-filled t-radio__icon-wrap"
+          fill="none"
+          height="1em"
+          viewBox="0 0 24 24"
+          width="1em"
+        >
+          <path
+            d="M12 23a11 11 0 100-22 11 11 0 000 22zM7.5 10.59l3 3 6-6L17.91 9l-7.41 7.41L6.09 12l1.41-1.41z"
+            fill="currentColor"
+          />
+        </svg>
+      </div>
+      <div
+        class="t-radio__content"
+      >
+        <span
+          class="t-radio__title"
+          style="display: -webkit-box; overflow: hidden; -webkit-line-clamp: 3;"
+        >
+          单选标题
+        </span>
+      </div>
+    </div>
+    <div
+      class="t-radio t-radio--left"
+    >
+      <input
+        class="t-radio__original"
+        readonly=""
+        type="radio"
+        value="idx1"
+      />
+      <div
+        class="t-radio__icon t-radio__icon--left"
+      >
+        <div
+          class="t-radio__icon-circle"
+        />
+      </div>
+      <div
+        class="t-radio__content"
+      >
+        <span
+          class="t-radio__title"
+          style="display: -webkit-box; overflow: hidden; -webkit-line-clamp: 3;"
+        >
+          单选标题
+        </span>
+      </div>
+    </div>
+    <div
+      class="t-radio t-radio--left"
+    >
+      <input
+        class="t-radio__original"
+        readonly=""
+        type="radio"
+        value="idx2"
+      />
+      <div
+        class="t-radio__icon t-radio__icon--left"
+      >
+        <div
+          class="t-radio__icon-circle"
+        />
+      </div>
+      <div
+        class="t-radio__content"
+      >
+        <span
+          class="t-radio__title"
+          style="display: -webkit-box; overflow: hidden; -webkit-line-clamp: 3;"
+        >
+          单选标题
+        </span>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`csr snapshot test > csr test src/radio/_example/icon.tsx 1`] = `
+<div>
+  <div
+    class="t-radio t-radio--left t-radio--block"
+  >
+    <input
+      checked=""
+      class="t-radio__original"
+      readonly=""
+      type="radio"
+      value=""
+    />
+    <div
+      class="t-radio__icon t-radio__icon--left t-radio__icon--checked"
+    >
+      <svg
+        class="t-icon t-icon-check t-radio__icon-wrap"
+        fill="none"
+        height="1em"
+        viewBox="0 0 24 24"
+        width="1em"
+      >
+        <path
+          d="M20.99 7.38l-10.61 10.6L4 11.63l1.42-1.41 4.95 4.95 9.2-9.2 1.4 1.42z"
+          fill="currentColor"
+        />
+      </svg>
+    </div>
+    <div
+      class="t-radio__content"
+    >
+      <span
+        class="t-radio__title"
+        style="display: -webkit-box; overflow: hidden; -webkit-line-clamp: 3;"
+      >
+        单选
+      </span>
+    </div>
+    <div
+      class="t-radio__border t-radio__border--left"
+    />
+  </div>
+  <div
+    class="t-radio t-radio--left t-radio--block"
+  >
+    <input
+      checked=""
+      class="t-radio__original"
+      readonly=""
+      type="radio"
+      value=""
+    />
+    <div
+      class="t-radio__icon t-radio__icon--left t-radio__icon--checked"
+    >
+      <div
+        class="t-radio__icon-dot"
+      />
+    </div>
+    <div
+      class="t-radio__content"
+    >
+      <span
+        class="t-radio__title"
+        style="display: -webkit-box; overflow: hidden; -webkit-line-clamp: 3;"
+      >
+        单选
+      </span>
+    </div>
+    <div
+      class="t-radio__border t-radio__border--left"
+    />
+  </div>
+</div>
+`;
+
+exports[`csr snapshot test > csr test src/radio/_example/index.tsx 1`] = `
+<div>
+  <div
+    class="tdesign-mobile-demo"
+  >
+    <div
+      class="tdesign-mobile-demo-header"
+    >
+      <h1
+        class="tdesign-mobile-demo-header__title"
+      >
+        Radio 单选框
+      </h1>
+      <p
+        class="tdesign-mobile-demo-header__summary"
+      >
+        用于在预设的一组选项中执行单项选择，并呈现选择结果。
+      </p>
+    </div>
+    <div
+      class="tdesign-mobile-demo-block"
+    >
+      <div
+        class="tdesign-mobile-demo-block__header"
+      >
+        <h2
+          class="tdesign-mobile-demo-block__title"
+        >
+          01 组件类型
+        </h2>
+        <p
+          class="tdesign-mobile-demo-block__summary"
+        >
+          纵向单选框
+        </p>
+      </div>
+      <div
+        class="tdesign-mobile-demo-block__slot"
+      >
+        <div
+          class="radio-demo"
+        >
+          <div
+            class="t-radio-group "
+          >
+            <div
+              class="t-radio t-radio--left t-radio--block"
+            >
+              <input
+                checked=""
+                class="t-radio__original"
+                readonly=""
+                type="radio"
+                value="idx0"
+              />
+              <div
+                class="t-radio__icon t-radio__icon--left t-radio__icon--checked"
+              >
+                <svg
+                  class="t-icon t-icon-check-circle-filled t-radio__icon-wrap"
+                  fill="none"
+                  height="1em"
+                  viewBox="0 0 24 24"
+                  width="1em"
+                >
+                  <path
+                    d="M12 23a11 11 0 100-22 11 11 0 000 22zM7.5 10.59l3 3 6-6L17.91 9l-7.41 7.41L6.09 12l1.41-1.41z"
+                    fill="currentColor"
+                  />
+                </svg>
+              </div>
+              <div
+                class="t-radio__content"
+              >
+                <span
+                  class="t-radio__title"
+                  style="display: -webkit-box; overflow: hidden; -webkit-line-clamp: 3;"
+                >
+                  单选
+                </span>
+              </div>
+              <div
+                class="t-radio__border t-radio__border--left"
+              />
+            </div>
+            <div
+              class="t-radio t-radio--left t-radio--block"
+            >
+              <input
+                class="t-radio__original"
+                readonly=""
+                type="radio"
+                value="idx1"
+              />
+              <div
+                class="t-radio__icon t-radio__icon--left"
+              >
+                <div
+                  class="t-radio__icon-circle"
+                />
+              </div>
+              <div
+                class="t-radio__content"
+              >
+                <span
+                  class="t-radio__title"
+                  style="display: -webkit-box; overflow: hidden; -webkit-line-clamp: 3;"
+                >
+                  单选
+                </span>
+              </div>
+              <div
+                class="t-radio__border t-radio__border--left"
+              />
+            </div>
+            <div
+              class="t-radio t-radio--left t-radio--block"
+            >
+              <input
+                class="t-radio__original"
+                readonly=""
+                type="radio"
+                value="idx2"
+              />
+              <div
+                class="t-radio__icon t-radio__icon--left"
+              >
+                <div
+                  class="t-radio__icon-circle"
+                />
+              </div>
+              <div
+                class="t-radio__content"
+              >
+                <span
+                  class="t-radio__title"
+                  style="display: -webkit-box; overflow: hidden; -webkit-line-clamp: 3;"
+                >
+                  单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选
+                </span>
+              </div>
+              <div
+                class="t-radio__border t-radio__border--left"
+              />
+            </div>
+            <div
+              class="t-radio t-radio--left t-radio--block"
+            >
+              <input
+                class="t-radio__original"
+                readonly=""
+                type="radio"
+                value="idx3"
+              />
+              <div
+                class="t-radio__icon t-radio__icon--left"
+              >
+                <div
+                  class="t-radio__icon-circle"
+                />
+              </div>
+              <div
+                class="t-radio__content"
+              >
+                <span
+                  class="t-radio__title"
+                  style="display: -webkit-box; overflow: hidden; -webkit-line-clamp: 3;"
+                >
+                  单选
+                </span>
+                <div
+                  class="t-radio__description undefined"
+                  style="display: -webkit-box; overflow: hidden; -webkit-line-clamp: 5;"
+                >
+                  描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息
+                </div>
+              </div>
+              <div
+                class="t-radio__border t-radio__border--left"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"
+    >
+      <div
+        class="tdesign-mobile-demo-block__header"
+      >
+        <p
+          class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle"
+        >
+          横向单选框
+        </p>
+      </div>
+      <div
+        class="tdesign-mobile-demo-block__slot"
+      >
+        <div
+          class="radio-demo"
+        >
+          <div
+            class="t-radio-group box"
+          >
+            <div
+              class="t-radio t-radio--left"
+            >
+              <input
+                checked=""
+                class="t-radio__original"
+                readonly=""
+                type="radio"
+                value="idx0"
+              />
+              <div
+                class="t-radio__icon t-radio__icon--left t-radio__icon--checked"
+              >
+                <svg
+                  class="t-icon t-icon-check-circle-filled t-radio__icon-wrap"
+                  fill="none"
+                  height="1em"
+                  viewBox="0 0 24 24"
+                  width="1em"
+                >
+                  <path
+                    d="M12 23a11 11 0 100-22 11 11 0 000 22zM7.5 10.59l3 3 6-6L17.91 9l-7.41 7.41L6.09 12l1.41-1.41z"
+                    fill="currentColor"
+                  />
+                </svg>
+              </div>
+              <div
+                class="t-radio__content"
+              >
+                <span
+                  class="t-radio__title"
+                  style="display: -webkit-box; overflow: hidden; -webkit-line-clamp: 3;"
+                >
+                  单选标题
+                </span>
+              </div>
+            </div>
+            <div
+              class="t-radio t-radio--left"
+            >
+              <input
+                class="t-radio__original"
+                readonly=""
+                type="radio"
+                value="idx1"
+              />
+              <div
+                class="t-radio__icon t-radio__icon--left"
+              >
+                <div
+                  class="t-radio__icon-circle"
+                />
+              </div>
+              <div
+                class="t-radio__content"
+              >
+                <span
+                  class="t-radio__title"
+                  style="display: -webkit-box; overflow: hidden; -webkit-line-clamp: 3;"
+                >
+                  单选标题
+                </span>
+              </div>
+            </div>
+            <div
+              class="t-radio t-radio--left"
+            >
+              <input
+                class="t-radio__original"
+                readonly=""
+                type="radio"
+                value="idx2"
+              />
+              <div
+                class="t-radio__icon t-radio__icon--left"
+              >
+                <div
+                  class="t-radio__icon-circle"
+                />
+              </div>
+              <div
+                class="t-radio__content"
+              >
+                <span
+                  class="t-radio__title"
+                  style="display: -webkit-box; overflow: hidden; -webkit-line-clamp: 3;"
+                >
+                  单选标题
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="tdesign-mobile-demo-block"
+    >
+      <div
+        class="tdesign-mobile-demo-block__header"
+      >
+        <h2
+          class="tdesign-mobile-demo-block__title"
+        >
+          02 组件状态
+        </h2>
+        <p
+          class="tdesign-mobile-demo-block__summary"
+        >
+          单选框禁用状态
+        </p>
+      </div>
+      <div
+        class="tdesign-mobile-demo-block__slot"
+      >
+        <div
+          class="radio-demo"
+        >
+          <div
+            class="t-radio-group "
+          >
+            <div
+              class="t-radio t-radio--left t-radio--block"
+            >
+              <input
+                checked=""
+                class="t-radio__original"
+                disabled=""
+                readonly=""
+                type="radio"
+                value="1"
+              />
+              <div
+                class="t-radio__icon t-radio__icon--left t-radio__icon--checked t-radio__icon--disabled"
+              >
+                <svg
+                  class="t-icon t-icon-check-circle-filled t-radio__icon-wrap"
+                  fill="none"
+                  height="1em"
+                  viewBox="0 0 24 24"
+                  width="1em"
+                >
+                  <path
+                    d="M12 23a11 11 0 100-22 11 11 0 000 22zM7.5 10.59l3 3 6-6L17.91 9l-7.41 7.41L6.09 12l1.41-1.41z"
+                    fill="currentColor"
+                  />
+                </svg>
+              </div>
+              <div
+                class="t-radio__content"
+              >
+                <span
+                  class="t-radio__title t-radio__title--disabled"
+                  style="display: -webkit-box; overflow: hidden; -webkit-line-clamp: 3; color: rgb(220, 220, 220);"
+                >
+                  选项禁用-已选
+                </span>
+              </div>
+              <div
+                class="t-radio__border t-radio__border--left"
+              />
+            </div>
+            <div
+              class="t-radio t-radio--left t-radio--block"
+            >
+              <input
+                class="t-radio__original"
+                disabled=""
+                readonly=""
+                type="radio"
+                value="2"
+              />
+              <div
+                class="t-radio__icon t-radio__icon--left t-radio__icon--disabled"
+              >
+                <div
+                  class="t-radio__icon-circle t-radio__icon-circle--disabled"
+                />
+              </div>
+              <div
+                class="t-radio__content"
+              >
+                <span
+                  class="t-radio__title t-radio__title--disabled"
+                  style="display: -webkit-box; overflow: hidden; -webkit-line-clamp: 3; color: rgb(220, 220, 220);"
+                >
+                  选项禁用-默认
+                </span>
+              </div>
+              <div
+                class="t-radio__border t-radio__border--left"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="tdesign-mobile-demo-block"
+    >
+      <div
+        class="tdesign-mobile-demo-block__header"
+      >
+        <h2
+          class="tdesign-mobile-demo-block__title"
+        >
+          03 组件样式
+        </h2>
+        <p
+          class="tdesign-mobile-demo-block__summary"
+        >
+          勾选样式
+        </p>
+      </div>
+      <div
+        class="tdesign-mobile-demo-block__slot"
+      >
+        <div
+          class="radio-demo"
+        >
+          <div
+            class="t-radio t-radio--left t-radio--block"
+          >
+            <input
+              checked=""
+              class="t-radio__original"
+              readonly=""
+              type="radio"
+              value=""
+            />
+            <div
+              class="t-radio__icon t-radio__icon--left t-radio__icon--checked"
+            >
+              <svg
+                class="t-icon t-icon-check t-radio__icon-wrap"
+                fill="none"
+                height="1em"
+                viewBox="0 0 24 24"
+                width="1em"
+              >
+                <path
+                  d="M20.99 7.38l-10.61 10.6L4 11.63l1.42-1.41 4.95 4.95 9.2-9.2 1.4 1.42z"
+                  fill="currentColor"
+                />
+              </svg>
+            </div>
+            <div
+              class="t-radio__content"
+            >
+              <span
+                class="t-radio__title"
+                style="display: -webkit-box; overflow: hidden; -webkit-line-clamp: 3;"
+              >
+                单选
+              </span>
+            </div>
+            <div
+              class="t-radio__border t-radio__border--left"
+            />
+          </div>
+          <div
+            class="t-radio t-radio--left t-radio--block"
+          >
+            <input
+              checked=""
+              class="t-radio__original"
+              readonly=""
+              type="radio"
+              value=""
+            />
+            <div
+              class="t-radio__icon t-radio__icon--left t-radio__icon--checked"
+            >
+              <div
+                class="t-radio__icon-dot"
+              />
+            </div>
+            <div
+              class="t-radio__content"
+            >
+              <span
+                class="t-radio__title"
+                style="display: -webkit-box; overflow: hidden; -webkit-line-clamp: 3;"
+              >
+                单选
+              </span>
+            </div>
+            <div
+              class="t-radio__border t-radio__border--left"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"
+    >
+      <div
+        class="tdesign-mobile-demo-block__header"
+      >
+        <p
+          class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle"
+        >
+          勾选显示位置
+        </p>
+      </div>
+      <div
+        class="tdesign-mobile-demo-block__slot"
+      >
+        <div
+          class="radio-demo"
+        >
+          <div
+            class="t-radio t-radio--left t-radio--block"
+          >
+            <input
+              checked=""
+              class="t-radio__original"
+              readonly=""
+              type="radio"
+              value=""
+            />
+            <div
+              class="t-radio__icon t-radio__icon--left t-radio__icon--checked"
+            >
+              <svg
+                class="t-icon t-icon-check-circle-filled t-radio__icon-wrap"
+                fill="none"
+                height="1em"
+                viewBox="0 0 24 24"
+                width="1em"
+              >
+                <path
+                  d="M12 23a11 11 0 100-22 11 11 0 000 22zM7.5 10.59l3 3 6-6L17.91 9l-7.41 7.41L6.09 12l1.41-1.41z"
+                  fill="currentColor"
+                />
+              </svg>
+            </div>
+            <div
+              class="t-radio__content"
+            >
+              <span
+                class="t-radio__title"
+                style="display: -webkit-box; overflow: hidden; -webkit-line-clamp: 3;"
+              >
+                单选
+              </span>
+            </div>
+            <div
+              class="t-radio__border t-radio__border--left"
+            />
+          </div>
+          <div
+            class="t-radio t-radio--right t-radio--block"
+          >
+            <input
+              checked=""
+              class="t-radio__original"
+              readonly=""
+              type="radio"
+              value=""
+            />
+            <div
+              class="t-radio__icon t-radio__icon--right t-radio__icon--checked"
+            >
+              <svg
+                class="t-icon t-icon-check-circle-filled t-radio__icon-wrap"
+                fill="none"
+                height="1em"
+                viewBox="0 0 24 24"
+                width="1em"
+              >
+                <path
+                  d="M12 23a11 11 0 100-22 11 11 0 000 22zM7.5 10.59l3 3 6-6L17.91 9l-7.41 7.41L6.09 12l1.41-1.41z"
+                  fill="currentColor"
+                />
+              </svg>
+            </div>
+            <div
+              class="t-radio__content"
+            >
+              <span
+                class="t-radio__title"
+                style="display: -webkit-box; overflow: hidden; -webkit-line-clamp: 3;"
+              >
+                单选
+              </span>
+            </div>
+            <div
+              class="t-radio__border t-radio__border--right"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"
+    >
+      <div
+        class="tdesign-mobile-demo-block__header"
+      >
+        <p
+          class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle"
+        >
+          非通栏单选样式
+        </p>
+      </div>
+      <div
+        class="tdesign-mobile-demo-block__slot"
+      >
+        <div
+          class="radio-demo"
+        >
+          <div
+            class="t-radio-group theme-card"
+          >
+            <div
+              class="t-radio t-radio--left t-radio--block"
+            >
+              <input
+                checked=""
+                class="t-radio__original"
+                readonly=""
+                type="radio"
+                value="1"
+              />
+              <div
+                class="t-radio__icon t-radio__icon--left t-radio__icon--checked"
+              >
+                <svg
+                  class="t-icon t-icon-check-circle-filled t-radio__icon-wrap"
+                  fill="none"
+                  height="1em"
+                  viewBox="0 0 24 24"
+                  width="1em"
+                >
+                  <path
+                    d="M12 23a11 11 0 100-22 11 11 0 000 22zM7.5 10.59l3 3 6-6L17.91 9l-7.41 7.41L6.09 12l1.41-1.41z"
+                    fill="currentColor"
+                  />
+                </svg>
+              </div>
+              <div
+                class="t-radio__content"
+              >
+                <span
+                  class="t-radio__title"
+                  style="display: -webkit-box; overflow: hidden; -webkit-line-clamp: 3;"
+                >
+                  单选
+                </span>
+              </div>
+              <div
+                class="t-radio__border t-radio__border--left"
+              />
+            </div>
+            <div
+              class="t-radio t-radio--left t-radio--block"
+            >
+              <input
+                class="t-radio__original"
+                readonly=""
+                type="radio"
+                value="2"
+              />
+              <div
+                class="t-radio__icon t-radio__icon--left"
+              >
+                <div
+                  class="t-radio__icon-circle"
+                />
+              </div>
+              <div
+                class="t-radio__content"
+              >
+                <span
+                  class="t-radio__title"
+                  style="display: -webkit-box; overflow: hidden; -webkit-line-clamp: 3;"
+                >
+                  单选
+                </span>
+              </div>
+              <div
+                class="t-radio__border t-radio__border--left"
+              />
+            </div>
+            <div
+              class="t-radio t-radio--left t-radio--block"
+            >
+              <input
+                class="t-radio__original"
+                readonly=""
+                type="radio"
+                value="3"
+              />
+              <div
+                class="t-radio__icon t-radio__icon--left"
+              >
+                <div
+                  class="t-radio__icon-circle"
+                />
+              </div>
+              <div
+                class="t-radio__content"
+              >
+                <span
+                  class="t-radio__title"
+                  style="display: -webkit-box; overflow: hidden; -webkit-line-clamp: 3;"
+                >
+                  单选标题多行单选标题多行单选标题多行单选标题多行单选标题多行
+                </span>
+              </div>
+              <div
+                class="t-radio__border t-radio__border--left"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="tdesign-mobile-demo-block"
+    >
+      <div
+        class="tdesign-mobile-demo-block__header"
+      >
+        <h2
+          class="tdesign-mobile-demo-block__title"
+        >
+          04 特殊样式
+        </h2>
+      </div>
+      <div
+        class="tdesign-mobile-demo-block__slot"
+      >
+        <div
+          class="radio-demo"
+        >
+          <div
+            class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"
+          >
+            <div
+              class="tdesign-mobile-demo-block__header"
+            >
+              <p
+                class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle"
+              >
+                单选框尺寸规格
+              </p>
+            </div>
+            <div
+              class="tdesign-mobile-demo-block__slot"
+            >
+              <div
+                class="t-radio-group "
+              >
+                <div
+                  class="card card--active"
+                >
+                  <svg
+                    class="t-icon t-icon-check card__icon"
+                    color="#fff"
+                  >
+                    <use
+                      xlink:href="#t-icon-check"
+                    />
+                  </svg>
+                  <div
+                    class="t-radio t-radio--left t-radio--block"
+                  >
+                    <input
+                      checked=""
+                      class="t-radio__original"
+                      readonly=""
+                      type="radio"
+                      value="0"
+                    />
+                    <div
+                      class="t-radio__icon t-radio__icon--left t-radio__icon--checked"
+                    />
+                    <div
+                      class="t-radio__content"
+                    >
+                      <span
+                        class="t-radio__title"
+                        style="display: -webkit-box; overflow: hidden; -webkit-line-clamp: 3;"
+                      >
+                        单选
+                      </span>
+                      <div
+                        class="t-radio__description undefined"
+                        style="display: -webkit-box; overflow: hidden; -webkit-line-clamp: 5;"
+                      >
+                        描述信息描述信息描述信息描述信息描述信息
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div
+                  class="card "
+                >
+                  <div
+                    class="t-radio t-radio--left t-radio--block"
+                  >
+                    <input
+                      class="t-radio__original"
+                      readonly=""
+                      type="radio"
+                      value="1"
+                    />
+                    <div
+                      class="t-radio__icon t-radio__icon--left"
+                    />
+                    <div
+                      class="t-radio__content"
+                    >
+                      <span
+                        class="t-radio__title"
+                        style="display: -webkit-box; overflow: hidden; -webkit-line-clamp: 3;"
+                      >
+                        单选
+                      </span>
+                      <div
+                        class="t-radio__description undefined"
+                        style="display: -webkit-box; overflow: hidden; -webkit-line-clamp: 5;"
+                      >
+                        描述信息描述信息描述信息描述信息描述信息
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div
+                  class="card "
+                >
+                  <div
+                    class="t-radio t-radio--left t-radio--block"
+                  >
+                    <input
+                      class="t-radio__original"
+                      readonly=""
+                      type="radio"
+                      value="2"
+                    />
+                    <div
+                      class="t-radio__icon t-radio__icon--left"
+                    />
+                    <div
+                      class="t-radio__content"
+                    >
+                      <span
+                        class="t-radio__title"
+                        style="display: -webkit-box; overflow: hidden; -webkit-line-clamp: 3;"
+                      >
+                        单选
+                      </span>
+                      <div
+                        class="t-radio__description undefined"
+                        style="display: -webkit-box; overflow: hidden; -webkit-line-clamp: 5;"
+                      >
+                        描述信息描述信息描述信息描述信息描述信息
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"
+          >
+            <div
+              class="tdesign-mobile-demo-block__header"
+            >
+              <p
+                class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle"
+              >
+                横向卡片单选框
+              </p>
+            </div>
+            <div
+              class="tdesign-mobile-demo-block__slot"
+            >
+              <div
+                class="t-radio-group horizontal-box"
+              >
+                <div
+                  class="card card--active"
+                >
+                  <svg
+                    class="t-icon t-icon-check card__icon"
+                    color="#fff"
+                  >
+                    <use
+                      xlink:href="#t-icon-check"
+                    />
+                  </svg>
+                  <div
+                    class="t-radio t-radio--left t-radio--block"
+                  >
+                    <input
+                      checked=""
+                      class="t-radio__original"
+                      readonly=""
+                      type="radio"
+                      value="0"
+                    />
+                    <div
+                      class="t-radio__icon t-radio__icon--left t-radio__icon--checked"
+                    />
+                    <div
+                      class="t-radio__content"
+                    >
+                      <span
+                        class="t-radio__title"
+                        style="display: -webkit-box; overflow: hidden; -webkit-line-clamp: 3;"
+                      >
+                        单选
+                      </span>
+                    </div>
+                  </div>
+                </div>
+                <div
+                  class="card "
+                >
+                  <div
+                    class="t-radio t-radio--left t-radio--block"
+                  >
+                    <input
+                      class="t-radio__original"
+                      readonly=""
+                      type="radio"
+                      value="1"
+                    />
+                    <div
+                      class="t-radio__icon t-radio__icon--left"
+                    />
+                    <div
+                      class="t-radio__content"
+                    >
+                      <span
+                        class="t-radio__title"
+                        style="display: -webkit-box; overflow: hidden; -webkit-line-clamp: 3;"
+                      >
+                        单选
+                      </span>
+                    </div>
+                  </div>
+                </div>
+                <div
+                  class="card "
+                >
+                  <div
+                    class="t-radio t-radio--left t-radio--block"
+                  >
+                    <input
+                      class="t-radio__original"
+                      readonly=""
+                      type="radio"
+                      value="2"
+                    />
+                    <div
+                      class="t-radio__icon t-radio__icon--left"
+                    />
+                    <div
+                      class="t-radio__content"
+                    >
+                      <span
+                        class="t-radio__title"
+                        style="display: -webkit-box; overflow: hidden; -webkit-line-clamp: 3;"
+                      >
+                        单选
+                      </span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`csr snapshot test > csr test src/radio/_example/placement.tsx 1`] = `
+<div>
+  <div
+    class="t-radio t-radio--left t-radio--block"
+  >
+    <input
+      checked=""
+      class="t-radio__original"
+      readonly=""
+      type="radio"
+      value=""
+    />
+    <div
+      class="t-radio__icon t-radio__icon--left t-radio__icon--checked"
+    >
+      <svg
+        class="t-icon t-icon-check-circle-filled t-radio__icon-wrap"
+        fill="none"
+        height="1em"
+        viewBox="0 0 24 24"
+        width="1em"
+      >
+        <path
+          d="M12 23a11 11 0 100-22 11 11 0 000 22zM7.5 10.59l3 3 6-6L17.91 9l-7.41 7.41L6.09 12l1.41-1.41z"
+          fill="currentColor"
+        />
+      </svg>
+    </div>
+    <div
+      class="t-radio__content"
+    >
+      <span
+        class="t-radio__title"
+        style="display: -webkit-box; overflow: hidden; -webkit-line-clamp: 3;"
+      >
+        单选
+      </span>
+    </div>
+    <div
+      class="t-radio__border t-radio__border--left"
+    />
+  </div>
+  <div
+    class="t-radio t-radio--right t-radio--block"
+  >
+    <input
+      checked=""
+      class="t-radio__original"
+      readonly=""
+      type="radio"
+      value=""
+    />
+    <div
+      class="t-radio__icon t-radio__icon--right t-radio__icon--checked"
+    >
+      <svg
+        class="t-icon t-icon-check-circle-filled t-radio__icon-wrap"
+        fill="none"
+        height="1em"
+        viewBox="0 0 24 24"
+        width="1em"
+      >
+        <path
+          d="M12 23a11 11 0 100-22 11 11 0 000 22zM7.5 10.59l3 3 6-6L17.91 9l-7.41 7.41L6.09 12l1.41-1.41z"
+          fill="currentColor"
+        />
+      </svg>
+    </div>
+    <div
+      class="t-radio__content"
+    >
+      <span
+        class="t-radio__title"
+        style="display: -webkit-box; overflow: hidden; -webkit-line-clamp: 3;"
+      >
+        单选
+      </span>
+    </div>
+    <div
+      class="t-radio__border t-radio__border--right"
+    />
+  </div>
+</div>
+`;
+
+exports[`csr snapshot test > csr test src/radio/_example/status.tsx 1`] = `
+<div>
+  <div
+    class="t-radio-group "
+  >
+    <div
+      class="t-radio t-radio--left t-radio--block"
+    >
+      <input
+        checked=""
+        class="t-radio__original"
+        disabled=""
+        readonly=""
+        type="radio"
+        value="1"
+      />
+      <div
+        class="t-radio__icon t-radio__icon--left t-radio__icon--checked t-radio__icon--disabled"
+      >
+        <svg
+          class="t-icon t-icon-check-circle-filled t-radio__icon-wrap"
+          fill="none"
+          height="1em"
+          viewBox="0 0 24 24"
+          width="1em"
+        >
+          <path
+            d="M12 23a11 11 0 100-22 11 11 0 000 22zM7.5 10.59l3 3 6-6L17.91 9l-7.41 7.41L6.09 12l1.41-1.41z"
+            fill="currentColor"
+          />
+        </svg>
+      </div>
+      <div
+        class="t-radio__content"
+      >
+        <span
+          class="t-radio__title t-radio__title--disabled"
+          style="display: -webkit-box; overflow: hidden; -webkit-line-clamp: 3; color: rgb(220, 220, 220);"
+        >
+          选项禁用-已选
+        </span>
+      </div>
+      <div
+        class="t-radio__border t-radio__border--left"
+      />
+    </div>
+    <div
+      class="t-radio t-radio--left t-radio--block"
+    >
+      <input
+        class="t-radio__original"
+        disabled=""
+        readonly=""
+        type="radio"
+        value="2"
+      />
+      <div
+        class="t-radio__icon t-radio__icon--left t-radio__icon--disabled"
+      >
+        <div
+          class="t-radio__icon-circle t-radio__icon-circle--disabled"
+        />
+      </div>
+      <div
+        class="t-radio__content"
+      >
+        <span
+          class="t-radio__title t-radio__title--disabled"
+          style="display: -webkit-box; overflow: hidden; -webkit-line-clamp: 3; color: rgb(220, 220, 220);"
+        >
+          选项禁用-默认
+        </span>
+      </div>
+      <div
+        class="t-radio__border t-radio__border--left"
+      />
+    </div>
+  </div>
+</div>
+`;
+
 exports[`csr snapshot test > csr test src/result/_example/custom.tsx 1`] = `
 <div>
   <div
@@ -8833,6 +10665,22 @@ exports[`ssr snapshot test > ssr test src/progress/_example/plump.tsx 1`] = `"<d
 
 exports[`ssr snapshot test > ssr test src/progress/_example/transition.tsx 1`] = `"<div class="example-progress" data-reactroot=""><div class="t-progress"><div class="t-progress--thin t-progress--status-default"><div class="t-progress__bar"><div class="t-progress__inner" style="width:88%;background:"></div></div><div class="t-progress__info">88%</div></div></div><div class="button-group"><button type="button" class="t-button t-button--outline t-button--primary t-size-s t-button--shape-rectangle"><span class="t-button__text"> <!-- -->减少</span></button><div class="space"></div><button type="button" class="t-button t-button--base t-button--primary t-size-s t-button--shape-rectangle"><span class="t-button__text"> <!-- -->增加</span></button></div></div>"`;
 
+exports[`ssr snapshot test > ssr test src/radio/_example/base.tsx 1`] = `"<div class="t-radio-group " data-reactroot=""><div class="t-radio t-radio--left t-radio--block"><input type="radio" readonly="" value="idx0" class="t-radio__original" checked=""/><div class="t-radio__icon t-radio__icon--left t-radio__icon--checked"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-check-circle-filled t-radio__icon-wrap"><path fill="currentColor" d="M12 23a11 11 0 100-22 11 11 0 000 22zM7.5 10.59l3 3 6-6L17.91 9l-7.41 7.41L6.09 12l1.41-1.41z"></path></svg></div><div class="t-radio__content"><span class="t-radio__title" style="display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:3;color:inherit">单选</span></div><div class="t-radio__border t-radio__border--left"></div></div><div class="t-radio t-radio--left t-radio--block"><input type="radio" readonly="" value="idx1" class="t-radio__original"/><div class="t-radio__icon t-radio__icon--left"><div class="t-radio__icon-circle"></div></div><div class="t-radio__content"><span class="t-radio__title" style="display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:3;color:inherit">单选</span></div><div class="t-radio__border t-radio__border--left"></div></div><div class="t-radio t-radio--left t-radio--block"><input type="radio" readonly="" value="idx2" class="t-radio__original"/><div class="t-radio__icon t-radio__icon--left"><div class="t-radio__icon-circle"></div></div><div class="t-radio__content"><span class="t-radio__title" style="display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:3;color:inherit">单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选</span></div><div class="t-radio__border t-radio__border--left"></div></div><div class="t-radio t-radio--left t-radio--block"><input type="radio" readonly="" value="idx3" class="t-radio__original"/><div class="t-radio__icon t-radio__icon--left"><div class="t-radio__icon-circle"></div></div><div class="t-radio__content"><span class="t-radio__title" style="display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:3;color:inherit">单选</span><div class="t-radio__description undefined" style="display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:5">描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息</div></div><div class="t-radio__border t-radio__border--left"></div></div></div>"`;
+
+exports[`ssr snapshot test > ssr test src/radio/_example/card.tsx 1`] = `"<div class="t-radio-group theme-card" data-reactroot=""><div class="t-radio t-radio--left t-radio--block"><input type="radio" readonly="" value="1" class="t-radio__original" checked=""/><div class="t-radio__icon t-radio__icon--left t-radio__icon--checked"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-check-circle-filled t-radio__icon-wrap"><path fill="currentColor" d="M12 23a11 11 0 100-22 11 11 0 000 22zM7.5 10.59l3 3 6-6L17.91 9l-7.41 7.41L6.09 12l1.41-1.41z"></path></svg></div><div class="t-radio__content"><span class="t-radio__title" style="display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:3;color:inherit">单选</span></div><div class="t-radio__border t-radio__border--left"></div></div><div class="t-radio t-radio--left t-radio--block"><input type="radio" readonly="" value="2" class="t-radio__original"/><div class="t-radio__icon t-radio__icon--left"><div class="t-radio__icon-circle"></div></div><div class="t-radio__content"><span class="t-radio__title" style="display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:3;color:inherit">单选</span></div><div class="t-radio__border t-radio__border--left"></div></div><div class="t-radio t-radio--left t-radio--block"><input type="radio" readonly="" value="3" class="t-radio__original"/><div class="t-radio__icon t-radio__icon--left"><div class="t-radio__icon-circle"></div></div><div class="t-radio__content"><span class="t-radio__title" style="display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:3;color:inherit">单选标题多行单选标题多行单选标题多行单选标题多行单选标题多行</span></div><div class="t-radio__border t-radio__border--left"></div></div></div>"`;
+
+exports[`ssr snapshot test > ssr test src/radio/_example/custom.tsx 1`] = `"<div class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"><div class="tdesign-mobile-demo-block__header"><p class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle">单选框尺寸规格</p></div><div class="tdesign-mobile-demo-block__slot"><div class="t-radio-group "><div class="card card--active"><svg class="t-icon t-icon-check card__icon" color="#fff"><use xlink:href="#t-icon-check"></use></svg><div class="t-radio t-radio--left t-radio--block"><input type="radio" readonly="" value="0" class="t-radio__original" checked=""/><div class="t-radio__icon t-radio__icon--left t-radio__icon--checked"></div><div class="t-radio__content"><span class="t-radio__title" style="display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:3;color:inherit">单选</span><div class="t-radio__description undefined" style="display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:5">描述信息描述信息描述信息描述信息描述信息</div></div></div></div><div class="card "><div class="t-radio t-radio--left t-radio--block"><input type="radio" readonly="" value="1" class="t-radio__original"/><div class="t-radio__icon t-radio__icon--left"></div><div class="t-radio__content"><span class="t-radio__title" style="display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:3;color:inherit">单选</span><div class="t-radio__description undefined" style="display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:5">描述信息描述信息描述信息描述信息描述信息</div></div></div></div><div class="card "><div class="t-radio t-radio--left t-radio--block"><input type="radio" readonly="" value="2" class="t-radio__original"/><div class="t-radio__icon t-radio__icon--left"></div><div class="t-radio__content"><span class="t-radio__title" style="display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:3;color:inherit">单选</span><div class="t-radio__description undefined" style="display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:5">描述信息描述信息描述信息描述信息描述信息</div></div></div></div></div></div></div><div class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"><div class="tdesign-mobile-demo-block__header"><p class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle">横向卡片单选框</p></div><div class="tdesign-mobile-demo-block__slot"><div class="t-radio-group horizontal-box"><div class="card card--active"><svg class="t-icon t-icon-check card__icon" color="#fff"><use xlink:href="#t-icon-check"></use></svg><div class="t-radio t-radio--left t-radio--block"><input type="radio" readonly="" value="0" class="t-radio__original" checked=""/><div class="t-radio__icon t-radio__icon--left t-radio__icon--checked"></div><div class="t-radio__content"><span class="t-radio__title" style="display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:3;color:inherit">单选</span></div></div></div><div class="card "><div class="t-radio t-radio--left t-radio--block"><input type="radio" readonly="" value="1" class="t-radio__original"/><div class="t-radio__icon t-radio__icon--left"></div><div class="t-radio__content"><span class="t-radio__title" style="display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:3;color:inherit">单选</span></div></div></div><div class="card "><div class="t-radio t-radio--left t-radio--block"><input type="radio" readonly="" value="2" class="t-radio__original"/><div class="t-radio__icon t-radio__icon--left"></div><div class="t-radio__content"><span class="t-radio__title" style="display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:3;color:inherit">单选</span></div></div></div></div></div></div>"`;
+
+exports[`ssr snapshot test > ssr test src/radio/_example/horizontal.tsx 1`] = `"<div class="t-radio-group box" data-reactroot=""><div class="t-radio t-radio--left"><input type="radio" readonly="" value="idx0" class="t-radio__original" checked=""/><div class="t-radio__icon t-radio__icon--left t-radio__icon--checked"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-check-circle-filled t-radio__icon-wrap"><path fill="currentColor" d="M12 23a11 11 0 100-22 11 11 0 000 22zM7.5 10.59l3 3 6-6L17.91 9l-7.41 7.41L6.09 12l1.41-1.41z"></path></svg></div><div class="t-radio__content"><span class="t-radio__title" style="display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:3;color:inherit">单选标题</span></div></div><div class="t-radio t-radio--left"><input type="radio" readonly="" value="idx1" class="t-radio__original"/><div class="t-radio__icon t-radio__icon--left"><div class="t-radio__icon-circle"></div></div><div class="t-radio__content"><span class="t-radio__title" style="display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:3;color:inherit">单选标题</span></div></div><div class="t-radio t-radio--left"><input type="radio" readonly="" value="idx2" class="t-radio__original"/><div class="t-radio__icon t-radio__icon--left"><div class="t-radio__icon-circle"></div></div><div class="t-radio__content"><span class="t-radio__title" style="display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:3;color:inherit">单选标题</span></div></div></div>"`;
+
+exports[`ssr snapshot test > ssr test src/radio/_example/icon.tsx 1`] = `"<div class="t-radio t-radio--left t-radio--block"><input type="radio" readonly="" class="t-radio__original" checked=""/><div class="t-radio__icon t-radio__icon--left t-radio__icon--checked"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-check t-radio__icon-wrap"><path fill="currentColor" d="M20.99 7.38l-10.61 10.6L4 11.63l1.42-1.41 4.95 4.95 9.2-9.2 1.4 1.42z"></path></svg></div><div class="t-radio__content"><span class="t-radio__title" style="display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:3;color:inherit">单选</span></div><div class="t-radio__border t-radio__border--left"></div></div><div class="t-radio t-radio--left t-radio--block"><input type="radio" readonly="" class="t-radio__original" checked=""/><div class="t-radio__icon t-radio__icon--left t-radio__icon--checked"><div class="t-radio__icon-dot"></div></div><div class="t-radio__content"><span class="t-radio__title" style="display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:3;color:inherit">单选</span></div><div class="t-radio__border t-radio__border--left"></div></div>"`;
+
+exports[`ssr snapshot test > ssr test src/radio/_example/index.tsx 1`] = `"<div class="tdesign-mobile-demo" data-reactroot=""><div class="tdesign-mobile-demo-header"><h1 class="tdesign-mobile-demo-header__title">Radio 单选框</h1><p class="tdesign-mobile-demo-header__summary">用于在预设的一组选项中执行单项选择，并呈现选择结果。</p></div><div class="tdesign-mobile-demo-block"><div class="tdesign-mobile-demo-block__header"><h2 class="tdesign-mobile-demo-block__title">01 组件类型</h2><p class="tdesign-mobile-demo-block__summary">纵向单选框</p></div><div class="tdesign-mobile-demo-block__slot"><div class="radio-demo"><div class="t-radio-group "><div class="t-radio t-radio--left t-radio--block"><input type="radio" readonly="" value="idx0" class="t-radio__original" checked=""/><div class="t-radio__icon t-radio__icon--left t-radio__icon--checked"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-check-circle-filled t-radio__icon-wrap"><path fill="currentColor" d="M12 23a11 11 0 100-22 11 11 0 000 22zM7.5 10.59l3 3 6-6L17.91 9l-7.41 7.41L6.09 12l1.41-1.41z"></path></svg></div><div class="t-radio__content"><span class="t-radio__title" style="display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:3;color:inherit">单选</span></div><div class="t-radio__border t-radio__border--left"></div></div><div class="t-radio t-radio--left t-radio--block"><input type="radio" readonly="" value="idx1" class="t-radio__original"/><div class="t-radio__icon t-radio__icon--left"><div class="t-radio__icon-circle"></div></div><div class="t-radio__content"><span class="t-radio__title" style="display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:3;color:inherit">单选</span></div><div class="t-radio__border t-radio__border--left"></div></div><div class="t-radio t-radio--left t-radio--block"><input type="radio" readonly="" value="idx2" class="t-radio__original"/><div class="t-radio__icon t-radio__icon--left"><div class="t-radio__icon-circle"></div></div><div class="t-radio__content"><span class="t-radio__title" style="display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:3;color:inherit">单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选</span></div><div class="t-radio__border t-radio__border--left"></div></div><div class="t-radio t-radio--left t-radio--block"><input type="radio" readonly="" value="idx3" class="t-radio__original"/><div class="t-radio__icon t-radio__icon--left"><div class="t-radio__icon-circle"></div></div><div class="t-radio__content"><span class="t-radio__title" style="display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:3;color:inherit">单选</span><div class="t-radio__description undefined" style="display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:5">描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息</div></div><div class="t-radio__border t-radio__border--left"></div></div></div></div></div></div><div class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"><div class="tdesign-mobile-demo-block__header"><p class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle">横向单选框</p></div><div class="tdesign-mobile-demo-block__slot"><div class="radio-demo"><div class="t-radio-group box"><div class="t-radio t-radio--left"><input type="radio" readonly="" value="idx0" class="t-radio__original" checked=""/><div class="t-radio__icon t-radio__icon--left t-radio__icon--checked"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-check-circle-filled t-radio__icon-wrap"><path fill="currentColor" d="M12 23a11 11 0 100-22 11 11 0 000 22zM7.5 10.59l3 3 6-6L17.91 9l-7.41 7.41L6.09 12l1.41-1.41z"></path></svg></div><div class="t-radio__content"><span class="t-radio__title" style="display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:3;color:inherit">单选标题</span></div></div><div class="t-radio t-radio--left"><input type="radio" readonly="" value="idx1" class="t-radio__original"/><div class="t-radio__icon t-radio__icon--left"><div class="t-radio__icon-circle"></div></div><div class="t-radio__content"><span class="t-radio__title" style="display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:3;color:inherit">单选标题</span></div></div><div class="t-radio t-radio--left"><input type="radio" readonly="" value="idx2" class="t-radio__original"/><div class="t-radio__icon t-radio__icon--left"><div class="t-radio__icon-circle"></div></div><div class="t-radio__content"><span class="t-radio__title" style="display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:3;color:inherit">单选标题</span></div></div></div></div></div></div><div class="tdesign-mobile-demo-block"><div class="tdesign-mobile-demo-block__header"><h2 class="tdesign-mobile-demo-block__title">02 组件状态</h2><p class="tdesign-mobile-demo-block__summary">单选框禁用状态</p></div><div class="tdesign-mobile-demo-block__slot"><div class="radio-demo"><div class="t-radio-group "><div class="t-radio t-radio--left t-radio--block"><input type="radio" readonly="" value="1" disabled="" class="t-radio__original" checked=""/><div class="t-radio__icon t-radio__icon--left t-radio__icon--checked t-radio__icon--disabled"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-check-circle-filled t-radio__icon-wrap"><path fill="currentColor" d="M12 23a11 11 0 100-22 11 11 0 000 22zM7.5 10.59l3 3 6-6L17.91 9l-7.41 7.41L6.09 12l1.41-1.41z"></path></svg></div><div class="t-radio__content"><span class="t-radio__title t-radio__title--disabled" style="display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:3;color:#dcdcdc">选项禁用-已选</span></div><div class="t-radio__border t-radio__border--left"></div></div><div class="t-radio t-radio--left t-radio--block"><input type="radio" readonly="" value="2" disabled="" class="t-radio__original"/><div class="t-radio__icon t-radio__icon--left t-radio__icon--disabled"><div class="t-radio__icon-circle t-radio__icon-circle--disabled"></div></div><div class="t-radio__content"><span class="t-radio__title t-radio__title--disabled" style="display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:3;color:#dcdcdc">选项禁用-默认</span></div><div class="t-radio__border t-radio__border--left"></div></div></div></div></div></div><div class="tdesign-mobile-demo-block"><div class="tdesign-mobile-demo-block__header"><h2 class="tdesign-mobile-demo-block__title">03 组件样式</h2><p class="tdesign-mobile-demo-block__summary">勾选样式</p></div><div class="tdesign-mobile-demo-block__slot"><div class="radio-demo"><div class="t-radio t-radio--left t-radio--block"><input type="radio" readonly="" class="t-radio__original" checked=""/><div class="t-radio__icon t-radio__icon--left t-radio__icon--checked"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-check t-radio__icon-wrap"><path fill="currentColor" d="M20.99 7.38l-10.61 10.6L4 11.63l1.42-1.41 4.95 4.95 9.2-9.2 1.4 1.42z"></path></svg></div><div class="t-radio__content"><span class="t-radio__title" style="display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:3;color:inherit">单选</span></div><div class="t-radio__border t-radio__border--left"></div></div><div class="t-radio t-radio--left t-radio--block"><input type="radio" readonly="" class="t-radio__original" checked=""/><div class="t-radio__icon t-radio__icon--left t-radio__icon--checked"><div class="t-radio__icon-dot"></div></div><div class="t-radio__content"><span class="t-radio__title" style="display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:3;color:inherit">单选</span></div><div class="t-radio__border t-radio__border--left"></div></div></div></div></div><div class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"><div class="tdesign-mobile-demo-block__header"><p class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle">勾选显示位置</p></div><div class="tdesign-mobile-demo-block__slot"><div class="radio-demo"><div class="t-radio t-radio--left t-radio--block"><input type="radio" readonly="" class="t-radio__original" checked=""/><div class="t-radio__icon t-radio__icon--left t-radio__icon--checked"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-check-circle-filled t-radio__icon-wrap"><path fill="currentColor" d="M12 23a11 11 0 100-22 11 11 0 000 22zM7.5 10.59l3 3 6-6L17.91 9l-7.41 7.41L6.09 12l1.41-1.41z"></path></svg></div><div class="t-radio__content"><span class="t-radio__title" style="display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:3;color:inherit">单选</span></div><div class="t-radio__border t-radio__border--left"></div></div><div class="t-radio t-radio--right t-radio--block"><input type="radio" readonly="" class="t-radio__original" checked=""/><div class="t-radio__icon t-radio__icon--right t-radio__icon--checked"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-check-circle-filled t-radio__icon-wrap"><path fill="currentColor" d="M12 23a11 11 0 100-22 11 11 0 000 22zM7.5 10.59l3 3 6-6L17.91 9l-7.41 7.41L6.09 12l1.41-1.41z"></path></svg></div><div class="t-radio__content"><span class="t-radio__title" style="display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:3;color:inherit">单选</span></div><div class="t-radio__border t-radio__border--right"></div></div></div></div></div><div class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"><div class="tdesign-mobile-demo-block__header"><p class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle">非通栏单选样式</p></div><div class="tdesign-mobile-demo-block__slot"><div class="radio-demo"><div class="t-radio-group theme-card"><div class="t-radio t-radio--left t-radio--block"><input type="radio" readonly="" value="1" class="t-radio__original" checked=""/><div class="t-radio__icon t-radio__icon--left t-radio__icon--checked"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-check-circle-filled t-radio__icon-wrap"><path fill="currentColor" d="M12 23a11 11 0 100-22 11 11 0 000 22zM7.5 10.59l3 3 6-6L17.91 9l-7.41 7.41L6.09 12l1.41-1.41z"></path></svg></div><div class="t-radio__content"><span class="t-radio__title" style="display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:3;color:inherit">单选</span></div><div class="t-radio__border t-radio__border--left"></div></div><div class="t-radio t-radio--left t-radio--block"><input type="radio" readonly="" value="2" class="t-radio__original"/><div class="t-radio__icon t-radio__icon--left"><div class="t-radio__icon-circle"></div></div><div class="t-radio__content"><span class="t-radio__title" style="display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:3;color:inherit">单选</span></div><div class="t-radio__border t-radio__border--left"></div></div><div class="t-radio t-radio--left t-radio--block"><input type="radio" readonly="" value="3" class="t-radio__original"/><div class="t-radio__icon t-radio__icon--left"><div class="t-radio__icon-circle"></div></div><div class="t-radio__content"><span class="t-radio__title" style="display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:3;color:inherit">单选标题多行单选标题多行单选标题多行单选标题多行单选标题多行</span></div><div class="t-radio__border t-radio__border--left"></div></div></div></div></div></div><div class="tdesign-mobile-demo-block"><div class="tdesign-mobile-demo-block__header"><h2 class="tdesign-mobile-demo-block__title">04 特殊样式</h2></div><div class="tdesign-mobile-demo-block__slot"><div class="radio-demo"><div class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"><div class="tdesign-mobile-demo-block__header"><p class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle">单选框尺寸规格</p></div><div class="tdesign-mobile-demo-block__slot"><div class="t-radio-group "><div class="card card--active"><svg class="t-icon t-icon-check card__icon" color="#fff"><use xlink:href="#t-icon-check"></use></svg><div class="t-radio t-radio--left t-radio--block"><input type="radio" readonly="" value="0" class="t-radio__original" checked=""/><div class="t-radio__icon t-radio__icon--left t-radio__icon--checked"></div><div class="t-radio__content"><span class="t-radio__title" style="display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:3;color:inherit">单选</span><div class="t-radio__description undefined" style="display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:5">描述信息描述信息描述信息描述信息描述信息</div></div></div></div><div class="card "><div class="t-radio t-radio--left t-radio--block"><input type="radio" readonly="" value="1" class="t-radio__original"/><div class="t-radio__icon t-radio__icon--left"></div><div class="t-radio__content"><span class="t-radio__title" style="display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:3;color:inherit">单选</span><div class="t-radio__description undefined" style="display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:5">描述信息描述信息描述信息描述信息描述信息</div></div></div></div><div class="card "><div class="t-radio t-radio--left t-radio--block"><input type="radio" readonly="" value="2" class="t-radio__original"/><div class="t-radio__icon t-radio__icon--left"></div><div class="t-radio__content"><span class="t-radio__title" style="display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:3;color:inherit">单选</span><div class="t-radio__description undefined" style="display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:5">描述信息描述信息描述信息描述信息描述信息</div></div></div></div></div></div></div><div class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"><div class="tdesign-mobile-demo-block__header"><p class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle">横向卡片单选框</p></div><div class="tdesign-mobile-demo-block__slot"><div class="t-radio-group horizontal-box"><div class="card card--active"><svg class="t-icon t-icon-check card__icon" color="#fff"><use xlink:href="#t-icon-check"></use></svg><div class="t-radio t-radio--left t-radio--block"><input type="radio" readonly="" value="0" class="t-radio__original" checked=""/><div class="t-radio__icon t-radio__icon--left t-radio__icon--checked"></div><div class="t-radio__content"><span class="t-radio__title" style="display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:3;color:inherit">单选</span></div></div></div><div class="card "><div class="t-radio t-radio--left t-radio--block"><input type="radio" readonly="" value="1" class="t-radio__original"/><div class="t-radio__icon t-radio__icon--left"></div><div class="t-radio__content"><span class="t-radio__title" style="display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:3;color:inherit">单选</span></div></div></div><div class="card "><div class="t-radio t-radio--left t-radio--block"><input type="radio" readonly="" value="2" class="t-radio__original"/><div class="t-radio__icon t-radio__icon--left"></div><div class="t-radio__content"><span class="t-radio__title" style="display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:3;color:inherit">单选</span></div></div></div></div></div></div></div></div></div></div>"`;
+
+exports[`ssr snapshot test > ssr test src/radio/_example/placement.tsx 1`] = `"<div class="t-radio t-radio--left t-radio--block"><input type="radio" readonly="" class="t-radio__original" checked=""/><div class="t-radio__icon t-radio__icon--left t-radio__icon--checked"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-check-circle-filled t-radio__icon-wrap"><path fill="currentColor" d="M12 23a11 11 0 100-22 11 11 0 000 22zM7.5 10.59l3 3 6-6L17.91 9l-7.41 7.41L6.09 12l1.41-1.41z"></path></svg></div><div class="t-radio__content"><span class="t-radio__title" style="display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:3;color:inherit">单选</span></div><div class="t-radio__border t-radio__border--left"></div></div><div class="t-radio t-radio--right t-radio--block"><input type="radio" readonly="" class="t-radio__original" checked=""/><div class="t-radio__icon t-radio__icon--right t-radio__icon--checked"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-check-circle-filled t-radio__icon-wrap"><path fill="currentColor" d="M12 23a11 11 0 100-22 11 11 0 000 22zM7.5 10.59l3 3 6-6L17.91 9l-7.41 7.41L6.09 12l1.41-1.41z"></path></svg></div><div class="t-radio__content"><span class="t-radio__title" style="display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:3;color:inherit">单选</span></div><div class="t-radio__border t-radio__border--right"></div></div>"`;
+
+exports[`ssr snapshot test > ssr test src/radio/_example/status.tsx 1`] = `"<div class="t-radio-group " data-reactroot=""><div class="t-radio t-radio--left t-radio--block"><input type="radio" readonly="" value="1" disabled="" class="t-radio__original" checked=""/><div class="t-radio__icon t-radio__icon--left t-radio__icon--checked t-radio__icon--disabled"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-check-circle-filled t-radio__icon-wrap"><path fill="currentColor" d="M12 23a11 11 0 100-22 11 11 0 000 22zM7.5 10.59l3 3 6-6L17.91 9l-7.41 7.41L6.09 12l1.41-1.41z"></path></svg></div><div class="t-radio__content"><span class="t-radio__title t-radio__title--disabled" style="display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:3;color:#dcdcdc">选项禁用-已选</span></div><div class="t-radio__border t-radio__border--left"></div></div><div class="t-radio t-radio--left t-radio--block"><input type="radio" readonly="" value="2" disabled="" class="t-radio__original"/><div class="t-radio__icon t-radio__icon--left t-radio__icon--disabled"><div class="t-radio__icon-circle t-radio__icon-circle--disabled"></div></div><div class="t-radio__content"><span class="t-radio__title t-radio__title--disabled" style="display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:3;color:#dcdcdc">选项禁用-默认</span></div><div class="t-radio__border t-radio__border--left"></div></div></div>"`;
+
 exports[`ssr snapshot test > ssr test src/result/_example/custom.tsx 1`] = `"<div class="t-result t-result--theme-default" data-reactroot=""><div class="t-result__thumb"><div class="t-image t-image--round extra-class-image"><div class="t-image__status"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-ellipsis"><path fill="currentColor" d="M3 10.5h3v3H3v-3zm7.5 0h3v3h-3v-3zm7.5 0h3v3h-3v-3z"></path></svg></div><img class="t-image__img" src="https://tdesign.gtimg.com/mobile/demos/result1.png" style="object-fit:fill;width:inherit;height:inherit"/></div></div><div class="t-result__title">自定义结果</div><div class="t-result__description">描述文字</div></div>"`;
 
 exports[`ssr snapshot test > ssr test src/result/_example/index.tsx 1`] = `"<div class="tdesign-mobile-demo"><div class="tdesign-mobile-demo-header"><h1 class="tdesign-mobile-demo-header__title">Result 结果</h1><p class="tdesign-mobile-demo-header__summary">结果反馈</p></div><div class="tdesign-mobile-demo-block"><div class="tdesign-mobile-demo-block__header"><h2 class="tdesign-mobile-demo-block__title">01类型</h2><p class="tdesign-mobile-demo-block__summary">不同结果反馈</p></div><div class="tdesign-mobile-demo-block__slot"><div><div class="t-result t-result--theme-success space"><div class="t-result__thumb"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-check-circle t-result__icon"><path fill="currentColor" d="M12 21a9 9 0 100-18 9 9 0 000 18zm11-9a11 11 0 11-22 0 11 11 0 0122 0zm-12.5 4.41L6.09 12l1.41-1.41 3 3 6-6L17.91 9l-7.41 7.41z"></path></svg></div><div class="t-result__title">成功状态</div><div class="t-result__description">描述文字</div></div><div class="t-result t-result--theme-error space"><div class="t-result__thumb"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close-circle t-result__icon"><path fill="currentColor" d="M12 21a9 9 0 100-18 9 9 0 000 18zm11-9a11 11 0 11-22 0 11 11 0 0122 0zM7.4 15.18L10.6 12 7.4 8.82 8.82 7.4 12 10.6l3.18-3.19 1.42 1.42L13.4 12l3.19 3.18-1.42 1.42L12 13.4 8.82 16.6 7.4 15.18z"></path></svg></div><div class="t-result__title">失败状态</div><div class="t-result__description">描述文字</div></div><div class="t-result t-result--theme-warning space"><div class="t-result__thumb"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-info-circle t-result__icon"><path fill="currentColor" d="M12 21a9 9 0 100-18 9 9 0 000 18zm11-9a11 11 0 11-22 0 11 11 0 0122 0zm-12 5.5V10h2v7.5h-2zm2-9h-2v-2h2v2z"></path></svg></div><div class="t-result__title">警示状态</div><div class="t-result__description">描述文字</div></div><div class="t-result t-result--theme-default space"><div class="t-result__thumb"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-info-circle t-result__icon"><path fill="currentColor" d="M12 21a9 9 0 100-18 9 9 0 000 18zm11-9a11 11 0 11-22 0 11 11 0 0122 0zm-12 5.5V10h2v7.5h-2zm2-9h-2v-2h2v2z"></path></svg></div><div class="t-result__title">默认状态</div><div class="t-result__description">描述文字</div></div></div></div></div><div class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"><div class="tdesign-mobile-demo-block__header"><p class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle">自定义结果</p></div><div class="tdesign-mobile-demo-block__slot"><div class="t-result t-result--theme-default"><div class="t-result__thumb"><div class="t-image t-image--round extra-class-image"><div class="t-image__status"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-ellipsis"><path fill="currentColor" d="M3 10.5h3v3H3v-3zm7.5 0h3v3h-3v-3zm7.5 0h3v3h-3v-3z"></path></svg></div><img class="t-image__img" src="https://tdesign.gtimg.com/mobile/demos/result1.png" style="object-fit:fill;width:inherit;height:inherit"/></div></div><div class="t-result__title">自定义结果</div><div class="t-result__description">描述文字</div></div></div></div><div class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"><div class="tdesign-mobile-demo-block__header"><p class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle">页面位置展示</p></div><div class="tdesign-mobile-demo-block__slot"><div class="padding"><button type="button" class="t-button t-button--outline t-button--primary t-size-l t-is-block t-button--shape-rectangle"><span class="t-button__text"> <!-- -->页面位置展示</span></button></div></div></div></div>"`;
diff --git a/test/snap/__snapshots__/ssr.test.jsx.snap b/test/snap/__snapshots__/ssr.test.jsx.snap
index 104565271..352ddde1b 100644
--- a/test/snap/__snapshots__/ssr.test.jsx.snap
+++ b/test/snap/__snapshots__/ssr.test.jsx.snap
@@ -72,6 +72,22 @@ exports[`ssr snapshot test > ssr test src/progress/_example/plump.tsx 1`] = `"<d
 
 exports[`ssr snapshot test > ssr test src/progress/_example/transition.tsx 1`] = `"<div class="example-progress" data-reactroot=""><div class="t-progress"><div class="t-progress--thin t-progress--status-default"><div class="t-progress__bar"><div class="t-progress__inner" style="width:88%;background:"></div></div><div class="t-progress__info">88%</div></div></div><div class="button-group"><button type="button" class="t-button t-button--outline t-button--primary t-size-s t-button--shape-rectangle"><span class="t-button__text"> <!-- -->减少</span></button><div class="space"></div><button type="button" class="t-button t-button--base t-button--primary t-size-s t-button--shape-rectangle"><span class="t-button__text"> <!-- -->增加</span></button></div></div>"`;
 
+exports[`ssr snapshot test > ssr test src/radio/_example/base.tsx 1`] = `"<div class="t-radio-group " data-reactroot=""><div class="t-radio t-radio--left t-radio--block"><input type="radio" readonly="" value="idx0" class="t-radio__original" checked=""/><div class="t-radio__icon t-radio__icon--left t-radio__icon--checked"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-check-circle-filled t-radio__icon-wrap"><path fill="currentColor" d="M12 23a11 11 0 100-22 11 11 0 000 22zM7.5 10.59l3 3 6-6L17.91 9l-7.41 7.41L6.09 12l1.41-1.41z"></path></svg></div><div class="t-radio__content"><span class="t-radio__title" style="display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:3;color:inherit">单选</span></div><div class="t-radio__border t-radio__border--left"></div></div><div class="t-radio t-radio--left t-radio--block"><input type="radio" readonly="" value="idx1" class="t-radio__original"/><div class="t-radio__icon t-radio__icon--left"><div class="t-radio__icon-circle"></div></div><div class="t-radio__content"><span class="t-radio__title" style="display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:3;color:inherit">单选</span></div><div class="t-radio__border t-radio__border--left"></div></div><div class="t-radio t-radio--left t-radio--block"><input type="radio" readonly="" value="idx2" class="t-radio__original"/><div class="t-radio__icon t-radio__icon--left"><div class="t-radio__icon-circle"></div></div><div class="t-radio__content"><span class="t-radio__title" style="display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:3;color:inherit">单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选</span></div><div class="t-radio__border t-radio__border--left"></div></div><div class="t-radio t-radio--left t-radio--block"><input type="radio" readonly="" value="idx3" class="t-radio__original"/><div class="t-radio__icon t-radio__icon--left"><div class="t-radio__icon-circle"></div></div><div class="t-radio__content"><span class="t-radio__title" style="display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:3;color:inherit">单选</span><div class="t-radio__description undefined" style="display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:5">描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息</div></div><div class="t-radio__border t-radio__border--left"></div></div></div>"`;
+
+exports[`ssr snapshot test > ssr test src/radio/_example/card.tsx 1`] = `"<div class="t-radio-group theme-card" data-reactroot=""><div class="t-radio t-radio--left t-radio--block"><input type="radio" readonly="" value="1" class="t-radio__original" checked=""/><div class="t-radio__icon t-radio__icon--left t-radio__icon--checked"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-check-circle-filled t-radio__icon-wrap"><path fill="currentColor" d="M12 23a11 11 0 100-22 11 11 0 000 22zM7.5 10.59l3 3 6-6L17.91 9l-7.41 7.41L6.09 12l1.41-1.41z"></path></svg></div><div class="t-radio__content"><span class="t-radio__title" style="display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:3;color:inherit">单选</span></div><div class="t-radio__border t-radio__border--left"></div></div><div class="t-radio t-radio--left t-radio--block"><input type="radio" readonly="" value="2" class="t-radio__original"/><div class="t-radio__icon t-radio__icon--left"><div class="t-radio__icon-circle"></div></div><div class="t-radio__content"><span class="t-radio__title" style="display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:3;color:inherit">单选</span></div><div class="t-radio__border t-radio__border--left"></div></div><div class="t-radio t-radio--left t-radio--block"><input type="radio" readonly="" value="3" class="t-radio__original"/><div class="t-radio__icon t-radio__icon--left"><div class="t-radio__icon-circle"></div></div><div class="t-radio__content"><span class="t-radio__title" style="display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:3;color:inherit">单选标题多行单选标题多行单选标题多行单选标题多行单选标题多行</span></div><div class="t-radio__border t-radio__border--left"></div></div></div>"`;
+
+exports[`ssr snapshot test > ssr test src/radio/_example/custom.tsx 1`] = `"<div class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"><div class="tdesign-mobile-demo-block__header"><p class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle">单选框尺寸规格</p></div><div class="tdesign-mobile-demo-block__slot"><div class="t-radio-group "><div class="card card--active"><svg class="t-icon t-icon-check card__icon" color="#fff"><use xlink:href="#t-icon-check"></use></svg><div class="t-radio t-radio--left t-radio--block"><input type="radio" readonly="" value="0" class="t-radio__original" checked=""/><div class="t-radio__icon t-radio__icon--left t-radio__icon--checked"></div><div class="t-radio__content"><span class="t-radio__title" style="display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:3;color:inherit">单选</span><div class="t-radio__description undefined" style="display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:5">描述信息描述信息描述信息描述信息描述信息</div></div></div></div><div class="card "><div class="t-radio t-radio--left t-radio--block"><input type="radio" readonly="" value="1" class="t-radio__original"/><div class="t-radio__icon t-radio__icon--left"></div><div class="t-radio__content"><span class="t-radio__title" style="display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:3;color:inherit">单选</span><div class="t-radio__description undefined" style="display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:5">描述信息描述信息描述信息描述信息描述信息</div></div></div></div><div class="card "><div class="t-radio t-radio--left t-radio--block"><input type="radio" readonly="" value="2" class="t-radio__original"/><div class="t-radio__icon t-radio__icon--left"></div><div class="t-radio__content"><span class="t-radio__title" style="display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:3;color:inherit">单选</span><div class="t-radio__description undefined" style="display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:5">描述信息描述信息描述信息描述信息描述信息</div></div></div></div></div></div></div><div class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"><div class="tdesign-mobile-demo-block__header"><p class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle">横向卡片单选框</p></div><div class="tdesign-mobile-demo-block__slot"><div class="t-radio-group horizontal-box"><div class="card card--active"><svg class="t-icon t-icon-check card__icon" color="#fff"><use xlink:href="#t-icon-check"></use></svg><div class="t-radio t-radio--left t-radio--block"><input type="radio" readonly="" value="0" class="t-radio__original" checked=""/><div class="t-radio__icon t-radio__icon--left t-radio__icon--checked"></div><div class="t-radio__content"><span class="t-radio__title" style="display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:3;color:inherit">单选</span></div></div></div><div class="card "><div class="t-radio t-radio--left t-radio--block"><input type="radio" readonly="" value="1" class="t-radio__original"/><div class="t-radio__icon t-radio__icon--left"></div><div class="t-radio__content"><span class="t-radio__title" style="display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:3;color:inherit">单选</span></div></div></div><div class="card "><div class="t-radio t-radio--left t-radio--block"><input type="radio" readonly="" value="2" class="t-radio__original"/><div class="t-radio__icon t-radio__icon--left"></div><div class="t-radio__content"><span class="t-radio__title" style="display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:3;color:inherit">单选</span></div></div></div></div></div></div>"`;
+
+exports[`ssr snapshot test > ssr test src/radio/_example/horizontal.tsx 1`] = `"<div class="t-radio-group box" data-reactroot=""><div class="t-radio t-radio--left"><input type="radio" readonly="" value="idx0" class="t-radio__original" checked=""/><div class="t-radio__icon t-radio__icon--left t-radio__icon--checked"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-check-circle-filled t-radio__icon-wrap"><path fill="currentColor" d="M12 23a11 11 0 100-22 11 11 0 000 22zM7.5 10.59l3 3 6-6L17.91 9l-7.41 7.41L6.09 12l1.41-1.41z"></path></svg></div><div class="t-radio__content"><span class="t-radio__title" style="display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:3;color:inherit">单选标题</span></div></div><div class="t-radio t-radio--left"><input type="radio" readonly="" value="idx1" class="t-radio__original"/><div class="t-radio__icon t-radio__icon--left"><div class="t-radio__icon-circle"></div></div><div class="t-radio__content"><span class="t-radio__title" style="display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:3;color:inherit">单选标题</span></div></div><div class="t-radio t-radio--left"><input type="radio" readonly="" value="idx2" class="t-radio__original"/><div class="t-radio__icon t-radio__icon--left"><div class="t-radio__icon-circle"></div></div><div class="t-radio__content"><span class="t-radio__title" style="display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:3;color:inherit">单选标题</span></div></div></div>"`;
+
+exports[`ssr snapshot test > ssr test src/radio/_example/icon.tsx 1`] = `"<div class="t-radio t-radio--left t-radio--block"><input type="radio" readonly="" class="t-radio__original" checked=""/><div class="t-radio__icon t-radio__icon--left t-radio__icon--checked"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-check t-radio__icon-wrap"><path fill="currentColor" d="M20.99 7.38l-10.61 10.6L4 11.63l1.42-1.41 4.95 4.95 9.2-9.2 1.4 1.42z"></path></svg></div><div class="t-radio__content"><span class="t-radio__title" style="display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:3;color:inherit">单选</span></div><div class="t-radio__border t-radio__border--left"></div></div><div class="t-radio t-radio--left t-radio--block"><input type="radio" readonly="" class="t-radio__original" checked=""/><div class="t-radio__icon t-radio__icon--left t-radio__icon--checked"><div class="t-radio__icon-dot"></div></div><div class="t-radio__content"><span class="t-radio__title" style="display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:3;color:inherit">单选</span></div><div class="t-radio__border t-radio__border--left"></div></div>"`;
+
+exports[`ssr snapshot test > ssr test src/radio/_example/index.tsx 1`] = `"<div class="tdesign-mobile-demo" data-reactroot=""><div class="tdesign-mobile-demo-header"><h1 class="tdesign-mobile-demo-header__title">Radio 单选框</h1><p class="tdesign-mobile-demo-header__summary">用于在预设的一组选项中执行单项选择，并呈现选择结果。</p></div><div class="tdesign-mobile-demo-block"><div class="tdesign-mobile-demo-block__header"><h2 class="tdesign-mobile-demo-block__title">01 组件类型</h2><p class="tdesign-mobile-demo-block__summary">纵向单选框</p></div><div class="tdesign-mobile-demo-block__slot"><div class="radio-demo"><div class="t-radio-group "><div class="t-radio t-radio--left t-radio--block"><input type="radio" readonly="" value="idx0" class="t-radio__original" checked=""/><div class="t-radio__icon t-radio__icon--left t-radio__icon--checked"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-check-circle-filled t-radio__icon-wrap"><path fill="currentColor" d="M12 23a11 11 0 100-22 11 11 0 000 22zM7.5 10.59l3 3 6-6L17.91 9l-7.41 7.41L6.09 12l1.41-1.41z"></path></svg></div><div class="t-radio__content"><span class="t-radio__title" style="display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:3;color:inherit">单选</span></div><div class="t-radio__border t-radio__border--left"></div></div><div class="t-radio t-radio--left t-radio--block"><input type="radio" readonly="" value="idx1" class="t-radio__original"/><div class="t-radio__icon t-radio__icon--left"><div class="t-radio__icon-circle"></div></div><div class="t-radio__content"><span class="t-radio__title" style="display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:3;color:inherit">单选</span></div><div class="t-radio__border t-radio__border--left"></div></div><div class="t-radio t-radio--left t-radio--block"><input type="radio" readonly="" value="idx2" class="t-radio__original"/><div class="t-radio__icon t-radio__icon--left"><div class="t-radio__icon-circle"></div></div><div class="t-radio__content"><span class="t-radio__title" style="display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:3;color:inherit">单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选</span></div><div class="t-radio__border t-radio__border--left"></div></div><div class="t-radio t-radio--left t-radio--block"><input type="radio" readonly="" value="idx3" class="t-radio__original"/><div class="t-radio__icon t-radio__icon--left"><div class="t-radio__icon-circle"></div></div><div class="t-radio__content"><span class="t-radio__title" style="display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:3;color:inherit">单选</span><div class="t-radio__description undefined" style="display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:5">描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息</div></div><div class="t-radio__border t-radio__border--left"></div></div></div></div></div></div><div class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"><div class="tdesign-mobile-demo-block__header"><p class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle">横向单选框</p></div><div class="tdesign-mobile-demo-block__slot"><div class="radio-demo"><div class="t-radio-group box"><div class="t-radio t-radio--left"><input type="radio" readonly="" value="idx0" class="t-radio__original" checked=""/><div class="t-radio__icon t-radio__icon--left t-radio__icon--checked"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-check-circle-filled t-radio__icon-wrap"><path fill="currentColor" d="M12 23a11 11 0 100-22 11 11 0 000 22zM7.5 10.59l3 3 6-6L17.91 9l-7.41 7.41L6.09 12l1.41-1.41z"></path></svg></div><div class="t-radio__content"><span class="t-radio__title" style="display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:3;color:inherit">单选标题</span></div></div><div class="t-radio t-radio--left"><input type="radio" readonly="" value="idx1" class="t-radio__original"/><div class="t-radio__icon t-radio__icon--left"><div class="t-radio__icon-circle"></div></div><div class="t-radio__content"><span class="t-radio__title" style="display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:3;color:inherit">单选标题</span></div></div><div class="t-radio t-radio--left"><input type="radio" readonly="" value="idx2" class="t-radio__original"/><div class="t-radio__icon t-radio__icon--left"><div class="t-radio__icon-circle"></div></div><div class="t-radio__content"><span class="t-radio__title" style="display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:3;color:inherit">单选标题</span></div></div></div></div></div></div><div class="tdesign-mobile-demo-block"><div class="tdesign-mobile-demo-block__header"><h2 class="tdesign-mobile-demo-block__title">02 组件状态</h2><p class="tdesign-mobile-demo-block__summary">单选框禁用状态</p></div><div class="tdesign-mobile-demo-block__slot"><div class="radio-demo"><div class="t-radio-group "><div class="t-radio t-radio--left t-radio--block"><input type="radio" readonly="" value="1" disabled="" class="t-radio__original" checked=""/><div class="t-radio__icon t-radio__icon--left t-radio__icon--checked t-radio__icon--disabled"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-check-circle-filled t-radio__icon-wrap"><path fill="currentColor" d="M12 23a11 11 0 100-22 11 11 0 000 22zM7.5 10.59l3 3 6-6L17.91 9l-7.41 7.41L6.09 12l1.41-1.41z"></path></svg></div><div class="t-radio__content"><span class="t-radio__title t-radio__title--disabled" style="display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:3;color:#dcdcdc">选项禁用-已选</span></div><div class="t-radio__border t-radio__border--left"></div></div><div class="t-radio t-radio--left t-radio--block"><input type="radio" readonly="" value="2" disabled="" class="t-radio__original"/><div class="t-radio__icon t-radio__icon--left t-radio__icon--disabled"><div class="t-radio__icon-circle t-radio__icon-circle--disabled"></div></div><div class="t-radio__content"><span class="t-radio__title t-radio__title--disabled" style="display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:3;color:#dcdcdc">选项禁用-默认</span></div><div class="t-radio__border t-radio__border--left"></div></div></div></div></div></div><div class="tdesign-mobile-demo-block"><div class="tdesign-mobile-demo-block__header"><h2 class="tdesign-mobile-demo-block__title">03 组件样式</h2><p class="tdesign-mobile-demo-block__summary">勾选样式</p></div><div class="tdesign-mobile-demo-block__slot"><div class="radio-demo"><div class="t-radio t-radio--left t-radio--block"><input type="radio" readonly="" class="t-radio__original" checked=""/><div class="t-radio__icon t-radio__icon--left t-radio__icon--checked"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-check t-radio__icon-wrap"><path fill="currentColor" d="M20.99 7.38l-10.61 10.6L4 11.63l1.42-1.41 4.95 4.95 9.2-9.2 1.4 1.42z"></path></svg></div><div class="t-radio__content"><span class="t-radio__title" style="display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:3;color:inherit">单选</span></div><div class="t-radio__border t-radio__border--left"></div></div><div class="t-radio t-radio--left t-radio--block"><input type="radio" readonly="" class="t-radio__original" checked=""/><div class="t-radio__icon t-radio__icon--left t-radio__icon--checked"><div class="t-radio__icon-dot"></div></div><div class="t-radio__content"><span class="t-radio__title" style="display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:3;color:inherit">单选</span></div><div class="t-radio__border t-radio__border--left"></div></div></div></div></div><div class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"><div class="tdesign-mobile-demo-block__header"><p class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle">勾选显示位置</p></div><div class="tdesign-mobile-demo-block__slot"><div class="radio-demo"><div class="t-radio t-radio--left t-radio--block"><input type="radio" readonly="" class="t-radio__original" checked=""/><div class="t-radio__icon t-radio__icon--left t-radio__icon--checked"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-check-circle-filled t-radio__icon-wrap"><path fill="currentColor" d="M12 23a11 11 0 100-22 11 11 0 000 22zM7.5 10.59l3 3 6-6L17.91 9l-7.41 7.41L6.09 12l1.41-1.41z"></path></svg></div><div class="t-radio__content"><span class="t-radio__title" style="display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:3;color:inherit">单选</span></div><div class="t-radio__border t-radio__border--left"></div></div><div class="t-radio t-radio--right t-radio--block"><input type="radio" readonly="" class="t-radio__original" checked=""/><div class="t-radio__icon t-radio__icon--right t-radio__icon--checked"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-check-circle-filled t-radio__icon-wrap"><path fill="currentColor" d="M12 23a11 11 0 100-22 11 11 0 000 22zM7.5 10.59l3 3 6-6L17.91 9l-7.41 7.41L6.09 12l1.41-1.41z"></path></svg></div><div class="t-radio__content"><span class="t-radio__title" style="display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:3;color:inherit">单选</span></div><div class="t-radio__border t-radio__border--right"></div></div></div></div></div><div class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"><div class="tdesign-mobile-demo-block__header"><p class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle">非通栏单选样式</p></div><div class="tdesign-mobile-demo-block__slot"><div class="radio-demo"><div class="t-radio-group theme-card"><div class="t-radio t-radio--left t-radio--block"><input type="radio" readonly="" value="1" class="t-radio__original" checked=""/><div class="t-radio__icon t-radio__icon--left t-radio__icon--checked"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-check-circle-filled t-radio__icon-wrap"><path fill="currentColor" d="M12 23a11 11 0 100-22 11 11 0 000 22zM7.5 10.59l3 3 6-6L17.91 9l-7.41 7.41L6.09 12l1.41-1.41z"></path></svg></div><div class="t-radio__content"><span class="t-radio__title" style="display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:3;color:inherit">单选</span></div><div class="t-radio__border t-radio__border--left"></div></div><div class="t-radio t-radio--left t-radio--block"><input type="radio" readonly="" value="2" class="t-radio__original"/><div class="t-radio__icon t-radio__icon--left"><div class="t-radio__icon-circle"></div></div><div class="t-radio__content"><span class="t-radio__title" style="display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:3;color:inherit">单选</span></div><div class="t-radio__border t-radio__border--left"></div></div><div class="t-radio t-radio--left t-radio--block"><input type="radio" readonly="" value="3" class="t-radio__original"/><div class="t-radio__icon t-radio__icon--left"><div class="t-radio__icon-circle"></div></div><div class="t-radio__content"><span class="t-radio__title" style="display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:3;color:inherit">单选标题多行单选标题多行单选标题多行单选标题多行单选标题多行</span></div><div class="t-radio__border t-radio__border--left"></div></div></div></div></div></div><div class="tdesign-mobile-demo-block"><div class="tdesign-mobile-demo-block__header"><h2 class="tdesign-mobile-demo-block__title">04 特殊样式</h2></div><div class="tdesign-mobile-demo-block__slot"><div class="radio-demo"><div class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"><div class="tdesign-mobile-demo-block__header"><p class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle">单选框尺寸规格</p></div><div class="tdesign-mobile-demo-block__slot"><div class="t-radio-group "><div class="card card--active"><svg class="t-icon t-icon-check card__icon" color="#fff"><use xlink:href="#t-icon-check"></use></svg><div class="t-radio t-radio--left t-radio--block"><input type="radio" readonly="" value="0" class="t-radio__original" checked=""/><div class="t-radio__icon t-radio__icon--left t-radio__icon--checked"></div><div class="t-radio__content"><span class="t-radio__title" style="display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:3;color:inherit">单选</span><div class="t-radio__description undefined" style="display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:5">描述信息描述信息描述信息描述信息描述信息</div></div></div></div><div class="card "><div class="t-radio t-radio--left t-radio--block"><input type="radio" readonly="" value="1" class="t-radio__original"/><div class="t-radio__icon t-radio__icon--left"></div><div class="t-radio__content"><span class="t-radio__title" style="display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:3;color:inherit">单选</span><div class="t-radio__description undefined" style="display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:5">描述信息描述信息描述信息描述信息描述信息</div></div></div></div><div class="card "><div class="t-radio t-radio--left t-radio--block"><input type="radio" readonly="" value="2" class="t-radio__original"/><div class="t-radio__icon t-radio__icon--left"></div><div class="t-radio__content"><span class="t-radio__title" style="display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:3;color:inherit">单选</span><div class="t-radio__description undefined" style="display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:5">描述信息描述信息描述信息描述信息描述信息</div></div></div></div></div></div></div><div class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"><div class="tdesign-mobile-demo-block__header"><p class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle">横向卡片单选框</p></div><div class="tdesign-mobile-demo-block__slot"><div class="t-radio-group horizontal-box"><div class="card card--active"><svg class="t-icon t-icon-check card__icon" color="#fff"><use xlink:href="#t-icon-check"></use></svg><div class="t-radio t-radio--left t-radio--block"><input type="radio" readonly="" value="0" class="t-radio__original" checked=""/><div class="t-radio__icon t-radio__icon--left t-radio__icon--checked"></div><div class="t-radio__content"><span class="t-radio__title" style="display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:3;color:inherit">单选</span></div></div></div><div class="card "><div class="t-radio t-radio--left t-radio--block"><input type="radio" readonly="" value="1" class="t-radio__original"/><div class="t-radio__icon t-radio__icon--left"></div><div class="t-radio__content"><span class="t-radio__title" style="display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:3;color:inherit">单选</span></div></div></div><div class="card "><div class="t-radio t-radio--left t-radio--block"><input type="radio" readonly="" value="2" class="t-radio__original"/><div class="t-radio__icon t-radio__icon--left"></div><div class="t-radio__content"><span class="t-radio__title" style="display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:3;color:inherit">单选</span></div></div></div></div></div></div></div></div></div></div>"`;
+
+exports[`ssr snapshot test > ssr test src/radio/_example/placement.tsx 1`] = `"<div class="t-radio t-radio--left t-radio--block"><input type="radio" readonly="" class="t-radio__original" checked=""/><div class="t-radio__icon t-radio__icon--left t-radio__icon--checked"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-check-circle-filled t-radio__icon-wrap"><path fill="currentColor" d="M12 23a11 11 0 100-22 11 11 0 000 22zM7.5 10.59l3 3 6-6L17.91 9l-7.41 7.41L6.09 12l1.41-1.41z"></path></svg></div><div class="t-radio__content"><span class="t-radio__title" style="display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:3;color:inherit">单选</span></div><div class="t-radio__border t-radio__border--left"></div></div><div class="t-radio t-radio--right t-radio--block"><input type="radio" readonly="" class="t-radio__original" checked=""/><div class="t-radio__icon t-radio__icon--right t-radio__icon--checked"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-check-circle-filled t-radio__icon-wrap"><path fill="currentColor" d="M12 23a11 11 0 100-22 11 11 0 000 22zM7.5 10.59l3 3 6-6L17.91 9l-7.41 7.41L6.09 12l1.41-1.41z"></path></svg></div><div class="t-radio__content"><span class="t-radio__title" style="display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:3;color:inherit">单选</span></div><div class="t-radio__border t-radio__border--right"></div></div>"`;
+
+exports[`ssr snapshot test > ssr test src/radio/_example/status.tsx 1`] = `"<div class="t-radio-group " data-reactroot=""><div class="t-radio t-radio--left t-radio--block"><input type="radio" readonly="" value="1" disabled="" class="t-radio__original" checked=""/><div class="t-radio__icon t-radio__icon--left t-radio__icon--checked t-radio__icon--disabled"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-check-circle-filled t-radio__icon-wrap"><path fill="currentColor" d="M12 23a11 11 0 100-22 11 11 0 000 22zM7.5 10.59l3 3 6-6L17.91 9l-7.41 7.41L6.09 12l1.41-1.41z"></path></svg></div><div class="t-radio__content"><span class="t-radio__title t-radio__title--disabled" style="display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:3;color:#dcdcdc">选项禁用-已选</span></div><div class="t-radio__border t-radio__border--left"></div></div><div class="t-radio t-radio--left t-radio--block"><input type="radio" readonly="" value="2" disabled="" class="t-radio__original"/><div class="t-radio__icon t-radio__icon--left t-radio__icon--disabled"><div class="t-radio__icon-circle t-radio__icon-circle--disabled"></div></div><div class="t-radio__content"><span class="t-radio__title t-radio__title--disabled" style="display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:3;color:#dcdcdc">选项禁用-默认</span></div><div class="t-radio__border t-radio__border--left"></div></div></div>"`;
+
 exports[`ssr snapshot test > ssr test src/result/_example/custom.tsx 1`] = `"<div class="t-result t-result--theme-default" data-reactroot=""><div class="t-result__thumb"><div class="t-image t-image--round extra-class-image"><div class="t-image__status"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-ellipsis"><path fill="currentColor" d="M3 10.5h3v3H3v-3zm7.5 0h3v3h-3v-3zm7.5 0h3v3h-3v-3z"></path></svg></div><img class="t-image__img" src="https://tdesign.gtimg.com/mobile/demos/result1.png" style="object-fit:fill;width:inherit;height:inherit"/></div></div><div class="t-result__title">自定义结果</div><div class="t-result__description">描述文字</div></div>"`;
 
 exports[`ssr snapshot test > ssr test src/result/_example/index.tsx 1`] = `"<div class="tdesign-mobile-demo"><div class="tdesign-mobile-demo-header"><h1 class="tdesign-mobile-demo-header__title">Result 结果</h1><p class="tdesign-mobile-demo-header__summary">结果反馈</p></div><div class="tdesign-mobile-demo-block"><div class="tdesign-mobile-demo-block__header"><h2 class="tdesign-mobile-demo-block__title">01类型</h2><p class="tdesign-mobile-demo-block__summary">不同结果反馈</p></div><div class="tdesign-mobile-demo-block__slot"><div><div class="t-result t-result--theme-success space"><div class="t-result__thumb"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-check-circle t-result__icon"><path fill="currentColor" d="M12 21a9 9 0 100-18 9 9 0 000 18zm11-9a11 11 0 11-22 0 11 11 0 0122 0zm-12.5 4.41L6.09 12l1.41-1.41 3 3 6-6L17.91 9l-7.41 7.41z"></path></svg></div><div class="t-result__title">成功状态</div><div class="t-result__description">描述文字</div></div><div class="t-result t-result--theme-error space"><div class="t-result__thumb"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close-circle t-result__icon"><path fill="currentColor" d="M12 21a9 9 0 100-18 9 9 0 000 18zm11-9a11 11 0 11-22 0 11 11 0 0122 0zM7.4 15.18L10.6 12 7.4 8.82 8.82 7.4 12 10.6l3.18-3.19 1.42 1.42L13.4 12l3.19 3.18-1.42 1.42L12 13.4 8.82 16.6 7.4 15.18z"></path></svg></div><div class="t-result__title">失败状态</div><div class="t-result__description">描述文字</div></div><div class="t-result t-result--theme-warning space"><div class="t-result__thumb"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-info-circle t-result__icon"><path fill="currentColor" d="M12 21a9 9 0 100-18 9 9 0 000 18zm11-9a11 11 0 11-22 0 11 11 0 0122 0zm-12 5.5V10h2v7.5h-2zm2-9h-2v-2h2v2z"></path></svg></div><div class="t-result__title">警示状态</div><div class="t-result__description">描述文字</div></div><div class="t-result t-result--theme-default space"><div class="t-result__thumb"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-info-circle t-result__icon"><path fill="currentColor" d="M12 21a9 9 0 100-18 9 9 0 000 18zm11-9a11 11 0 11-22 0 11 11 0 0122 0zm-12 5.5V10h2v7.5h-2zm2-9h-2v-2h2v2z"></path></svg></div><div class="t-result__title">默认状态</div><div class="t-result__description">描述文字</div></div></div></div></div><div class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"><div class="tdesign-mobile-demo-block__header"><p class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle">自定义结果</p></div><div class="tdesign-mobile-demo-block__slot"><div class="t-result t-result--theme-default"><div class="t-result__thumb"><div class="t-image t-image--round extra-class-image"><div class="t-image__status"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-ellipsis"><path fill="currentColor" d="M3 10.5h3v3H3v-3zm7.5 0h3v3h-3v-3zm7.5 0h3v3h-3v-3z"></path></svg></div><img class="t-image__img" src="https://tdesign.gtimg.com/mobile/demos/result1.png" style="object-fit:fill;width:inherit;height:inherit"/></div></div><div class="t-result__title">自定义结果</div><div class="t-result__description">描述文字</div></div></div></div><div class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"><div class="tdesign-mobile-demo-block__header"><p class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle">页面位置展示</p></div><div class="tdesign-mobile-demo-block__slot"><div class="padding"><button type="button" class="t-button t-button--outline t-button--primary t-size-l t-is-block t-button--shape-rectangle"><span class="t-button__text"> <!-- -->页面位置展示</span></button></div></div></div></div>"`;