Radio 单选框

用于在一组互斥选项中选择一个结果，适合状态切换、筛选条件、配置项选择。

何时使用

• 多个选项互斥，且用户必须或通常只选择一个。
• 选项数量较少，需要直接展示全部选项。
• 需要用按钮样式表达更强的分段控制感。

基础用法

选项 A选项 B当前：a

<template>
  <x-radio-group v-model="value" name="basic-radio">
    <x-radio value="a">选项 A</x-radio>
    <x-radio value="b">选项 B</x-radio>
  </x-radio-group>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const value = ref('a');
</script>

选项配置

今日本周本月

<template>
  <x-radio-group v-model="value" :options="options" name="time-radio" />
</template>

<script setup lang="ts">
import { ref } from 'vue';

const value = ref('day');
const options = [
  { label: '今日', value: 'day' },
  { label: '本周', value: 'week' },
  { label: '本月', value: 'month' },
];
</script>

禁用状态

启用禁用项归档启用禁用项归档

<template>
  <x-radio-group v-model="value" :options="options" />
  <x-radio-group v-model="value" :options="options" disabled />
</template>

<script setup lang="ts">
import { ref } from 'vue';

const value = ref('enabled');
const options = [
  { label: '启用', value: 'enabled' },
  { label: '禁用项', value: 'disabled', disabled: true },
  { label: '归档', value: 'archived' },
];
</script>

按钮样式

今日本周本月

<template>
  <x-radio-group v-model="value" type="button" :options="options" />
</template>

尺寸

今日本周本月今日本周本月今日本周本月今日本周本月

<template>
  <x-radio-group v-model="value" type="button" size="mini" :options="options" />
  <x-radio-group v-model="value" type="button" size="small" :options="options" />
  <x-radio-group v-model="value" type="button" size="medium" :options="options" />
  <x-radio-group v-model="value" type="button" size="large" :options="options" />
</template>

纵向排列

邮件短信站内信

<template>
  <x-radio-group v-model="value" direction="vertical" :options="options" />
</template>

自定义文案

设计角色开发角色测试角色

<template>
  <x-radio-group v-model="value" :options="options">
    <template #label="{ data }">
      <span>{{ data.label }}角色</span>
    </template>
  </x-radio-group>
</template>

自定义单选框图形

<template>
  <x-radio-group v-model="value" :options="options">
    <template #radio="{ checked, disabled }">
      <span :class="{ 'is-checked': checked, 'is-disabled': disabled }" />
    </template>
  </x-radio-group>
</template>

布尔值选项

启用停用

<template>
  <x-radio-group v-model="value" :options="options" />
</template>

<script setup lang="ts">
import { ref } from 'vue';

const value = ref(true);
const options = [
  { label: '启用', value: true },
  { label: '停用', value: false },
];
</script>

事件

读取写入发布

<template>
  <x-radio-group v-model="value" :options="options" @change="handleChange" />
</template>

<script setup lang="ts">
import { ref } from 'vue';

const value = ref('read');
const handleChange = (value: string | number | boolean) => {
  console.log(value);
};
</script>

按需导入

import { Radio, RadioGroup } from 'x-next';

Radio Props

参数	说明	类型	默认值
modelValue	绑定值	RadioValue	undefined
defaultChecked	默认是否选中，非受控模式	boolean	false
value	选项值	RadioValue	true
type	单选类型	'radio' | 'button'	'radio'
disabled	是否禁用	boolean	false
name	原生 input 的 name 属性，优先级高于 RadioGroup 的 name	string	-
id	原生 input 的 id 属性	string	-

Radio Events

事件名	说明	回调参数
update:modelValue	值更新时触发	value: RadioValue
change	值变化时触发	value: RadioValue, event: Event

Radio Slots

插槽名	说明	参数
default	单选框文案	-
radio	自定义单选框图形	{ checked, disabled }

RadioGroup Props

参数	说明	类型	默认值
modelValue	绑定值	RadioValue	undefined
defaultValue	默认值，非受控模式	RadioValue	''
type	单选组类型	'radio' | 'button'	'radio'
size	单选组尺寸	'mini' | 'small' | 'medium' | 'large'	跟随全局配置
options	选项数据	Array<RadioValue | RadioOption>	-
direction	排列方向	'horizontal' | 'vertical'	'horizontal'
disabled	是否禁用	boolean	false
name	传给组内原生 input 的 name 属性	string	-
ariaLabel	原生 radiogroup 的 aria-label 属性	string	-

RadioGroup Events

事件名	说明	回调参数
update:modelValue	值更新时触发	value: RadioValue
change	值变化时触发	value: RadioValue, event: Event

RadioGroup Slots

插槽名	说明	参数
default	自定义单选框列表	-
label	自定义 options 文案	{ data }
radio	自定义单选框图形	{ checked, disabled }

类型

type RadioValue = string | number | boolean;

interface RadioOption {
  label?: string | (() => VNode);
  value: RadioValue;
  disabled?: boolean;
}