Radio ​

Selección única entre múltiples opciones.

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>

Uso básico ​

La radio no debería tener demasiadas opciones. De lo contrario, utilice el componente Select en su lugar.

Crear un componente de radio es fácil, solo necesita vincular una variable al v-model de Radio. It equals to the value of value of the chosen radio. The type of value is String, Number or Boolean.

Deshabilitar ​

El atributo disabled es utilizado para deshabilitar un Radio.

Solo necesita agregar el atributo disabled.

Grupo de elementos Radio ​

Recomendado para seleccionar opciones que se excluyen mutuamente.

Combine el-radio-group con el-radio para mostrar un grupo de Radio. Enlace la variable con v-model del elemento el-radio-group y asigne el valor del label en el-radio. Se provee el evento change con el valor actual como parámetro.

Estilo del botón ​

Radio con estilo de botón.

Solo necesita cambiar el elemento el-radio a el-radio-button. Se provee el atributo size.

Con bordes ​

El atributo border agrega un borde al elemento Radio.

API de Radio ​

Atributos de radio ​

NombreDescripciónTipoPor defecto
model-value / v-modelvalor vinculadostring / number / boolean—
value 2.6.0el valor de Radiostring / number / boolean—
labelthe label of Radio. If there's no value, label will act as valuestring / number / boolean—
disabledsi el radio está desactivadobooleanfalse
bordersi añadir un borde alrededor del radiobooleanfalse
sizetamaño del radioenum—
nameatributo nativo namestring—

Eventos de radio ​

NombreDescripciónTipo
changese dispara cuando el valor cambiaFunction

Slots de Radio ​

NombreDescripción
defaultpersonaliza el contenido por defecto

API de RadioGroup ​

Atributos del RadioGroup ​

NombreDescripciónTipoPor defecto
model-value / v-modelvalor enlazadostring / number / boolean—
sizeel tamaño de los botones de radio o radios bordeadosstringdefault
disabledsi la anidación de radios está deshabilitadabooleanfalse
text-colorcolor de fuente cuando el botón está activostring#ffffff
fillcolor de borde y de fondo cuando el botón está activostring#409eff
validate-eventsi se activa la validación del formulariobooleantrue
aria-label a11y 2.7.2igual que aria-label en RadioGroupstring—
nameatributo nativo namestring—
idatributo nativo idstring—
label a11y deprecatedsame as aria-label in RadioGroupstring—

Eventos RadioGroup ​

NombreDescripciónTipo
changese dispara cuando el valor cambiaFunction

Slots de RadioGroup ​

NombreDescripciónSubtags
defaultpersonaliza el contenido por defectoRadio / RadioButton

API RadioButton ​

Atributos de RadioButton ​

NombreDescripciónTipoPor defecto
value 2.6.0el valor de Radiostring / number / boolean—
labelthe label of Radio. If there's no value, label will act as valuestring / number / boolean—
disabledsi el radio está desactivadobooleanfalse
nameatributo 'name' nativostring—

Slots de RadioButton ​

NombreDescripción
defaultpersonaliza el contenido por defecto

Fuente ​

Componentes • Style • Documentación

Contribuidores ​