HTML + CSSCheckboxes
Light bulb checkbox
An outlined bulb that lights up with a warm glow and small rays when the switch is checked.
Settings
16px
1x
Code
<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>Living room light</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
Smart home dashboards, room booking tools and focus mode settings all have a light that can be on or off, and this checkbox makes that literal. The bulb fills with the main color, the filament turns white, five short rays pop out above it and the tile behind it glows softly in the second color.
It is a regular checkbox, so a list of rooms or lamps can use one per row and still submit as a normal form. Warm yellows feel like real light, while a cool white works well for productivity and focus features.