Glühbirnen-Checkbox
Eine Glühbirne in Umrisslinie, die beim Anhaken warm aufleuchtet und kleine Strahlen aussendet.
Einstellungen
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>Wohnzimmerlicht</label>Prompt für KI
Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.
Mehr aus Checkboxen
Alle ansehen: CheckboxenWofür du ihn nutzen kannst
Smart-Home-Dashboards, Raumbuchungstools und Fokusmodus-Einstellungen haben alle ein Licht, das an oder aus ist, und diese Checkbox nimmt das wörtlich. Die Birne füllt sich mit der Hauptfarbe, der Glühfaden wird weiß, fünf kurze Strahlen springen darüber heraus und die Kachel dahinter leuchtet sanft in der zweiten Farbe.
Es ist eine normale Checkbox, eine Liste von Räumen oder Lampen kann also eine pro Zeile nutzen und als gewöhnliches Formular absenden. Warmes Gelb wirkt wie echtes Licht, kühles Weiß passt zu Produktivitätsfunktionen.