Radio

Select a single option from a set.

Radio

value：option 1

option 1option 2

Options

Disabled

Type

Size

Option 1

Option 2

Basic Usage

Select a single option from a set.

Option

Disabled option

<template>
  <bp-space>
    <bp-radio v-model="val" :value="0">Option</bp-radio>
    <bp-radio v-model="val" disabled :value="1">Disabled option</bp-radio>
  </bp-space>
</template>

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

Radio Group

Group options with radio-group.

MaleFemaleUnknown

MaleFemaleUnknown

<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('Male');
const val1 = ref('Female');
const optionList = ["Male", "Female", "Unknown"];
</script>

Button Radio Group

Use type="button" for a button-style group.

RecommendedLatestHottest

<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("Recommended");
const optionList = ["Recommended", "Latest", "Hottest"];
</script>

Radio Props

v-model	Bound value	RadioValue	-	-
value	Radio value	RadioValue	-	-
disabled	Whether disabled	Boolean	false	-

RadioGroup Props

v-model	Bound value	RadioValue	-	-
type	Radio group type	RadioType	-	-
disabled	Whether disabled	Boolean	false	-
size	Size	ButtonSize	default	-
direction	Radio group type	DirectionType	-	-

Radio Events

change

Triggered when the radio value changes

value:RadioValue

-

Radio Slots

default

Content

-

-

RadioGroup Slots

default

Radio list

-

-