HTML + CSSToggles

Interruptor de pared

Una tecla basculante sobre su placa que se inclina al pulsarla y enciende un pequeño piloto.

Ajustes

16px
1x

Código

<label class="uv-twl"><input type="checkbox" role="switch"><span class="pl"><i class="led"></i><span class="rk"></span></span>Luz de la cocina</label>

Prompt para IA

Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.

Más en Toggles

Ver todos: Toggles

Dónde usarlo

Las apps de domótica suelen mostrar la misma píldora para cada aparato. Este toggle usa el objeto que todo el mundo conoce: una placa blanca con una tecla que se inclina al pulsarla, un piloto diminuto que se enciende y un brillo cálido que se extiende detrás. Va bien en controles de iluminación, escenas por habitación y paneles de casa inteligente.

Por debajo es un checkbox con rol de interruptor, así que las tecnologías de apoyo anuncian activado y desactivado. El color principal define el piloto y el brillo; un blanco frío puede representar un ventilador o la calefacción.