Radio
Los componentes e-radio-group y e-radio resuelven seleccion exclusiva dentro del sistema compartido de field, incluyendo validacion, layout en fila o columna y comportamiento centralizado de color, disabled y readonly.
Usa esta pagina para validar flujos de seleccion agrupada antes de conectar canales de release, ambientes o preferencias a formularios de produccion.
Uso
Usa este playground base para configurar el comportamiento del grupo en contexto: layout row, color, outlined, disabled, readonly, tonal y retain-color.
Layout y direccion
Compara layouts en fila y columna para adaptarlos a la densidad, longitud de labels y espacio horizontal disponible.
Variantes visuales
Compara estados default, outlined, tonal, retain-color, disabled y readonly para mantener clara la seleccion exclusiva en formularios densos.
Seleccion obligatoria
Usa mandatory cuando el grupo debe resolverse siempre con una opcion valida, incluso si el modelo inicial llega vacio.
Slots nombrados
Usa el slot label tanto en e-radio-group como en e-radio cuando el copy necesita contenido inline mas rico.
Validacion
Valida flujos de seleccion requerida con feedback explicito de submit antes de continuar un paso critico de configuracion.
Envia para validar la regla del grupo de radios.
Props
Usa la tabla de API como fuente de verdad para props de ERadioGroup y ERadio, defaults y comportamiento heredado del field.
| Propiedad | Tipo | Por defecto |
|---|---|---|
| ERadioGroup.modelValue | string | number | null | undefined | undefined |
Valor seleccionado actual del grupo. Una opcion hija queda activa cuando su modelValue coincide exactamente con este valor. | ||
| ERadioGroup.mandatory | boolean | false |
Cuando esta activo y no existe una seleccion valida, inicializa la primera opcion disponible al montar. | ||
| ERadioGroup.row | boolean | false |
Distribuye los radios hijos en horizontal. Cuando se omite, el grupo se renderiza en columna. | ||
| ERadioGroup.tonal | boolean | false |
Muestra el estilo de overlay del field sobre el contenedor del grupo sin cambiar el comportamiento de seleccion. | ||
| clearable | boolean | false |
Muestra accion de limpiar cuando existe valor. | ||
| color | string | "primary" |
Color base de tema aplicado al estado e interacciones del field. | ||
| outlined | boolean | false |
Usa variante visual outlined para el contenedor del field. | ||
| disabled | boolean | false |
Desactiva interaccion y evita actualizar valor. | ||
| readonly | boolean | false |
Evita edicion manteniendo comportamiento de foco. | ||
| dense | boolean | false |
Aplica espaciado vertical mas compacto heredado de Field. | ||
| retainColor | boolean | false |
Mantiene estilo de color activo despues de foco/interaccion. | ||
| label | string | number | undefined |
Texto de etiqueta del field. | ||
| labelMinWidth | string | number | undefined |
Ancho minimo reservado para la region de etiqueta. | ||
| labelBehavior | "static" | "static" |
El comportamiento de label es estatico para controles radio group. | ||
| inputAlign | left | right | center | start | end | "start" |
Alineacion horizontal del texto dentro del area de input/seleccion. | ||
| prependIcon | string | IconPath | IconPath[] | undefined |
Icono renderizado en la region externa izquierda. | ||
| prependInnerIcon | string | IconPath | IconPath[] | undefined |
Icono renderizado antes del contenido dentro del frame del input. | ||
| appendInnerIcon | string | IconPath | IconPath[] | undefined |
Icono renderizado despues del contenido dentro del frame del input. | ||
| appendIcon | string | IconPath | IconPath[] | undefined |
Icono renderizado en la region externa derecha. | ||
| detail | string | undefined |
Texto de ayuda mostrado en el area de detalles cuando no hay errores. | ||
| detailsOnMessageOnly | boolean | false |
Muestra el area de detalles solo cuando existen mensajes/errores. | ||
| rules | FieldRule | undefined |
Reglas de validacion evaluadas contra modelValue. | ||
| detailErrors | string[] | undefined |
Mensajes de error explicitos renderizados en el area de detalles. | ||
| ERadio.modelValue | string | number | null | undefined | undefined |
Valor representado por la opcion individual. Debe usarse dentro de ERadioGroup. | ||
| ERadio.label | string | number | undefined |
Texto visible de la etiqueta para la opcion individual. | ||