Radio ​

Single selection among multiple options.

WARNING

label act as value has been deprecated, label is used only as display text, this action will be removed in 3.0.0, consider switching to new API.

TIP

New API value has been added in 2.6.0, the examples in the document all use the value. If you are using a version less than 2.6.0, please refer to:

vue 
<template>
  <el-radio-group v-model="radio1">
    <!-- works when >=2.6.0, recommended ✔️ not work when <2.6.0 ❌ -->
    <el-radio value="Value 1">Option 1</el-radio>
    <!-- works when <2.6.0, deprecated act as value when >=3.0.0 -->
    <el-radio label="Label 2 & Value 2">Option 2</el-radio>
  </el-radio-group>
</template>

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 value of the chosen radio. The type of value is String, Number or Boolean.

Disabled ​

disabled attribute is used to disable the radio.

You just need to add the disabled attribute.

Radio button group ​

Suitable for choosing from some mutually exclusive options.

Combine el-radio-group with el-radio to display a radio group. Bind a variable with v-model of el-radio-group element and set label value in el-radio. It also provides change event with the current value as its parameter.

Button style ​

Radio with button styles.

You just need to change el-radio element into el-radio-button element. We also provide size attribute.

With borders ​

The border attribute adds a border to Radios.

Radio API ​

Radio Attributes ​

Name Description Type Default
model-value / v-model binding value string / number / boolean —
value 2.6.0 the value of Radio string / number / boolean —
label the label of Radio. If there's no value, label will act as value string / number / boolean —
disabled whether Radio is disabled boolean false
border whether to add a border around Radio boolean false
size size of the Radio enum —
name native name attribute string —

Radio Events ​

Name Description Type
change triggers when the bound value changes Function

Radio Slots ​

Name Description
default customize default content

RadioGroup API ​

RadioGroup Attributes ​

Name Description Type Default
model-value / v-model binding value string / number / boolean —
size the size of radio buttons or bordered radios string default
disabled whether the nesting radios are disabled boolean false
text-color font color when button is active string #ffffff
fill border and background color when button is active string #409eff
validate-event whether to trigger form validation boolean true
label a11y deprecated same as aria-label in RadioGroup string —
aria-label a11y 2.7.2 same as aria-label in RadioGroup string —
name native name attribute string —
id native id attribute string —

RadioGroup Events ​

Name Description Type
change triggers when the bound value changes Function

RadioGroup Slots ​

Name Description Subtags
default customize default content Radio / RadioButton

RadioButton API ​

RadioButton Attributes ​

Name Description Type Default
value 2.6.0 the value of Radio string / number / boolean —
label the label of Radio. If there's no value, label will act as value string / number / boolean —
disabled whether Radio is disabled boolean false
name native 'name' attribute string —

RadioButton Slots ​

Name Description
default customize default content

Source ​

Component • Style • Docs

Contributors ​