单选框 Radio

常用于性别、偏好、单选型问题等场景，保障用户做出明确且唯一的选择，在表单填写、设置选项等交互流程中，提升信息收集准确性与操作便捷性。

Radio

value：option 1

option 1option 2

配置项

Disabled

Type

Size

Option 1

Option 2

基础用法

单选框的基本用法

选项

禁用选项

<template>
  <bp-space>
    <bp-radio v-model="val" :value="0">选项</bp-radio>
    <bp-radio v-model="val" disabled :value="1">禁用选项</bp-radio>
  </bp-space>
</template>

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

单选框组

通过 radio-group 组件实现单选框组，更好的管理一组单选框

男女未知

男女未知

<template>
  <bp-space type="vertical">
    <bp-radio-group v-model="val">
      <template v-for="v in optionList">
        <bp-radio :value="v">{{ v }}</bp-radio>
      </template>
    </bp-radio-group>
    <bp-radio-group v-model="val1">
      <template v-for="v in optionList">
        <bp-radio :value="v">{{ v }}</bp-radio>
      </template>
    </bp-radio-group>
  </bp-space>
</template>

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

const val = ref('男');
const val1 = ref('女');
const optionList = ["男", "女", "未知"];
</script>

按钮单选框组

通过 type="button" 设置单选框为按钮样式

推荐最新最热

<template>
  <bp-radio-group v-model="val" type="button">
    <template v-for="v in optionList">
      <bp-radio :value="v">{{ v }}</bp-radio>
    </template>
  </bp-radio-group>
</template>

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

const val = ref("推荐");
const optionList = ["推荐", "最新", "最热"];
</script>

Radio 属性

v-model	绑定值	RadioValue	-	-
value	单选值	RadioValue	-	-
disabled	是否禁用	Boolean	false	-

RadioGroup 属性

v-model	绑定值	RadioValue	-	-
type	单选组类型	RadioType	-	-
disabled	是否禁用	Boolean	false	-
size	尺寸	ButtonSize	default	-
direction	单选组类型	DirectionType	-	-

Radio 事件

change	单选值改变触发	value:RadioValue	-