Tui

TsRadio 单选框

在一组备选项中进行单选

基础用法

单选框的基本用法

选项1

选项2

示例代码

vue

<template>
<TsRadio v-model="radioValue" label="1">选项1</TsRadio>
<TsRadio v-model="radioValue" label="2">选项2</TsRadio>
</template>

<script setup>
import { ref } from 'vue';

const radioValue = ref('1');
</script>

禁用状态

单选框的不可用状态

禁用

选中且禁用

示例代码

vue

<template>
<TsRadio v-model="radioValue2" label="1" disabled>禁用</TsRadio>
<TsRadio v-model="radioValue2" label="2" disabled>选中且禁用</TsRadio>
</template>

<script setup>
import { ref } from 'vue';

const radioValue2 = ref('2');
</script>

单选框组

适用于在多个互斥的选项中选择的场景

选项1

选项2

选项3

示例代码

vue

<template>
<TsRadioGroup v-model="radioGroup">
  <TsRadio label="1">选项1</TsRadio>
  <TsRadio label="2">选项2</TsRadio>
  <TsRadio label="3">选项3</TsRadio>
</TsRadioGroup>
</template>

<script setup>
import { ref } from 'vue';

const radioGroup = ref('1');
</script>

按钮样式

按钮样式的单选组合

选项1

选项2

选项3

示例代码

vue

<template>
<TsRadioGroup v-model="radioButton" type="button">
  <TsRadio label="1">选项1</TsRadio>
  <TsRadio label="2">选项2</TsRadio>
  <TsRadio label="3" disabled>选项3</TsRadio>
</TsRadioGroup>
</template>

<script setup>
import { ref } from 'vue';

const radioButton = ref('1');
</script>