HTML + CSSCheckboxes

Bombilla que se enciende

Una bombilla de contorno que se ilumina con un brillo cálido y pequeños rayos al marcarla.

Ajustes

16px
1x

Código

<label class="uv-cbl"><input type="checkbox"><span class="bx"><svg viewBox="0 0 32 32" fill="none" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><g class="ry"><path d="M16 2.5v2.6" style="transform:rotate(-60deg)"/><path d="M16 2.5v2.6" style="transform:rotate(-30deg)"/><path d="M16 2.5v2.6" style="transform:rotate(0deg)"/><path d="M16 2.5v2.6" style="transform:rotate(30deg)"/><path d="M16 2.5v2.6" style="transform:rotate(60deg)"/></g><path class="gl" d="M16 7.5a7.5 7.5 0 0 0-4.2 13.7c.8.6 1.2 1.4 1.2 2.3V24h6v-.5c0-.9.4-1.7 1.2-2.3A7.5 7.5 0 0 0 16 7.5z"/><path class="ft" d="M14 18.5l2 1.5 2-1.5"/><path class="bs" d="M13 26.3h6M14 28.6h4"/></svg></span>Luz del salón</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 Checkboxes

Ver todos: Checkboxes

Dónde usarlo

Los paneles de domótica, las herramientas para reservar salas y los ajustes de modo concentración tienen una luz que se enciende o se apaga, y esta casilla lo hace literal. La bombilla se llena del color principal, el filamento se vuelve blanco, cinco rayos cortos asoman por arriba y el fondo brilla suave con el secundario.

Es un checkbox normal, así que una lista de habitaciones o lámparas puede usar uno por fila y enviarse como cualquier formulario. Los amarillos cálidos parecen luz de verdad; un blanco frío va bien para funciones de productividad.