Radio 单选框

用于在多个备选项中选中单个结果。

基础用法

Option 1

Option 2

<script setup lang="ts">
import { ref } from "vue";
const radio1 = ref("Option 1");
</script>

<template>
  <lb-radio-group v-model="radio1" name="baseUsage">
    <lb-radio label="Option 1" v-model="radio1">Option 1</lb-radio>
    <lb-radio label="Option 2" v-model="radio1">Option 2</lb-radio>
  </lb-radio-group>
</template>

禁用状态

Option 1

Option 2

<script setup lang="ts">
import { ref } from "vue";

const radio = ref("Option 1");
</script>

<template>
  <lb-radio-group v-model="radio" disabled name="disabled">
    <lb-radio label="Option 1">Option 1</lb-radio>
    <lb-radio label="Option 2">Option 2</lb-radio>
  </lb-radio-group>
</template>

尺寸

Option 1

Option 2

Option 1

Option 2

Option 1

Option 2

<script setup lang="ts">
import { ref } from "vue";
const radioSmall = ref("Option 1");
const radioBase = ref("Option 1");
const radioLarge = ref("Option 1");
</script>

<template>
  <lb-radio-group v-model="radioSmall" size="small" name="small">
    <lb-radio label="Option 1">Option 1</lb-radio>
    <lb-radio label="Option 2">Option 2</lb-radio>
  </lb-radio-group>

  <div style="margin-top: 20px"></div>

  <lb-radio-group v-model="radioBase" size="base" name="base">
    <lb-radio label="Option 1">Option 1</lb-radio>
    <lb-radio label="Option 2">Option 2</lb-radio>
  </lb-radio-group>

  <div style="margin-top: 20px"></div>

  <lb-radio-group v-model="radioLarge" size="large" name="large">
    <lb-radio label="Option 1">Option 1</lb-radio>
    <lb-radio label="Option 2">Option 2</lb-radio>
  </lb-radio-group>
</template>

Radio Props

属性名	说明	类型	可选值	默认值
modelValue / v-model	绑定值	string | number | boolean | null	—	null
label	Radio 的 value	string | number | boolean	—	—
disabled	是否禁用	boolean	true | false	false
size	Radio 的尺寸	"small" | "base" | "large"	small, base, large	base

Radio Events

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

RadioGroup Props

属性名	说明	类型	可选值	默认值
modelValue / v-model	绑定值	string | number | boolean | null	—	null
name	原生 name 属性	string	—	''
size	RadioGroup 的尺寸	"small" | "base" | "large"	small, base, large	base
disabled	是否禁用	boolean	true | false	false

RadioGroup Events

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