TRadio / TRadioGroup / 单选框

Radio buttons for selecting one option from a group. Supports independent and group mode (via TRadioGroup), inline layout, and validation. / 单选框用于从一组选项中选择一个值，支持独立模式和组模式（通过 TRadioGroup）、内联布局和验证状态。

TRadio Props

Prop	Type / 类型	Default / 默认值	Description / 说明
label	string	—	Label text / 标签文本
value	string | number | boolean	—	Radio value
name	string	—	Group name / 分组名
inline	boolean	false	Inline layout
disabled	boolean	false	Disabled
validation	'valid' | 'invalid'	—	Validation state

v-model

v-model	Type / 类型	Description / 说明
v-model	string | number | boolean	Selected value (standalone) / 选中值

Slots / 插槽

Slot	Description / 说明
default	Custom label content (overrides label prop) / 自定义标签

Basic Usage / 基础用法

<script setup lang="ts">
import { TRadio, TRadioGroup } from '@gulcc/tabler-vue'

const selected = ref('vue')
const options = [
  { label: 'Vue.js', value: 'vue' },
  { label: 'React', value: 'react' },
  { label: 'Angular', value: 'angular' },
]
</script>

<template>
  <!-- Radio group / 单选框组 -->
  <TRadioGroup v-model="selected">
    <TRadio v-for="opt in options" :key="opt.value" :value="opt.value">
      {{ opt.label }}
    </TRadio>
  </TRadioGroup>
  Selected: {{ selected }}
</template>

Advanced Usage / 进阶场景

<script setup lang="ts">
import { TRadio, TRadioGroup } from '@gulcc/tabler-vue'
</script>

<template>
  <!-- Inline layout / 内联排列 -->
  <TRadioGroup v-model="gender" inline>
    <TRadio value="male" label="Male / 男" />
    <TRadio value="female" label="Female / 女" />
    <TRadio value="other" label="Other / 其他" />
  </TRadioGroup>

  <!-- Disabled options / 禁用选项 -->
  <TRadioGroup v-model="plan">
    <TRadio value="free" label="Free / 免费" />
    <TRadio value="pro" label="Pro / 专业" disabled />
    <TRadio value="enterprise" label="Enterprise / 企业" />
  </TRadioGroup>

  <!-- Validation / 验证 -->
  <TRadioGroup v-model="agree" validation="invalid">
    <TRadio :value="true" label="I agree / 我同意" />
  </TRadioGroup>
</template>

Tips / 避坑指南

• In group mode, v-model binds to TRadioGroup, not individual TRadio components
• The selected value matches the value prop of the clicked TRadio
• disabled on individual TRadio overrides group-level disabled
• All TRadio in a group share the same name (auto-inherited from TRadioGroup if set)
• TRadio without a TRadioGroup parent works independently with its own v-model