feat(comp:checkbox,comp:radio): add group vertical props

IDuxFE · Jun 23, 2022 · 71af197 · 71af197
1 parent d81b99f
commit 71af197
Show file tree

Hide file tree

Showing 9 changed files with 155 additions and 137 deletions.
diff --git a/packages/components/checkbox/__tests__/__snapshots__/checkboxGroup.spec.ts.snap b/packages/components/checkbox/__tests__/__snapshots__/checkboxGroup.spec.ts.snap
@@ -1,11 +1,17 @@
 // Vitest Snapshot v1
 
 exports[`CheckboxGroup > render work 1`] = `
-"<div class=\\"ix-checkbox-group\\"><label class=\\"ix-checkbox\\" role=\\"checkbox\\" aria-checked=\\"false\\" aria-disabled=\\"false\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\" value=\\"option1\\"><span class=\\"ix-checkbox-input-box\\"></span></span><span class=\\"ix-checkbox-label\\">option1</span>
-    <!---->
-  </label><label class=\\"ix-checkbox\\" role=\\"checkbox\\" aria-checked=\\"false\\" aria-disabled=\\"false\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\" value=\\"option2\\"><span class=\\"ix-checkbox-input-box\\"></span></span><span class=\\"ix-checkbox-label\\">option2</span>
-    <!---->
-  </label><label class=\\"ix-checkbox\\" role=\\"checkbox\\" aria-checked=\\"false\\" aria-disabled=\\"false\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\" value=\\"option3\\"><span class=\\"ix-checkbox-input-box\\"></span></span><span class=\\"ix-checkbox-label\\">option3</span>
-    <!---->
-  </label></div>"
+"<div class=\\"ix-checkbox-group\\">
+  <div class=\\"ix-space\\" style=\\"margin-bottom: -16px;\\">
+    <div class=\\"ix-space-item\\" style=\\"margin-right: 16px; padding-bottom: 16px;\\"><label class=\\"ix-checkbox\\" role=\\"checkbox\\" aria-checked=\\"false\\" aria-disabled=\\"false\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\" value=\\"option1\\"><span class=\\"ix-checkbox-input-box\\"></span></span><span class=\\"ix-checkbox-label\\">option1</span>
+        <!---->
+      </label></div>
+    <div class=\\"ix-space-item\\" style=\\"margin-right: 16px; padding-bottom: 16px;\\"><label class=\\"ix-checkbox\\" role=\\"checkbox\\" aria-checked=\\"false\\" aria-disabled=\\"false\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\" value=\\"option2\\"><span class=\\"ix-checkbox-input-box\\"></span></span><span class=\\"ix-checkbox-label\\">option2</span>
+        <!---->
+      </label></div>
+    <div class=\\"ix-space-item\\" style=\\"padding-bottom: 16px;\\"><label class=\\"ix-checkbox\\" role=\\"checkbox\\" aria-checked=\\"false\\" aria-disabled=\\"false\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\" value=\\"option3\\"><span class=\\"ix-checkbox-input-box\\"></span></span><span class=\\"ix-checkbox-label\\">option3</span>
+        <!---->
+      </label></div>
+  </div>
+</div>"
 `;
