+ Radio 1
+ Radio 2
+
+```
+
### Disable Label Click
```html
diff --git a/packages/vant/src/radio/README.zh-CN.md b/packages/vant/src/radio/README.zh-CN.md
index 1116c7de2..6098d97cb 100644
--- a/packages/vant/src/radio/README.zh-CN.md
+++ b/packages/vant/src/radio/README.zh-CN.md
@@ -140,6 +140,17 @@ export default {
};
```
+### 左侧文本
+
+将 `label-position` 属性设置为 `'left'`,可以将文本位置调整到单选框左侧。
+
+```html
+
+ 单选框 1
+ 单选框 2
+
+```
+
### 禁用文本点击
设置 `label-disabled` 属性后,点击图标以外的内容不会触发单选框切换。
diff --git a/packages/vant/src/radio/demo/index.vue b/packages/vant/src/radio/demo/index.vue
index b6474865d..ea031a375 100644
--- a/packages/vant/src/radio/demo/index.vue
+++ b/packages/vant/src/radio/demo/index.vue
@@ -13,6 +13,7 @@ const t = useTranslate({
text2: '选中且禁用',
withCell: '搭配单元格组件使用',
horizontal: '水平排列',
+ leftLabel: '左侧文本',
customIcon: '自定义图标',
customColor: '自定义颜色',
customShape: '自定义形状',
@@ -24,7 +25,8 @@ const t = useTranslate({
text1: 'Disabled',
text2: 'Disabled and checked',
withCell: 'Inside a Cell',
- horizontal: 'Hrizontal',
+ horizontal: 'Horizontal',
+ leftLabel: 'Left Label',
customIcon: 'Custom Icon',
customColor: 'Custom Color',
customShape: 'Custom Shape',
@@ -42,6 +44,7 @@ const radioLabel = ref('1');
const radioShape = ref('1');
const radioIconSize = ref('1');
const radioHorizontal = ref('1');
+const radioLeftLabel = ref('1');
const activeIcon = cdnURL('user-active.png');
const inactiveIcon = cdnURL('user-inactive.png');
@@ -114,6 +117,13 @@ const inactiveIcon = cdnURL('user-inactive.png');
+
+
+ {{ t('radio') }} 1
+ {{ t('radio') }} 2
+
+
+
{{ t('radio') }} 1
diff --git a/packages/vant/src/radio/test/__snapshots__/demo.spec.ts.snap b/packages/vant/src/radio/test/__snapshots__/demo.spec.ts.snap
index 364eda161..235631b50 100644
--- a/packages/vant/src/radio/test/__snapshots__/demo.spec.ts.snap
+++ b/packages/vant/src/radio/test/__snapshots__/demo.spec.ts.snap
@@ -227,6 +227,38 @@ exports[`should render demo and match snapshot 1`] = `
+