HTML + CSSCheckboxes

Circuito que se cierra

Una placa de circuito con interruptor de palanca: al marcar se cierra, la corriente corre por las pistas y el LED se enciende.

Ajustes

16px
1x

Código

<label class="uvq02-pcb"><input type="checkbox"><span class="bx"><svg viewBox="0 0 72 36" aria-hidden="true"><rect class="bd" width="72" height="36" rx="3.5"/><circle class="ho" cx="4" cy="4" r="1.6"/><circle class="ho" cx="68" cy="4" r="1.6"/><circle class="ho" cx="4" cy="32" r="1.6"/><circle class="ho" cx="68" cy="32" r="1.6"/><g class="tr"><path d="M14 18H24"/><path d="M34 18H44V10H50"/><path d="M58 10H64V29H10V24"/></g><g class="cu"><path d="M14 18H24"/><path d="M34 18H44V10H50"/><path d="M58 10H64V29H10V24"/></g><rect class="bt" x="6" y="12" width="8" height="12" rx="1.2"/><text x="8" y="17">+</text><circle class="pa" cx="24" cy="18" r="2"/><circle class="pa" cx="34" cy="18" r="2"/><line class="lv" x1="24" y1="18" x2="34.5" y2="18"/><circle class="le" cx="54" cy="10" r="4"/><circle class="lh" cx="52.8" cy="8.8" r="1.1"/><text x="25" y="25.5">SW1</text><text x="51.5" y="19">D1</text></svg></span>Conectar el sensor</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.

Versión Markdown con todo el código, para asistentes de IA

Más en Checkboxes

Ver todos: Checkboxes

Dónde usarlo

Este checkbox es una pequeña placa de circuito impreso en SVG, con pistas doradas, una pila, agujeros de montaje y rótulos serigrafiados. Al marcarlo, la palanca del interruptor se cierra, la corriente corre por las pistas y el LED se enciende con su brillo. Al pasar el ratón la palanca se mueve a medias. Encaja en paneles de IoT, productos de hardware y ajustes para conectar un dispositivo.

El color principal es la corriente y el LED; el secundario, las pistas de cobre y los pads. Cambia los rótulos serigrafiados por los nombres de tus componentes y úsalo sobre una página oscura para que destaque el brillo del LED.