Closing circuit checkbox
A circuit board with a lever switch: checking closes it, current runs along the traces and the LED lights up.
Settings
Code
<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>Connect the sensor</label>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Checkboxes
See all CheckboxesWhere to use it
This checkbox is a tiny printed circuit board in inline SVG, with gold traces, a battery, mounting holes and silkscreen labels. Checking it swings the lever switch shut, sends dashes of current running along the traces and lights the LED with a glow. Hover and press move the lever partway. It fits IoT dashboards, hardware product pages, maker tools and settings that connect a device.
The main color is the current and the LED, the secondary color the copper traces and pads. Rename the silkscreen labels to match your component names, and use a dark page so the glow of the LED stands out.