0252
Inputs / Form fields Creacion Revision

Toggle · switch on/off

Publicado
Lectura
4 min

El Toggle es la decisión sin confirmación. A diferencia del Checkbox (que se confirma con un submit), el Toggle aplica el cambio en el momento en que se conmuta. Por eso solo se usa para preferencias reversibles, nunca para acciones destructivas. Esta ficha documenta esa frontera y los tres descartes que la han probado.

Decomposición del componente

Las seis capas del componente

01 · Átomo color.neutral.300 · color.red.500 · space.6 · radius.full · duration.160

Primitivos. radius.full para el track y el thumb; duration.160 para el slide.

02 · Compuesto color.toggle.track.off · color.toggle.track.on · color.toggle.thumb · motion.toggle.slide

Semánticos del switch.

03 · Regla OPA rechazo en acciones destructivas · aria-label dual · persistencia asíncrona con loading

Governance: un Toggle nunca controla una acción irreversible. El schema cruza con el OpenAPI del producto.

04 · Pieza <Toggle checked={x} onChange={fn} />

Estado binario con aplicación inmediata. Sin submit implicado.

05 · Familia Inputs / Form fields · emparentado con Checkbox

La frontera Toggle vs Checkbox es semántica, no visual: inmediato vs confirmado.

06 · Estado reposo · hover · focus-visible · disabled · loading · checked/unchecked · agent-aware

loading durante la persistencia asíncrona del cambio.

Tokens consumidos

Semánticos

color.toggle.track.off oklch(0.78 0.005 75)

Track en estado off

color.toggle.track.on oklch(0.53 0.18 26)

Track en estado on, color action

color.toggle.thumb oklch(0.99 0.005 75)

Pulgar deslizable

motion.toggle.slide { duration: 160ms, easing: cubic-bezier(0.2, 0, 0.38, 1) }

Animación del thumb, deshabilitada con prefers-reduced-motion

Técnicas de governance aplicadas

Técnicas activas

Confirmación obligatoria para destructivas

Herramienta
OPA policy
Cobertura
Toggle ligado a acción irreversible

Si el Toggle controla una operación destructiva (eliminar cuenta, borrar datos), la policy exige el patrón ConfirmModal en lugar de Toggle. La regla evita acciones irreversibles en un solo gesto.

Etiquetado on/off explícito

Herramienta
aria-label dual
Cobertura
14 idiomas

El Toggle anuncia 'activado' o 'desactivado', no solo 'pulsado'. La etiqueta cambia tras el cambio de estado, no antes.

Estado físico

Agentic-consumable desde noviembre de 2025. Schema con regla de exclusión: un Toggle no puede ligarse a un endpoint marcado como destructive en el OpenAPI del producto.

Estados soportados

hover, focus-visible, disabled, loading (durante la persistencia asíncrona del cambio), agent-aware.

Composiciones prohibidas

Reglas activas

Toggle sobre endpoint destructive

Herramienta
OPA · block level
Cobertura
Cruce con OpenAPI del producto

Si el endpoint tiene metadato destructive=true, la policy rechaza el Toggle y exige ConfirmModal.

Toggle sin aria-label on/off

Herramienta
OPA · block level
Cobertura
SC 4.1.2

El SR debe anunciar 'activado' y 'desactivado' explícitamente. Sin aria-label dual, se rechaza.

Toggle anidado en form con submit

Herramienta
OPA · warning
Cobertura
Semántica confundida

Un Toggle dentro de form con submit button implica que el cambio no se aplica hasta submit. Rompe la esencia del Toggle. Alternativa: Checkbox.

Interoperabilidad

  • Consumido por: SettingsPanel, Toolbar, FormRow (solo para preferencias, no para acciones).
  • Consume: Label obligatorio, opcionalmente HelperText.
  • Con qué compone mal: en checkout flows o formularios de confirmación (contradice la semántica inmediata).
  • Sustituibles por: Checkbox si necesita confirmación; Radio si el rango es on/off/auto (tres estados).

Medición propuesta

Eventos planificados

toggle.change

Herramienta
OTLP · Events
Cobertura
Cada cambio persistido

from, to, latencia de persistencia, ruta. Detecta Toggles con latencia alta (>600ms) candidatos a loading state explícito.

toggle.regret

Herramienta
OTLP · Metrics
Cobertura
Doble cambio en <5s

Ratio de toggles que el usuario cambia y revierte rápido. Indica error de lectura de label.

Mutación plástica (Estado 3)

Qué muta y qué permanece

Animación del slide duration = derive(prefers-reduced-motion)

Con reduced-motion, cambio instantáneo sin slide.

Tamaño size = derive(pointer × viewport)

Touch amplía track a 28×52; desktop fine a 24×44.

Fijo por contract aria-label dual · exclusión destructive · schema binario

Contract inviolable.

Rollback si la mutación propone aplicar Toggle a endpoint destructive por contexto: la policy no cede.

Genealogía

Árbol de evolución

Toggle inicial inspirado en iOS

Reproducción del switch nativo de iOS. Sin policy de uso.

Consumidor Producto · 4 productos

Toggle vs Checkbox documentado

Primer guideline editorial sobre cuándo usar uno y otro.

Consumidor Producto · 16 productos

Toggle governable

Policy OPA para acciones destructivas. Auditoría WCAG cross-screen-reader.

Consumidor Producto · 24 productos

Toggle.AI · expuesto vía MCP

Schema con regla de exclusión.

Consumidor Humano + agente

Notas del editor

Descartes catalogados

Variants rechazadas

variant='three-state'

Toggle con estado intermedio (on, off, neutral). Indistinguible visualmente de Checkbox indeterminate. Movido a un componente <Tristate /> aparte con su gramática propia.

variant='confirm-on-toggle'

Toggle que pedía confirmación tras conmutar. Anulaba la propia razón de ser del Toggle (cambio inmediato). Sustituido por la regla: si necesita confirmación, usar Checkbox + Submit.

Referencias cruzadas