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 是否禁用单选框 boolean false
border 是否显示边框 boolean false
size 单选框的尺寸 enum
name 原始 name 属性 string

Radio Events

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

Radio Slots

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

RadioGroup API

RadioGroup Attributes

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

RadioButton Slots

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

源代码

组件 样式 文档

贡献者