Radio 单选框

在一组备选项中进行单选

WARNING

label 作为 value 来使用已经被 废弃, 建议label 只用来表示展示的文字,这个被废弃的用法将会在 3.0.0 版本被移除,请考虑使用新 API 替换.

TIP

新的 API value 已在 2.6.0 版本添加,文档中的示例都将使用 value。 如果您使用的版本 低于 2.6.0,请参考:

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>

基础用法

单选框不应该有太多的可选项, 如果你有很多的可选项你应该使用选择框而不是单选框。

要使用 Radio 组件,只需要设置v-model绑定变量, 选中意味着变量的值为相应 Radio value属性的值, value可以是StringNumberBoolean

禁用状态

disabled 属性可以用来控制单选框的禁用状态。

你只需要为单选框设置 disabled 属性就能控制其禁用状态。

单选框组

适用于在多个互斥的选项中选择的场景

结合el-radio-group元素和子元素el-radio可以实现单选组, 为 el-radio-group 绑定 v-model,再为 每一个 el-radio 设置好 label 属性即可, 另外,还可以通过 change 事件来响应变化,它会传入一个参数 value 来表示改变之后的值。

按钮样式

你可以让单选框看起来像一个按钮一样。

只需要把 el-radio 元素换成 el-radio-button 元素即可, 此外,Element Plus 还提供了 size 属性用来控制单选框的大小。

带有边框

设置 border 属性为 true 可以渲染为带有边框的单选框。

Radio API

Radio Attributes

属性名说明类型默认值
model-value / v-model选中项绑定值string / number / boolean
value 2.6.0单选框的值string / number / boolean
label单选框的 label 如果value没有值, label则作为value使用string / number / boolean
disabled是否禁用单选框booleanfalse
border是否显示边框booleanfalse
size单选框的尺寸enum
name原始 name 属性string

Radio Events

事件名说明类型
change绑定值变化时触发的事件Function

Radio Slots

插槽名说明
default自定义默认内容

RadioGroup API

RadioGroup Attributes

属性名说明类型默认值
model-value / v-model绑定值string / number / boolean
size单选框按钮或边框按钮的大小stringdefault
disabled是否禁用booleanfalse
text-color按钮形式的 Radio 激活时的文本颜色string#ffffff
fill按钮形式的 Radio 激活时的填充色和边框色string#409eff
validate-event输入时是否触发表单的校验booleantrue
aria-label a11y 2.7.2与 RadioGroup 中的 aria-label 属性相同string
name原生 name 属性string
id原生 id 属性string
label a11y deprecated与 RadioGroup 中的 aria-label 属性相同string

RadioGroup Events

事件名说明类型
change绑定值变化时触发的事件Function

RadioGroup Slots

插槽名说明子标签
default自定义默认内容Radio / RadioButton

RadioButton API

RadioButton Attributes

属性名说明类型默认
value 2.6.0单选框的值string / number / boolean
label单选框的 label 如果没有 value, label则作为value使用string / number / boolean
disabled是否禁用单选框booleanfalse
name原生 name 属性string

RadioButton Slots

插槽名说明
default默认插槽内容

源代码

组件样式文档

贡献者