Generador de interruptores toggle CSS
Diseña un interruptor de encendido/apagado sin JavaScript: elige el tamaño, los colores, la forma, la perilla y la animación, haz clic en la vista previa en vivo para probarlo y copia un HTML y un CSS limpios basados en una casilla de verificación real, para que funcione con formularios, teclados y lectores de pantalla.
Última actualización:
Haz clic, toca o usa Tab + Espacio para probar los interruptores.
Tamaño y forma
Animación
Colores
Cómo usar Generador de interruptores toggle CSS
- Elige un ajuste predefinido como Estilo iOS, Cuadrado o Con texto ON/OFF, o empieza desde el predeterminado.
- Ajusta el tamaño y la forma: ancho, alto, relleno de la perilla y redondeo.
- Elige los colores del carril apagado y encendido, de la perilla y del texto interior.
- Afina la animación: duración, curva de aceleración y un estiramiento opcional al pulsar.
- Haz clic en los interruptores de la vista previa para probarlos y luego copia el HTML y el CSS en tu página.
Cómo funciona el interruptor toggle en CSS puro
El interruptor es un <input type="checkbox"> normal dentro de un <label>. Al hacer clic en cualquier parte del label se marca o desmarca la casilla, y el CSS reacciona a su estado:
| Parte | Función |
|---|---|
input[type=checkbox] | Guarda el estado activado/desactivado; oculto visualmente, pero puede recibir el foco y se envía con los formularios |
role="switch" | Indica a los lectores de pantalla que anuncien "interruptor, activado/desactivado" en lugar de "casilla, marcada" |
.switch-track | El carril de color; input:checked + .switch-track cambia su color |
.switch-track::before | La perilla; se mueve con transform: translateX(), que se anima con fluidez en la GPU |
.switch-track::after | Texto ON/OFF opcional dentro del carril |
:focus-visible | Dibuja un anillo de foco solo para los usuarios de teclado |
El recorrido de la perilla es ancho del carril − tamaño de la perilla − 2 × relleno, y el tamaño de la perilla es alto del carril − 2 × relleno. El generador los calcula por ti para que la perilla llegue siempre exactamente al borde.
Lista de comprobación de accesibilidad
- Mantén una etiqueta de texto visible o, al menos, un
aria-labelen el input cuando la etiqueta esté oculta. - Asegúrate de que los colores del carril activado y desactivado se diferencien lo suficiente del fondo de la página (WCAG 1.4.11 pide un contraste de 3:1 para los componentes de interfaz) y no dependas solo del color; la posición de la perilla también muestra el estado.
- Los interruptores toggle deben actuar de inmediato. Si un cambio necesita guardarse, una casilla de verificación es el control más claro.
- El CSS incluye
prefers-reduced-motion, así que la perilla salta en lugar de deslizarse para los usuarios que desactivan las animaciones.
Preguntas frecuentes
¿Cómo se hace un interruptor toggle solo con CSS?
Usa una casilla de verificación real dentro de un label, oculta la casilla visualmente (no con display: none, para que siga pudiendo recibir el foco) y da estilo a un span hermano como carril, con un pseudoelemento ::before como perilla. El selector input:checked + span cambia el color del carril y mueve la perilla con transform: translateX(). Al hacer clic en el label se marca o desmarca la casilla, así que no hace falta JavaScript.
¿Un interruptor toggle CSS es accesible?
Sí, si se basa en una casilla de verificación nativa. El código generado añade role="switch" para que los lectores de pantalla anuncien activado/desactivado, mantiene el input accesible con Tab y Espacio, muestra un anillo de foco con :focus-visible, tiene una etiqueta de texto (o aria-label) y desactiva la animación para los usuarios que prefieren movimiento reducido.
¿Cómo leo el valor del interruptor en un formulario o con JavaScript?
Es una casilla de verificación normal: dale al input un name y un value para enviarlo con un formulario, añade checked para que esté activado por defecto y lee input.checked o escucha el evento change en JavaScript.
¿Por qué no ocultar la casilla con display: none?
display: none y visibility: hidden eliminan el input del orden de tabulación y del árbol de accesibilidad, así que los usuarios de teclado y de lectores de pantalla no podrían usar el interruptor. En su lugar, el CSS generado lo hace transparente y de 1px.
¿Debo usar un interruptor o una casilla de verificación?
Usa un interruptor para ajustes que se aplican al instante, como activar las notificaciones. Usa una casilla de verificación cuando la elección se aplica después con un botón de envío o cuando los usuarios eligen varias opciones de una lista.
¿Cómo hago el interruptor más grande en móviles?
Cambia aquí el ancho y el alto (y el relleno de la perilla), o pon los valores dentro de una media query. Intenta que el área táctil sea de al menos 44 por 24 píxeles; toda la etiqueta, incluido el texto, es clicable.
¿Se prueban todas las herramientas de FreeToolCabin para comprobar su calidad y precisión?
Sí. Cada herramienta del sitio pasa pruebas automáticas en navegadores reales para comprobar que el resultado es correcto y que no hay errores. Si encuentras un fallo o tienes una sugerencia, escríbenos a [email protected] y lo revisaremos.