diff --git a/packages/components/checkbox/docs/Index.zh.md b/packages/components/checkbox/docs/Index.zh.md
@@ -1,65 +1,66 @@
----
-category: components
-type: 数据录入
-title: Checkbox
-subtitle: 复选框
-cover:
----
-
-## API
-
-### IxCheckbox
-
-#### CheckboxProps
-
-除以下表格之外还支持原生 `<input type="checkbox" />` 元素的所有属性。
-
-| 名称 | 说明 |  类型  | 默认值 | 全局配置 | 备注 |
-| --- | --- | --- | --- | --- | --- |
-| `control` | 控件控制器 | `string \| number \| AbstractControl` | - | - | 配合 `@idux/cdk/forms` 使用, 参考 [Form](/components/form/zh) |
-| `v-model:checked` | 指定当前勾选框是否选中 |  `boolean \| string \| number`  | - | - | 使用 `control` 时，此配置无效 |
-| `autofocus` | 是否以自动聚焦 | `boolean` | `false` | - | - |.
-| `buttoned` | 是否以按钮显示 | `boolean` | - | - | - |
-| `disabled` | 禁用状态 |`boolean`| - | - | 使用 `control` 时，此配置无效 |
-| `indeterminate` | 是否处于不确定状态 | `boolean` | `false`| - | 当值为`true`时，按钮样式处于半选状态，且不受`checked`影响 |
-| `label` | 勾选框的文本 | `string \| #default` | - | - | - |
-| `trueValue` | 选中时返回的值 |  `boolean \| string \| number`  | `true`| - | - |
-| `falseValue` | 不选中时返回的值 | `boolean \| string \| number` | `false`| - | - |
-| `value` | 设置勾选框的值，与 `IxCheckboxGroup` 配合使用 | `any`| - | - | 不传时使用 `key` 作为 `value` |
-| `size` | 按钮大小 | `'sm' \| 'md' \| 'lg'` | - | `'md'` | 仅`buttoned`为`true`时生效 |
-| `onChange` | 选中状态发生变化后的回调 | `(newChecked: boolean \| string \| number, oldChecked: boolean \| string \| number) => void`| - | - | - |
-
-#### CheckboxMethods
-
-| 名称 | 说明 | 参数类型 | 备注 |
-| --- | --- | --- | --- |
-| `focus` | 获取焦点 | - | - |
-| `blur` | 移除焦点 | - | - |
-
-### IxCheckboxGroup
-
-#### GroupProps
-
-| 名称 | 说明 | 类型  | 默认值 | 全局配置 | 备注 |
-| --- | --- | --- | --- | --- | --- |
-| `control` | 控件控制器 | `string \| number \| AbstractControl` | - | - | 配合 `@idux/cdk/forms` 使用, 参考 [Form](/components/form/zh) |
-| `v-model:value` | 指定当前勾选框是否选中 |  `any[]`  | - | - | 使用 `control` 时，此配置无效 |
-| `buttoned` | 设置组内 `IxCheckbox` 的 `buttoned` 属性 | `boolean` | `false` | - | - |
-| `dataSource` | 勾选框组数据源 | `CheckboxData[]` | - | - | 优先级高于 `default` 插槽 |
-| `disabled` | 设置组内 `IxCheckbox` 的 `disabled` 属性 | `boolean` | `false` | - | 使用 `control` 时，此配置无效 |
-| `gap` | 设置组内 `IxCheckbox` 的间隔 | `number \| string` | - | - | - |
-| `name` | 设置组内 `IxCheckbox` 的 `name` 属性 | `string` | - | - |- |
-| `size` | 设置组内 `IxCheckbox` 的 `size` 属性 | `'sm' \| 'md' \| 'lg'`| `'md'` | - | - |
-| `onChange` | 选中值发生变化后的回调 | `(newValue: any[], oldValue: any[]) => void`| - | - | - |
-
-```ts
-// key 与 value 二者必传其一。
-export interface CheckboxData extends CheckboxProps {
-  // 不传时使用 value 作为 key
-  key?: VKey
-}
-```
-
+---
+category: components
+type: 数据录入
+title: Checkbox
+subtitle: 复选框
+cover:
+---
+
+## API
+
+### IxCheckbox
+
+#### CheckboxProps
+
+除以下表格之外还支持原生 `<input type="checkbox" />` 元素的所有属性。
+
+| 名称 | 说明 |  类型  | 默认值 | 全局配置 | 备注 |
+| --- | --- | --- | --- | --- | --- |
+| `control` | 控件控制器 | `string \| number \| AbstractControl` | - | - | 配合 `@idux/cdk/forms` 使用, 参考 [Form](/components/form/zh) |
+| `v-model:checked` | 指定当前勾选框是否选中 |  `boolean \| string \| number`  | - | - | 使用 `control` 时，此配置无效 |
+| `autofocus` | 是否以自动聚焦 | `boolean` | `false` | - | - |.
+| `buttoned` | 是否以按钮显示 | `boolean` | - | - | - |
+| `disabled` | 禁用状态 |`boolean`| - | - | 使用 `control` 时，此配置无效 |
+| `indeterminate` | 是否处于不确定状态 | `boolean` | `false`| - | 当值为`true`时，按钮样式处于半选状态，且不受`checked`影响 |
+| `label` | 勾选框的文本 | `string \| #default` | - | - | - |
+| `trueValue` | 选中时返回的值 |  `boolean \| string \| number`  | `true`| - | - |
+| `falseValue` | 不选中时返回的值 | `boolean \| string \| number` | `false`| - | - |
+| `value` | 设置勾选框的值，与 `IxCheckboxGroup` 配合使用 | `any`| - | - | 不传时使用 `key` 作为 `value` |
+| `size` | 按钮大小 | `'sm' \| 'md' \| 'lg'` | - | `'md'` | 仅`buttoned`为`true`时生效 |
+| `onChange` | 选中状态发生变化后的回调 | `(newChecked: boolean \| string \| number, oldChecked: boolean \| string \| number) => void`| - | - | - |
+
+#### CheckboxMethods
+
+| 名称 | 说明 | 参数类型 | 备注 |
+| --- | --- | --- | --- |
+| `focus` | 获取焦点 | - | - |
+| `blur` | 移除焦点 | - | - |
+
+### IxCheckboxGroup
+
+#### GroupProps
+
+| 名称 | 说明 | 类型  | 默认值 | 全局配置 | 备注 |
+| --- | --- | --- | --- | --- | --- |
+| `control` | 控件控制器 | `string \| number \| AbstractControl` | - | - | 配合 `@idux/cdk/forms` 使用, 参考 [Form](/components/form/zh) |
+| `v-model:value` | 指定当前勾选框是否选中 |  `any[]`  | - | - | 使用 `control` 时，此配置无效 |
+| `buttoned` | 设置组内 `IxCheckbox` 的 `buttoned` 属性 | `boolean` | `false` | - | - |
+| `dataSource` | 勾选框组数据源 | `CheckboxData[]` | - | - | 优先级高于 `default` 插槽 |
+| `disabled` | 设置组内 `IxCheckbox` 的 `disabled` 属性 | `boolean` | `false` | - | 使用 `control` 时，此配置无效 |
+| `gap` | 设置组内 `IxCheckbox` 的间隔 | `number \| string` | - | - | - |
+| `name` | 设置组内 `IxCheckbox` 的 `name` 属性 | `string` | - | - |- |
+| `size` | 设置组内 `IxCheckbox` 的 `size` 属性 | `'sm' \| 'md' \| 'lg'`| `'md'` | - | - |
+| `vertical` | 设置组内排列方向 | `boolean` | - | - | 默认为水平排列方向，可设`true`为垂直排列 |
+| `onChange` | 选中值发生变化后的回调 | `(newValue: any[], oldValue: any[]) => void`| - | - | - |
+
+```ts
+// key 与 value 二者必传其一。
+export interface CheckboxData extends CheckboxProps {
+  // 不传时使用 value 作为 key
+  key?: VKey
+}
+```
+
 <!--- insert less variable begin  --->
 ## 主题变量
 
