Radio 单选框

在一组选项里单选。没有 SrRadioGroup——每个 SrRadio 各自绑定同一个 v-model，靠 value 区分。

基础用法

选项 A选项 B选项 C

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

<template>
  <SrRadio v-model="picked" value="a">选项 A</SrRadio>
  <SrRadio v-model="picked" value="b">选项 B</SrRadio>
  <SrRadio v-model="picked" value="c">选项 C</SrRadio>
</template>

当前选中：a

为什么没有 Group 组件

其他组件库普遍提供 RadioGroup 来统一下发 v-model 与 name。 本库刻意不这么做：

1. 原生 <input type="radio"> 靠 name 属性天然成组， 这个机制已经存在且可靠，再包一层 Group 属于重复抽象；
2. 少一层组件就少一层 provide / inject， SrFormItem 的校验信息能直接拿到每个 SrRadio，不必穿透 Group 转发。

代价：每个 radio 都要写 v-model。选项多时确实啰嗦， 这时通常说明该用 SrSelect 而不是一排 radio——横向空间也不够。

横向排列

用 SrSpace 控制间距与方向，组件本身不管布局。

ABC

<SrSpace size="lg">
  <SrRadio v-model="picked" value="a">A</SrRadio>
  <SrRadio v-model="picked" value="b">B</SrRadio>
  <SrRadio v-model="picked" value="c">C</SrRadio>
</SrSpace>

值类型

value 支持 string | number | boolean。

按小时按天按月

<SrRadio v-model="picked" :value="1">数字值</SrRadio>
<SrRadio v-model="picked" :value="true">布尔值</SrRadio>

尺寸与禁用

小中禁用

<SrRadio size="sm" value="s">小</SrRadio>
<SrRadio size="md" value="m">中</SrRadio>
<SrRadio disabled value="x">禁用</SrRadio>

Props

名称	类型	默认值	说明
modelValue	string | number | boolean	—	当前选中的值（一组内所有 radio 共享）
value	string | number | boolean	—	必填。本项代表的值
size	'sm' | 'md'	'md'	尺寸
disabled	boolean	false	是否禁用
name	string	自动生成	原生 name 属性；不传时会自动为同组生成一个

插槽

名称	说明
default	标签文本

事件

事件	参数	说明
update:modelValue	本项的 value	选中项变化
change	本项的 value	同上（语义化事件）

无障碍

• 用 <label> 包裹原生 <input type="radio">，点击文字即可选中
• 原生 radio 自带方向键导航：同组内按上下键即可切换， 这是浏览器提供的能力，自己拼 div 会全部丢失
• name 相同时它们才是同一组——这决定了方向键在哪些项之间移动