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
• Tamaños
• Accesibilidad

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 #

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 #

• No cambia 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