DESY

Sistema de Diseño del Gobierno de Aragón.

Interruptor

Un botón interruptor o toggle se emplea cuando se desea cambiar rápidamente entre dos estados excluyentes entre sí.

Índice de apartados de esta página

Variantes

Alternar iconos

Para mostrar y ocultar. Se suele utilizar como elemento de filtrado.

Conmutador (switch)

Se emplea cuando el resultado de la acción es inmediato y nos permite customizar estados. Siempre se deben incluir dos etiquetas de texto que expliquen claramente las dos opciones que presenta este interruptor (Por ejemplo: Activado/Desactivado).

Tamaños

Por defecto

Pequeño

No deben convivir en un mismo grupo componentes de diferentes tamaños.

Por defecto

Utilizar por defecto para cualquier tipo de situaciones y layouts. Siempre que sea posible se recomienda usar este tamaño por motivos de accesibilidad.

Pequeño

Se recomienda su uso cuando el elemento estándar es demasiado grande para el espacio donde debe de encajar, por ejemplo en tablas, en algunas cards, etc.

Accesibilidad

Cómo funciona

Sin cambio en el texto del botón, sólo cambia su estado visual. Necesita un elemento externo con un id para referenciarlo con su aria-controls, con el objetivo de mostrar/ocultar ese elemento externo.

Cuando su objetivo es mostrar un contenido oculto, necesita un aria-expanded. En el caso de que tenga apariencia de switch, el elemento necesita role=switch, aria-checked y un aria-labelledby que apunte a un elemento externo.

Basado en el patrón switch de W3C

Qué tener en cuenta
Qué usar Dónde Función
aria-labelledby Dentro del parámetro Nunjucks attributes Apunta al elemento externo que describe la acción del componente.