Radio

Single selection among multiple options.

Basic usage

Radio should not have too many options. Otherwise, use the Select component instead.

Creating a radio component is easy, you just need to bind a variable to Radio's v-model. It equals to the value of label of the chosen radio. The type of label is String, Number or Boolean.

FirstSecond

---

<template>
  <b-radio-group v-model="radioValue">
    <b-radio value="first" label="First" />
    <b-radio value="second" label="Second" />
  </b-radio-group>
</template>

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

Disabled

disabled attribute is used to disable the radio.

FirstSecond

---

<template>
  <b-radio-group v-model="radioValue">
    <b-radio disabled value="first" label="First" />
    <b-radio disabled value="second" label="Second" />
  </b-radio-group>
</template>

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

Radio Group

Suitable for choosing from some mutually exclusive options.

FirstSecond

---

<template>
  <b-radio-group v-model="radioValue">
    <b-radio value="first" label="First" />
    <b-radio value="second" label="Second" />
  </b-radio-group>
</template>

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

Icon style

Radio with icon style

First

SecondSubstitution

---

<template>
  <b-radio-group v-model="radioValue">
    <b-space :gutter="4" alignment="start">
      <b-radio :icon="Building" value="first" label="First" />
      <b-radio
        :icon="Building"
        value="second"
        label="Second"
        sub="Substitution"
      />
    </b-space>
  </b-radio-group>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Building } from '@bigin/icons-vue'
const radioValue = ref('first')
</script>

Button style

Radio with button style

FirstSecondThird

FirstSecondThird

FirstSecondThird

---

<template>
  <div class="flex flex-col">
    <b-radio-group v-model="radioValue" small>
      <b-radio-button value="first" label="First" />
      <b-radio-button value="second" label="Second" />
      <b-radio-button value="third" label="Third" />
    </b-radio-group>
    <b-radio-group v-model="radioValue" class="mt-3">
      <b-radio-button value="first" label="First" />
      <b-radio-button value="second" label="Second" />
      <b-radio-button value="third" label="Third" />
    </b-radio-group>
    <b-radio-group v-model="radioValue" large class="mt-3">
      <b-radio-button value="first" label="First" />
      <b-radio-button value="second" label="Second" />
      <b-radio-button value="third" label="Third" />
    </b-radio-group>
  </div>
</template>

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

Segment style

Radio with segment style

HomeUsersSettings

HomeUsersSettings

HomeUsersSettings

---

<template>
  <div class="flex flex-col items-start">
    <b-radio-group v-model="radioValue" segment small>
      <b-radio-button value="first" label="Home" :icon="Home" />
      <b-radio-button value="second" label="Users" :icon="Group" />
      <b-radio-button value="third" label="Settings" :icon="Settings" />
    </b-radio-group>
    <b-radio-group v-model="radioValue" segment class="mt-3">
      <b-radio-button value="first" label="Home" :icon="Home" />
      <b-radio-button value="second" label="Users" :icon="Group" />
      <b-radio-button value="third" label="Settings" :icon="Settings" />
    </b-radio-group>
    <b-radio-group v-model="radioValue" segment large class="mt-3">
      <b-radio-button value="first" label="Home" :icon="Home" />
      <b-radio-button value="second" label="Users" :icon="Group" />
      <b-radio-button value="third" label="Settings" :icon="Settings" />
    </b-radio-group>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Group, Home, Settings } from '@bigin/icons-vue'
const radioValue = ref('first')
</script>

Radio Attributes

Attribute	Description	Type	Accepted Values	Default
model-value / v-model	binding value	string / number / boolean	—	—
value	the value of Radio	string / number / boolean	—	—
label	the display label of Radio	string	—	—
disabled	whether Radio is disabled	boolean	—	false
size	size of the Radio	string	large / default /small	—
name	native 'name' attribute	string	—	—

Radio Events

Event Name	Description	Parameters
change	triggers when the bound value changes	the label value of the chosen radio

Radio Slots

Name	Description
—	customize default label
sub	customize default substitution text
icon	customize default icon

Radio-Group Attributes

Attribute	Description	Type	Accepted Values	Default
model-value / v-model	binding value	string / number / boolean	—	—
size	the size of radio	string	large / default / small	default
large	the large size of radio	boolean	—	false
small	the small size of radio	boolean	—	false
segment	segment style	boolean	—	false
disabled	whether the nesting radios are disabled	boolean	—	false
validate-event	whether to trigger form validation	boolean	-	true

Radio-Group Events

Event Name	Description	Parameters
change	triggers when the bound value changes	the label value of the chosen radio

Radio-Group Slots

Name	Description	Subtags
—	customize default content	Radio / Radio-button

Radio-Button Attributes

Attribute	Description	Type	Accepted Values	Default
value	the value of radio	string / number	—	—
label	the label of Radio	string	—	—
disabled	whether radio is disabled	boolean	—	false
name	native 'name' attribute	string	—	—
segment	segment style	boolean	—	false

Radio-Button Slots

Name	Description
—	customize default content