Switch
El componente e-switch captura estado booleano o binario mapeado dentro del contrato compartido de field, incluyendo detalles de ayuda, feedback de carga async, validacion y etiquetado accesible.
Usa esta pagina para validar comportamiento de toggles, side effects y mapeo de valores antes de conectar paneles de preferencias, release gates o settings de entorno a flujos de produccion.
Uso
Usa este playground base para ajustar el comportamiento del switch en contexto: color, outlined, disabled, readonly, loading y retain-color para una continuidad visual mas clara.
Variantes visuales
Compara estados default, outlined, tonal, retain-color, loading, disabled y readonly para mantener claras las decisiones binarias en paneles densos de configuracion.
Valores custom
Mapea el estado del switch a valores de dominio con true-value y false-value cuando el modelo no es estrictamente booleano.
Loading y flujos async
Usa loading para bloquear interaccion mientras se persiste el nuevo valor y para hacer explicitos los side effects durante updates async.
Slots nombrados
Usa el slot label para renderizar labels mas ricos con links o contexto de politicas sin perder la semantica del switch.
Validacion
Valida requisitos de consentimiento o de entorno con feedback explicito de submit antes de permitir una transicion critica.
Envia para validar la regla del switch.
Props
Usa la tabla de API como fuente de verdad para tipos aceptados, defaults y comportamiento heredado del field.
| Propiedad | Tipo | Por defecto |
|---|---|---|
| modelValue | boolean | string | number | undefined |
Valor actual del switch. El estado activo se resuelve por igualdad estricta contra trueValue. | ||
| trueValue | boolean | string | number | true |
Valor emitido cuando el switch queda activo. | ||
| falseValue | boolean | string | number | false |
Valor emitido cuando el switch queda inactivo. | ||
| loading | boolean | false |
Vuelve el control no interactivo y muestra un indicador de carga inline en el thumb. | ||
| tonal | boolean | false |
Muestra el estilo de overlay del field dentro del control switch sin cambiar el comportamiento binario. | ||
| hideOverlay | boolean | false |
Oculta el visual de overlay compartido del field sin cambiar el comportamiento del switch. | ||
| 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 switch. | ||
| 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. | ||