Radio 单选框

单选框（Radio）用于在多个互斥选项中选择一项。

TRadioGroup 组模式

推荐使用 TRadioGroup 包裹多个 TRadio，只需在 Group 上绑定 v-model，name 可自动传递给子项。

<TRadioGroup v-model="selected">
  <TRadio value="apple" label="苹果" />
  <TRadio value="banana" label="香蕉" />
  <TRadio value="orange" label="橙子" />
</TRadioGroup>

独立模式

每个 TRadio 也可单独使用，通过共同的 name 属性和各自的 v-model 实现互斥。

<TRadio v-model="selected" value="male" label="男" name="gender" />
<TRadio v-model="selected" value="female" label="女" name="gender" />
<TRadio v-model="selected" value="other" label="其他" name="gender" />

内联排列

通过 inline 属性让单选框水平排列。可在 TRadioGroup 上统一设置，也可在每个 TRadio 上单独设置。

<TRadioGroup v-model="selected" inline>
  <TRadio value="s" label="S" />
  <TRadio value="m" label="M" />
  <TRadio value="l" label="L" />
  <TRadio value="xl" label="XL" />
</TRadioGroup>

禁用状态

通过 disabled 属性禁用单选框。可在 TRadioGroup 上统一禁用全部，也可在单个 TRadio 上设置。

<TRadioGroup v-model="selected">
  <TRadio value="option1" label="可选选项" />
  <TRadio value="option2" label="禁用选项" disabled />
  <TRadio value="option3" label="禁用（默认选中）" disabled />
</TRadioGroup>

验证状态

通过 validation 属性设置验证状态，配合 .valid-feedback / .invalid-feedback 显示提示。

<TRadioGroup v-model="selected" validation="valid">
  <TRadio value="yes" label="有效状态" />
</TRadioGroup>
<div class="valid-feedback">选择正确！</div>

<TRadioGroup v-model="selected" validation="invalid">
  <TRadio value="no" label="无效状态" />
</TRadioGroup>
<div class="invalid-feedback">请选择一个选项。</div>

options 模式（数组生成）

通过 options 属性传入字符串数组或对象数组，自动生成 TRadio，无需手动写子组件。

字符串数组：每个字符串同时作 label 和 value。
对象数组：可指定 label、value、disabled。
自定义渲染：通过 #option 插槽自定义每个选项的标签内容。

<!-- 字符串数组 -->
<TRadioGroup v-model="selected" :options="['苹果', '香蕉', '橙子']" />

<!-- 对象数组 -->
<TRadioGroup v-model="selected" :options="[
  { label: '苹果', value: 'apple' },
  { label: '香蕉', value: 'banana' },
  { label: '橙子', value: 'orange' },
]" />

<!-- 带禁用项 -->
<TRadioGroup v-model="selected" :options="[
  { label: '苹果', value: 'apple' },
  { label: '香蕉', value: 'banana', disabled: true },
]" />

自定义标签（插槽）

通过 default 插槽自定义标签内容，支持富文本和图标。

<TRadioGroup v-model="selected">
  <TRadio value="plan-a">
    <strong>基础版</strong>
    <span class="text-secondary ms-1">- 适合个人使用</span>
  </TRadio>
  <TRadio value="plan-b">
    <strong>专业版</strong>
    <span class="text-secondary ms-1">- 适合团队协作</span>
  </TRadio>
</TRadioGroup>

API

TRadio 属性 (Props)

属性名	说明	类型	默认值
v-model	绑定值（独立模式下使用）	string | number | boolean | null	null
value	单选项的值	string | number | boolean	undefined
label	标签文本	string	undefined
name	分组名（独立模式必填，组模式自动继承 Group 的 name）	string	undefined
inline	内联排列	boolean	false
disabled	禁用状态	boolean	false
validation	验证状态	'valid' | 'invalid'	undefined
id	原生 id	string	undefined
required	必填	boolean	false

TRadioGroup 属性 (Props)

属性名	说明	类型	默认值
v-model	当前选中的值	string | number | boolean | null	null
options	选项数组（字符串或对象），设置后自动生成 TRadio	(string | { label: string, value?: any, disabled?: boolean })[]	undefined
name	分组名，自动传递给子 TRadio	string	undefined
inline	内联排列，自动传递给子 TRadio	boolean	false
disabled	全部禁用	boolean	false
validation	验证状态，自动传递给子 TRadio	'valid' | 'invalid'	undefined

TRadioGroup 事件 (Emits)

事件名	说明	回调参数
update:modelValue	选中值变化时触发	(value: string | number | boolean | null) => void
change	选中值变化时触发	(value: string | number | boolean | null) => void

TRadio 插槽 (Slots)

插槽名	说明
default	自定义标签内容（替代 label 属性）

TRadioGroup 插槽 (Slots)

插槽名	说明	作用域参数
default	自定义子项（当未设置 options 时）	—
option	自定义选项标签（当设置了 options 时）	{ option: { label, value, disabled }, checked: boolean }