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 ​

NameDescriptionTypeDefault
model-value / v-modelbinding valuestring / number / boolean—
value 2.6.0the value of Radiostring / number / boolean—
labelthe label of Radio. If there's no value, label will act as valuestring / number / boolean—
disabledwhether Radio is disabledbooleanfalse
borderwhether to add a border around Radiobooleanfalse
sizesize of the Radioenum—
namenative name attributestring—

Radio Events ​

NameDescriptionType
changetriggers when the bound value changesFunction

Radio Slots ​

NameDescription
defaultcustomize default content

RadioGroup API ​

RadioGroup Attributes ​

NameDescriptionTypeDefault
model-value / v-modelbinding valuestring / number / boolean—
sizethe size of radio buttons or bordered radiosstringdefault
disabledwhether the nesting radios are disabledbooleanfalse
text-colorfont color when button is activestring#ffffff
fillborder and background color when button is activestring#409eff
validate-eventwhether to trigger form validationbooleantrue
aria-label a11y 2.7.2same as aria-label in RadioGroupstring—
namenative name attributestring—
idnative id attributestring—
label a11y deprecatedsame as aria-label in RadioGroupstring—

RadioGroup Events ​

NameDescriptionType
changetriggers when the bound value changesFunction

RadioGroup Slots ​

NameDescriptionSubtags
defaultcustomize default contentRadio / RadioButton

RadioButton API ​

RadioButton Attributes ​

NameDescriptionTypeDefault
value 2.6.0the value of Radiostring / number / boolean—
labelthe label of Radio. If there's no value, label will act as valuestring / number / boolean—
disabledwhether Radio is disabledbooleanfalse
namenative 'name' attributestring—

RadioButton Slots ​

NameDescription
defaultcustomize default content

Source ​

Component • Style • Docs

Contributors ​