Generador de interruptor CSS (toggle switch)

Cómo funciona

Escriba en el panel izquierdo el texto que acompaña al interruptor, por ejemplo "Activar notificaciones". A la derecha aparecen un bloque <style> y un bloque <label>; péguelos en su página y tendrá un interruptor de encendido y apagado que funciona sin JavaScript. Debajo hay una casilla de verificación real: invisible pero enfocable. Se alcanza con la tecla Tab, se cambia con la barra espaciadora, un lector de pantalla dice "activado/desactivado" y el valor se envía con el formulario. Con 52 píxeles de ancho, el interruptor mide 30 píxeles de alto y el botón blanco se desplaza 22 píxeles a la derecha al encenderse; la línea de resultado muestra esas medidas. Escriba el color de su marca en HEX. El estilo de casilla personalizada convierte la misma estructura en un cuadro con palomita; si elige un color claro, la palomita se dibuja oscura para que se vea. Descargar guarda una vista previa PNG de los dos estados.

Esta herramienta también se busca como generador interruptor css, toggle switch css, checkbox personalizado css, switch css.

¿Qué es Interruptor (toggle switch)?

Un interruptor, o toggle switch, es el botón deslizante de encendido y apagado que se conoce por los ajustes del teléfono. HTML no tiene un elemento propio para él, así que casi siempre se trata de una casilla de verificación con otro aspecto gracias al CSS. La persona espera que el cambio se aplique al momento, sin un botón Guardar aparte.

¿Qué es :focus-visible?

:focus-visible es un selector de CSS que se aplica cuando un elemento recibe el foco desde el teclado, o de otra forma en la que un anillo de foco resulta útil. Con un clic de ratón la mayoría de los navegadores no lo aplica. Así, quien usa teclado ve el anillo y quien usa ratón no ve un marco innecesario. Compatible desde Chrome 86, Firefox 85 y Safari 15.4.

¿Qué diferencia hay entre casilla e interruptor?

En el código los dos son el mismo <input type="checkbox">; la diferencia está en el aspecto y en lo que prometen. Una casilla marca una elección que normalmente se envía con un botón al final de un formulario. Un interruptor enciende o apaga un ajuste y avisa que el cambio vale de inmediato. Para los lectores de pantalla, el interruptor lleva role="switch" y la casilla no; esta herramienta sigue esa regla en ambos estilos.

Cuidado: display:none saca la casilla del teclado

Muchos ejemplos en internet ocultan la casilla real con display:none o visibility:hidden. A la vista no cambia nada, pero el campo también desaparece del orden de tabulación y de los lectores de pantalla: con el ratón el interruptor funciona, con el teclado o un lector de pantalla no. Esta herramienta oculta la casilla con opacity:0 y 1 píxel de tamaño: es invisible pero sigue siendo accesible.

La segunda trampa es el indicador de foco. Escribir outline:none sin nada más deja perdida a la persona que usa el teclado. El código generado incluye una regla :focus-visible: al hacer clic con el ratón no aparece el anillo, con el teclado aparece en el color que eligió.

¿Interruptor o casilla?

Los dos guardan el mismo valor de encendido y apagado, pero prometen cosas distintas:

• El ajuste se aplica al momento (modo oscuro, notificaciones) → interruptor
• La elección se envía con un formulario y un botón Guardar (acepto los términos) → casilla
• Se pueden elegir varios elementos de una lista → casilla
• Debe parecer un ajuste de aplicación móvil → interruptor redondo
• Interfaz sobria con bordes rectos → interruptor cuadrado

Preguntas frecuentes

¿De verdad funciona sin JavaScript?

Sí. El cambio lo hace la casilla propia del navegador; el CSS solo cambia el color y la posición del botón según :checked. Si algo debe pasar al cambiar el valor, como guardar el ajuste, agregue su propio evento de JavaScript al campo.

¿Para qué sirve role="switch"?

Indica a los lectores de pantalla que el control es un interruptor de encendido y apagado y no una casilla: la persona escucha "desactivado" en lugar de "no marcado". El estilo de casilla no agrega ese rol, porque ahí el elemento sí es una casilla.

¿Puedo usar varios interruptores en una página?

Sí. Agregue el bloque <style> una sola vez y copie el bloque <label> las veces que necesite, cambiando el texto. Agregue checked al campo del interruptor que debe empezar encendido.

¿Qué guarda el botón Descargar?

Una vista previa PNG con los estados apagado y encendido, uno arriba del otro, útil para aprobar un diseño o documentarlo. Para el código, use Copiar el resultado.