Radio 单选框

用于在互斥的多个备选项中进行单项选择的表单控件，通常结合 <mu-radio-group> 使用。

---

代码示例

1. 水平排列单选 (Horizontal)

设置 direction="horizontal" 让多个单选框水平同行排列。

<template>
  <mu-radio-group v-model="payMethod" direction="horizontal">
    <mu-radio name="wechat" label="微信支付 WeChat" />
    <mu-radio name="alipay" label="支付宝 Alipay" />
    <mu-radio name="card" label="银行卡 Card" />
  </mu-radio-group>
</template>

<script setup>
import { ref } from 'vue'
const payMethod = ref('wechat')
</script>

---

2. 垂直列表单选 (Vertical)

默认 direction="vertical" 适用于纵向列表单选。

<template>
  <mu-radio-group v-model="gender" direction="vertical">
    <mu-radio name="male" label="男士 Male" />
    <mu-radio name="female" label="女士 Female" />
    <mu-radio name="secret" label="保密 Secret" />
  </mu-radio-group>
</template>

---

3. 禁用状态 (Disabled)

设置 disabled 禁止选中特定备选项。

<template>
  <mu-radio-group v-model="option" direction="horizontal">
    <mu-radio name="opt1" label="可用选项 A" />
    <mu-radio name="opt2" disabled label="禁用选项 B" />
  </mu-radio-group>
</template>

---

API 属性说明

Radio Props

参数名	说明	类型	可选值	默认值
name	在 RadioGroup 内绑定的选中值标识	String | Number | Boolean	-	''
label	单选框右侧显示的文案	String	-	''
disabled	是否禁用点击	Boolean	true | false	false

RadioGroup Props

参数名	说明	类型	可选值	默认值
v-model	当前选中的 name 标识值	String | Number	-	''
direction	子单选框排列方向	String	horizontal | vertical	'vertical'

---

事件说明 (Events)

事件名	说明	回调参数
change	选中项发生改变时触发	(value: String | Number)
update:modelValue	双向绑定改变	(value: String | Number)

---

插槽说明 (Slots)

插槽名	说明
default	自定义单选框右侧 label 文案与内容区域