Radio

Radio. Mainly used for single selection from a group of options, or used individually to toggle a selected state.

Basic Usage

Radiofalse

<template>
  <b-radio v-model="single">Radio</b-radio>
  <span style="color: #ff4511">{{ single }}</span>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const single = ref(false)
</script>

Combo Usage

<template>
  <div>
    <b-radio-group v-model="social">
      <b-radio label="twitter">
        <span>Twitter</span>
      </b-radio>
      <b-radio label="facebook">
        <span>Facebook</span>
      </b-radio>
      <b-radio label="github">
        <span>Github</span>
      </b-radio>
      <b-radio label="snapchat">
        <span>Snapchat</span>
      </b-radio>
    </b-radio-group>
    <p style="color: #ff4511; margin: 5px 0">{{ social }}</p>
    <b-radio-group v-model="fruit">
      <b-radio label="Banana"></b-radio>
      <b-radio label="Apple"></b-radio>
      <b-radio label="Watermelon"></b-radio>
    </b-radio-group>
    <p style="color: #ff4511; margin: 5px 0">{{ fruit }}</p>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const social = ref('facebook')
const fruit = ref('Apple')
</script>

Disabled State

Set disabled to disable the radio group or a single radio option

Checkbox

BananaAppleWatermelon

<template>
  <div>
    <b-radio v-model="disabledSingle" disabled>Checkbox</b-radio>
    <b-radio-group v-model="disabledGroup">
      <b-radio label="Banana" disabled></b-radio>
      <b-radio label="Apple" disabled></b-radio>
      <b-radio label="Watermelon"></b-radio>
    </b-radio-group>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const disabledSingle = ref(true)
const disabledGroup = ref('Apple')
</script>

buttonType

Set type="button" to render radio as button type

<template>
  <div flex>
    <div>
      <b-radio-group v-model="fruit" type="button">
        <b-radio label="Banana"></b-radio>
        <b-radio label="Apple"></b-radio>
        <b-radio label="Watermelon"></b-radio>
      </b-radio-group>
      <div class="p10" />
      <b-radio-group v-model="fruit" type="button" size="small">
        <b-radio label="Banana"></b-radio>
        <b-radio label="Apple"></b-radio>
        <b-radio label="Watermelon"></b-radio>
      </b-radio-group>
      <div class="p10" />
      <b-radio-group v-model="fruit" type="button" size="mini">
        <b-radio label="Banana"></b-radio>
        <b-radio label="Apple"></b-radio>
        <b-radio label="Watermelon"></b-radio>
      </b-radio-group>
    </div>
    <div style="margin-left: 24px">
      <b-radio-group v-model="fruit" type="button">
        <b-radio label="Banana" disabled></b-radio>
        <b-radio label="Apple"></b-radio>
        <b-radio label="Watermelon"></b-radio>
      </b-radio-group>
      <br />
      <b-radio-group v-model="fruit" type="button" disabled>
        <b-radio label="Banana" disabled></b-radio>
        <b-radio label="Apple"></b-radio>
        <b-radio label="Watermelon"></b-radio>
      </b-radio-group>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const fruit = ref('Apple')
</script>

Capsule Type

Set type="capsule" to render radio as capsule type

<template>
  <div flex>
    <div>
      <b-radio-group v-model="fruit" type="capsule">
        <b-radio label="Banana"></b-radio>
        <b-radio label="Apple"></b-radio>
        <b-radio label="Peach"></b-radio>
        <b-radio label="Watermelon"></b-radio>
      </b-radio-group>
      <div class="p10" />
      <b-radio-group v-model="fruit" type="capsule" size="small">
        <b-radio label="Banana"></b-radio>
        <b-radio label="Apple"></b-radio>
        <b-radio label="Peach"></b-radio>
        <b-radio label="Watermelon"></b-radio>
      </b-radio-group>
      <div class="p10" />
      <b-radio-group v-model="fruit" type="capsule" size="mini">
        <b-radio label="Banana"></b-radio>
        <b-radio label="Apple"></b-radio>
        <b-radio label="Peach"></b-radio>
        <b-radio label="Watermelon"></b-radio>
      </b-radio-group>
    </div>

    <div style="margin-left: 24px">
      <b-radio-group v-model="fruit" type="capsule">
        <b-radio label="Banana" disabled></b-radio>
        <b-radio label="Apple"></b-radio>
        <b-radio label="Peach"></b-radio>
        <b-radio label="Watermelon"></b-radio>
      </b-radio-group>
      <div class="p10" />
      <b-radio-group v-model="fruit" type="capsule" disabled>
        <b-radio label="Banana" disabled></b-radio>
        <b-radio label="Apple"></b-radio>
        <b-radio label="Peach"></b-radio>
        <b-radio label="Watermelon"></b-radio>
      </b-radio-group>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const fruit = ref('Apple')
</script>

Props

Parameter	Description	Type	Options	Default
value	Only effective when used alone. Use v-model for two-way binding	Boolean	—	false
label	Effective when used in a group. Specifies the value of the current option; the group automatically determines whether it is selected	String/Number/Boolean	—	—
disabled	Disables the current item	Boolean	—	false

Radio events

Event Name	Description	Return Value
change	Triggers when option state changes, returns current status. Will not trigger when external data is modified	...

RadioGroup props

Parameter	Description	Type	Options	Default
value	Specifies the set of selected items; use v-model for two-way binding	String/ Number	—	''
disabled	Disables all options	Boolean	—	false
type	Enable button mode	String	button /capsule	—
size	Size of the radio group in button mode	String	large、small、default	—

RadioGroup events

Event Name	Description	Return Value
change	Triggers when option state changes, returns an array of selected items. Will not trigger when external data is modified	...

Radio ​

Basic Usage ​

Combo Usage ​

Disabled State ​

buttonType ​

Capsule Type ​

Props ​

Radio events ​

RadioGroup props ​

RadioGroup events ​