element/examples/docs/en-US/radio.md

Radio

A single selection is made in a set of alternatives.

How to use

As the option is visible by default, there should not be too many options. If too many options, the Select component is recommended.

Creating a radio component is easy, you just need to bind a variable by v-bind directive, and it means that the value of bound variable is equals to the value of label of which the radio you select. The type of label is String or Number.

:::demo

<template>
  <el-radio class="radio" v-model="radio" label="1">optionA</el-radio>
  <el-radio class="radio" v-model="radio" label="2">optionB</el-radio>
</template>

<script>
  export default {
    data () {
      return {
        radio: ''
      };
    }
  }
</script>

:::

Disabled

disabled attribute is used to disable radio button. You just need to add disabled attribute, and default value is true.

:::demo

<template>
  <el-radio disabled v-model="radio1" label="diabaled">optionA</el-radio>
  <el-radio disabled v-model="radio1" label="selected and disabled">optionB</el-radio>
</template>

<script>
  export default {
    data () {
      return {
        radio1: 'selected and disabled'
      };
    }
  }
</script>

:::

Radio button group

Applicable to scenes selecting from multiple mutex options.

Combine <el-radio-group> with <el-radio> to display a radio group. Bind a variable in <el-radio-group> element and set label value in <el-radio>. It also provides change event to respond to the change of bound value.

:::demo

<el-radio-group v-model="radio2">
  <el-radio :label="3">optionA</el-radio>
  <el-radio :label="6">optionB</el-radio>
  <el-radio :label="9">optionC</el-radio>
</el-radio-group>

:::

Button style

Radio with button styles.

You just need to change <el-radio> element into <el-radio-button> element. Element also provides size attribute for the buttons array. There are two options: large and small if not default.

:::demo

<el-radio-group v-model="radio3">
  <el-radio-button label="New York" size="small"></el-radio-button>
  <el-radio-button label="Washington" size="large"></el-radio-button>
  <el-radio-button label="Los Angeles" :disabled="true"></el-radio-button>
  <el-radio-button label="Chicago"></el-radio-button>
</el-radio-group>

:::

Radio Attributes

Attribute	Description	Type	options	Default
label	the value of radio	string, number	---	---
disabled	whether disabled or not	boolean	---	false

Radio-group Attributes

Attribute	Description	Type	options	Default
size	the size of radio button	string	large, small	---

Radio-group Events

Event	Description	callback parameters
change	event triggered when the bound variable changes	the label value of the radio which you select

Radio-button Attributes

Attribute	Description	Type	options	Default
label	the value of radio	string, number	---	---
disabled	whether disabled or not	boolean	---	false