Componente de interruptor para Figma: 2.404 variantes

Toggle UI — Visión General

El Toggle en Emvi UI es un control binario que permite conmutar rápidamente entre dos estados opuestos (activado/desactivado). Está optimizado para cambios instantáneos de configuración (p. ej., habilitar notificaciones, modo oscuro, activar/desactivar una regla) y para escenarios donde la acción tiene efecto inmediato sin confirmaciones adicionales.

El componente soporta variantes de tamaño (SM/MD/LG), densidades (compact/comfortable), estados (on/off, hover, focus, disabled, loading) y estilos de tema (claro/oscuro). Los tokens de color, tipografía y espaciado aseguran coherencia visual con el resto del sistema. El diseño prioriza legibilidad del estado, accesibilidad WCAG y claridad semántica, diferenciando el Toggle de otros patrones (checkbox, radio, button) por su naturaleza instantánea.

Anatomía y Estados

Un Toggle típico incluye:

- Track: pista u "on-rail" donde se desplaza el thumb; comunica el estado mediante color y contraste.
- Thumb/Handle: indicador circular/oval que se mueve entre posiciones off/on.
- Etiqueta (label) y descripción (optional sublabel): proveen contexto y evitan ambigüedad; el área del label debe ser clicable.

Estados:
- Off / On (predeterminados)
- Hover / Focus visible (anillo o halo)
- Pressed/Active (retroalimentación momentánea)
- Disabled (sin interacción, mantiene legibilidad)
- Loading (spinner sutil en el thumb o el track)

Comportamiento, Uso Correcto y Diferencias con Checkbox

- Acción inmediata: los Toggles aplican cambios al instante; no requieren "guardar".
- Contexto binario claro: deben representar estados permanentes o de larga duración (p. ej., activar 2FA).
- No para acciones únicas: evitar usarlos como disparadores momentáneos (para eso usar Button).
- No para selección múltiple: si el usuario marca/desmarca un conjunto, considerar checkbox.
- Foco y teclas: Tab para enfocar, Space/Enter para alternar. Mantener una descripción clara cuando el significado del on/off no sea obvio.