Toggle

Control binario tipo switch con etiqueta asociada y dos tamaños.

Estado: draft

Vista Previa

1. Default - Off (Apagado)

El estado base, interactivo y accesible nativamente.

2. Default - On (Encendido)

El atributo checked en el input acciona visualmente el desplazamiento.

3. Tamaño Small (SM) - Off

Añadiendo el modificador .toggle--sm en el contenedor padre.

4. Tamaño Small (SM) - On

5. Estado de Focus Visible

Simulación del estado activado por navegación de teclado. (Puedes tabular el primer ejemplo para ver el real).

6. Asociación Semántica de Etiqueta

Al usar un elemento <label> que envuelve todo el bloque, el click en el texto acciona de forma nativa el control, evitando la necesidad de JavaScript o divs simulados.

# Toggle

El Toggle (o *Switch*) es un componente de interfaz de usuario que permite alternar una configuración u opción entre dos estados mutuamente excluyentes (activado y desactivado), simulando el comportamiento de un interruptor físico.

Cuándo usarlo

- Para activar o desactivar características, ajustes de configuración o preferencias que deban aplicarse de inmediato al interactuar (por ejemplo, "Modo oscuro" o "Sincronización automática"). - Cuando la respuesta visual al cambio es instantánea, sin necesidad de pulsar un botón de "Guardar".

Cuándo no usarlo

- Dentro de formularios de registro largos donde el usuario debe pulsar "Guardar/Enviar" al final para que los cambios tengan efecto. (En esos casos, utiliza el componente genérico Checkbox). - Cuando hay más de dos opciones disponibles (usa Radio Buttons o Selects).

Diferencia conceptual con el Checkbox

Aunque técnicamente ambos representan un valor booleano (true/false), el Toggle sugiere una acción inmediata y radical (encender/apagar una capacidad del sistema), mientras que el Checkbox sugiere una selección o confirmación transaccional (ej: "Acepto los términos", "Seleccionar 3 elementos a borrar").

Construcción Semántica y Accesible

Visualmente, un Toggle se aleja mucho de los controles de navegador por defecto. Sin embargo, priorizando la accesibilidad universal y la robustez, este diseño no recurre a falsos <div> interactivos. En su lugar:
  1. La base real del componente es un input nativo <input type="checkbox" role="switch">.
  2. Todo el elemento está envuelto en una etiqueta <label>, lo que asocia automáticamente el texto descriptivo a la acción: hacer clic en el texto altera directamente el interruptor.
  3. El atributo nativo role="switch" traduce el significado exacto a los lectores de pantalla (anunciando explícitamente "Interruptor, encendido" en lugar de "Casilla de verificación, marcada").
  4. El input original se oculta visualmente pero permanece en el árbol de accesibilidad y es el receptor real del foco al tabular. La pseudoclase :focus-within en el contenedor transfiere ese foco visual al halo estandarizado para que resulte visible para la persona vidente.

Variantes y Tamaños

El componente se ofrece en dos escalas proporcionales estipuladas por Figma: - Default: Para la interfaz estándar. Altura de carril de 24px. - Small (SM): Para densidades de información mayores o tarjetas secundarias. Se logra añadiendo el modificador .toggle--sm en el contenedor padre. Altura de carril reducida a 18.9px, escalando además la distancia del pulgar y el tamaño tipográfico de su etiqueta.

Estados Incluidos

- Off (Apagado): Fondo neutro y círculo deslizante alineado a la izquierda. - On (Encendido): Ocurre de forma automática y puramente en CSS al marcarse el input asociado (:checked). El fondo pasa a contraste oscuro y se desliza el círculo a la derecha. - Focus: Halo exterior en azul de accesibilidad, invocado al iterar con tabulador o mediante clic persistente según el navegador.

HTML

<label class="toggle">
  <input type="checkbox" class="toggle__input" role="switch">
  <div class="toggle__control" aria-hidden="true">
    <div class="toggle__thumb"></div>
  </div>
  <span class="toggle__label">Etiqueta del toggle</span>
</label>