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:
<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 |