@@ -101,4 +102,4 @@ export interface CheckboxData extends CheckboxProps {
 | `@checkbox-tick-border-width` | `@border-width-md` | - | - |
 | `@checkbox-label-padding` | `0 @spacing-sm` | `0 @spacing-xs` | - |
 | `@checkbox-group-item-margin-right` | `@spacing-sm` | - | - |
-<!--- insert less variable end  --->
+<!--- insert less variable end  --->
diff --git a/packages/components/checkbox/src/CheckboxGroup.tsx b/packages/components/checkbox/src/CheckboxGroup.tsx
@@ -12,6 +12,7 @@ import { isNil } from 'lodash-es'
 import { Logger, convertCssPixel } from '@idux/cdk/utils'
 import { useGlobalConfig } from '@idux/components/config'
 import { useFormAccessor } from '@idux/components/form'
+import { IxSpace } from '@idux/components/space'
 
 import Checkbox from './Checkbox'
 import { checkboxGroupToken } from './token'
@@ -41,7 +42,7 @@ export default defineComponent({
     })
 
     return () => {
-      const { options, dataSource } = props
+      const { options, dataSource, vertical } = props
       if (options) {
         Logger.warn('components/checkbox', '`options` was deprecated, please use `dataSource` instead')
       }
@@ -58,7 +59,7 @@ export default defineComponent({
       }
       return (
         <div class={classes.value} style={style.value}>
-          {children}
+          <IxSpace vertical={vertical}>{children}</IxSpace>
         </div>
       )
     }

diff --git a/packages/components/checkbox/src/types.ts b/packages/components/checkbox/src/types.ts
@@ -8,31 +8,30 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
 import type { ExtractInnerPropTypes, ExtractPublicPropTypes, VKey } from '@idux/cdk/utils'
-import type { DefineComponent, HTMLAttributes, LabelHTMLAttributes } from 'vue'
+import type { DefineComponent, HTMLAttributes, LabelHTMLAttributes, PropType } from 'vue'
 
 import { controlPropDef } from '@idux/cdk/forms'
-import { IxPropTypes } from '@idux/cdk/utils'
 import { FormSize } from '@idux/components/form'
 
 export const checkboxProps = {
   control: controlPropDef,
-  checked: IxPropTypes.oneOfType([String, Number, Boolean]),
+  checked: { type: [String, Number, Boolean], default: undefined },
 
-  autofocus: IxPropTypes.bool.def(false),
-  buttoned: IxPropTypes.bool,
-  disabled: IxPropTypes.bool,
-  indeterminate: IxPropTypes.bool.def(false),
-  label: IxPropTypes.string,
-  trueValue: IxPropTypes.oneOfType([String, Number, Boolean]).def(true),
-  falseValue: IxPropTypes.oneOfType([String, Number, Boolean]).def(false),
-  value: IxPropTypes.any,
-  size: IxPropTypes.oneOf<FormSize>(['sm', 'md', 'lg']),
+  autofocus: { type: Boolean, default: false },
+  buttoned: { type: Boolean, default: undefined },
+  disabled: { type: Boolean, default: undefined },
+  indeterminate: { type: Boolean, default: false },
+  label: { type: String, default: undefined },
+  trueValue: { type: [String, Number, Boolean], default: true },
+  falseValue: { type: [String, Number, Boolean], default: false },
+  value: { type: null, default: undefined },
+  size: { type: String as PropType<FormSize>, default: undefined },
 
   // events
-  'onUpdate:checked': IxPropTypes.emit<(checked: CheckValue) => void>(),
-  onChange: IxPropTypes.emit<(newChecked: CheckValue, oldChecked: CheckValue) => void>(),
-  onBlur: IxPropTypes.emit<(evt: FocusEvent) => void>(),
-  onFocus: IxPropTypes.emit<(evt: FocusEvent) => void>(),
+  'onUpdate:checked': { type: Function as PropType<(checked: CheckValue) => void> },
+  onChange: { type: Function as PropType<(newChecked: CheckValue, oldChecked: CheckValue) => void> },
+  onBlur: { type: Function as PropType<(evt: FocusEvent) => void> },
+  onFocus: { type: Function as PropType<(evt: FocusEvent) => void> },
 }
 
 export type CheckboxProps = ExtractInnerPropTypes<typeof checkboxProps>
@@ -49,22 +48,23 @@ export type CheckboxInstance = InstanceType<DefineComponent<CheckboxProps, Check
 
 export const checkboxGroupProps = {
   control: controlPropDef,
-  value: IxPropTypes.array(),
+  value: { type: Array, default: undefined },
 
-  buttoned: IxPropTypes.bool.def(false),
-  dataSource: IxPropTypes.array<CheckboxData>(),
-  disabled: IxPropTypes.bool.def(false),
-  gap: IxPropTypes.oneOfType([Number, String]),
-  name: IxPropTypes.string,
+  buttoned: { type: Boolean, default: false },
+  dataSource: { type: Array as PropType<CheckboxData>, default: undefined },
+  disabled: { type: Boolean, default: false },
+  gap: { type: [Number, String], default: undefined },
+  name: { type: String, default: undefined },
   /**
    * @deprecated please use `dataSource` instead'
    */
-  options: IxPropTypes.array<CheckboxData>(),
-  size: IxPropTypes.oneOf(['sm', 'md', 'lg']).def('md'),
+  options: { type: Array as PropType<CheckboxData>, default: undefined },
+  size: { type: String as PropType<FormSize>, default: 'md' },
+  vertical: { type: Boolean, default: false },
 
   // events
-  'onUpdate:value': IxPropTypes.emit<(value: any[]) => void>(),
-  onChange: IxPropTypes.emit<(newValue: any[], oldValue: any[]) => void>(),
+  'onUpdate:value': { type: Function as PropType<(value: any) => void> },
+  onChange: { type: Function as PropType<(value: any, oldValue: any) => void> },
 }
 
 export type CheckboxGroupProps = ExtractInnerPropTypes<typeof checkboxGroupProps>

diff --git a/packages/components/radio/__tests__/__snapshots__/radioGroup.spec.ts.snap b/packages/components/radio/__tests__/__snapshots__/radioGroup.spec.ts.snap
@@ -1,3 +1,12 @@
 // Vitest Snapshot v1
 
-exports[`RadioGroup > render work 1`] = `"<div class=\\"ix-radio-group\\"><label class=\\"ix-radio\\" role=\\"radio\\" aria-checked=\\"false\\" aria-disabled=\\"false\\"><span class=\\"ix-radio-input\\"><input type=\\"radio\\" class=\\"ix-radio-input-inner\\" aria-hidden=\\"true\\" value=\\"a\\"><span class=\\"ix-radio-input-box\\"></span></span><span class=\\"ix-radio-label\\">Beijing</span></label><label class=\\"ix-radio\\" role=\\"radio\\" aria-checked=\\"false\\" aria-disabled=\\"false\\"><span class=\\"ix-radio-input\\"><input type=\\"radio\\" class=\\"ix-radio-input-inner\\" aria-hidden=\\"true\\" value=\\"b\\"><span class=\\"ix-radio-input-box\\"></span></span><span class=\\"ix-radio-label\\">Shanghai</span></label><label class=\\"ix-radio\\" role=\\"radio\\" aria-checked=\\"false\\" aria-disabled=\\"false\\"><span class=\\"ix-radio-input\\"><input type=\\"radio\\" class=\\"ix-radio-input-inner\\" aria-hidden=\\"true\\" value=\\"c\\"><span class=\\"ix-radio-input-box\\"></span></span><span class=\\"ix-radio-label\\">Guangzhou</span></label><label class=\\"ix-radio\\" role=\\"radio\\" aria-checked=\\"false\\" aria-disabled=\\"false\\"><span class=\\"ix-radio-input\\"><input type=\\"radio\\" class=\\"ix-radio-input-inner\\" aria-hidden=\\"true\\" value=\\"d\\"><span class=\\"ix-radio-input-box\\"></span></span><span class=\\"ix-radio-label\\">Shenzhen</span></label></div>"`;
+exports[`RadioGroup > render work 1`] = `
+"<div class=\\"ix-radio-group\\">
+  <div class=\\"ix-space\\" style=\\"margin-bottom: -16px;\\">
+    <div class=\\"ix-space-item\\" style=\\"margin-right: 16px; padding-bottom: 16px;\\"><label class=\\"ix-radio\\" role=\\"radio\\" aria-checked=\\"false\\" aria-disabled=\\"false\\"><span class=\\"ix-radio-input\\"><input type=\\"radio\\" class=\\"ix-radio-input-inner\\" aria-hidden=\\"true\\" value=\\"a\\"><span class=\\"ix-radio-input-box\\"></span></span><span class=\\"ix-radio-label\\">Beijing</span></label></div>
+    <div class=\\"ix-space-item\\" style=\\"margin-right: 16px; padding-bottom: 16px;\\"><label class=\\"ix-radio\\" role=\\"radio\\" aria-checked=\\"false\\" aria-disabled=\\"false\\"><span class=\\"ix-radio-input\\"><input type=\\"radio\\" class=\\"ix-radio-input-inner\\" aria-hidden=\\"true\\" value=\\"b\\"><span class=\\"ix-radio-input-box\\"></span></span><span class=\\"ix-radio-label\\">Shanghai</span></label></div>
+    <div class=\\"ix-space-item\\" style=\\"margin-right: 16px; padding-bottom: 16px;\\"><label class=\\"ix-radio\\" role=\\"radio\\" aria-checked=\\"false\\" aria-disabled=\\"false\\"><span class=\\"ix-radio-input\\"><input type=\\"radio\\" class=\\"ix-radio-input-inner\\" aria-hidden=\\"true\\" value=\\"c\\"><span class=\\"ix-radio-input-box\\"></span></span><span class=\\"ix-radio-label\\">Guangzhou</span></label></div>
+    <div class=\\"ix-space-item\\" style=\\"padding-bottom: 16px;\\"><label class=\\"ix-radio\\" role=\\"radio\\" aria-checked=\\"false\\" aria-disabled=\\"false\\"><span class=\\"ix-radio-input\\"><input type=\\"radio\\" class=\\"ix-radio-input-inner\\" aria-hidden=\\"true\\" value=\\"d\\"><span class=\\"ix-radio-input-box\\"></span></span><span class=\\"ix-radio-label\\">Shenzhen</span></label></div>
+  </div>
+</div>"
+`;
diff --git a/packages/components/radio/demo/VerticalGroup.vue b/packages/components/radio/demo/VerticalGroup.vue
@@ -1,14 +1,12 @@
 <template>
-  <IxRadioGroup v-model:value="value">
-    <IxSpace vertical>
-      <IxRadio value="a">A</IxRadio>
-      <IxRadio value="b">B</IxRadio>
-      <IxRadio value="c">C</IxRadio>
-      <IxRadio value="d">
-        More...
-        <IxInput v-if="value === 'd'" v-model:value="moreValue" style="width: 100px; margin-left: 16px"></IxInput>
-      </IxRadio>
-    </IxSpace>
+  <IxRadioGroup v-model:value="value" vertical>
+    <IxRadio value="a">A</IxRadio>
+    <IxRadio value="b">B</IxRadio>
+    <IxRadio value="c">C</IxRadio>
+    <IxRadio value="d">
+      More...
+      <IxInput v-if="value === 'd'" v-model:value="moreValue" style="width: 100px; margin-left: 16px"></IxInput>
+    </IxRadio>
   </IxRadioGroup>
 </template>
 

diff --git a/packages/components/radio/docs/Index.zh.md b/packages/components/radio/docs/Index.zh.md
@@ -48,6 +48,7 @@ subtitle: 单选框
 | `name` | 设置单选框组内的 `IxRadio` 的原生 `name` 属性 | `string` | - | - | - |
 | `mode` | 设置单选框组内 `IxRadio` 的 `mode` | `'default' \| 'primary'`| - | - | - |
 | `size` | 设置单选框组内 `IxRadio` 的 `size` | `'sm' \| 'md' \| 'lg'`| `'md'` | - | - |
+| `vertical` | 设置组内排列方向 | `boolean` | - | - | 默认为水平排列方向，可设`true`为垂直排列 |
 | `onChange` | 选中值发生变化后的回调 | `(value: any, oldValue: any) => void`| - | - | - |
 
 ```ts
@@ -96,4 +97,4 @@ export interface RadioData extends RadioProps {
 | `@radio-dot-size` | `@radio-box-size - 8px` | - | - |
 | `@radio-label-padding` | `0 @spacing-sm` | - | - |
 | `@radio-group-item-margin-right` | `@spacing-sm` | - | - |
-<!--- insert less variable end  --->
+<!--- insert less variable end  --->
diff --git a/packages/components/radio/src/RadioGroup.tsx b/packages/components/radio/src/RadioGroup.tsx
@@ -12,6 +12,7 @@ import { isNil } from 'lodash-es'
 import { Logger, convertCssPixel } from '@idux/cdk/utils'
 import { useGlobalConfig } from '@idux/components/config'
 import { useFormAccessor } from '@idux/components/form'
+import { IxSpace } from '@idux/components/space'
 
 import Radio from './Radio'
 import { radioGroupToken } from './token'
@@ -43,7 +44,7 @@ export default defineComponent({
     })
 
     return () => {
-      const { options, dataSource } = props
+      const { options, dataSource, vertical } = props
       if (options) {
         Logger.warn('components/radio', '`options` was deprecated, please use `dataSource` instead')
       }
@@ -59,7 +60,7 @@ export default defineComponent({
       }
       return (
         <div class={classes.value} style={style.value}>
-          {children}
+          <IxSpace vertical={vertical}>{children}</IxSpace>
         </div>
       )
     }