Checkbox mit Schloss
Ein Vorhängeschloss, dessen Bügel auf- oder zuschnappt. So sieht Sperren auch wirklich nach Sperren aus.
Einstellungen
Code
<label class="uv-ck2l"><input type="checkbox"><span class="bx"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path class="sh" d="M8 10V7a4 4 0 0 1 8 0v3"/><rect class="bd" x="5" y="10" width="14" height="10" rx="2.5"/><circle class="kh" cx="12" cy="15" r="1.4" fill="currentColor" stroke="none"/></svg></span>Sperre aktiv</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
Wofür du ihn nutzen kannst
Ein Schloss sagt mehr als ein Haken, wenn es um Privatsphäre oder Schutz geht: „Album privat machen“ in einer Foto-App, eine Ebene in einem Design-Tool sperren oder einen Preis im Buchungsformular festhalten. Angehakt schließt sich das Schloss und füllt sich mit Farbe, abgewählt klappt der Bügel auf. Ein Sperr-Toggle aus HTML und CSS.
Formulier das Label als Zustand, etwa „Privat“ oder „Gesperrt“, nicht als Aktion. Dann ist klar, was das geschlossene Schloss bedeutet. Das Icon besteht aus Linien und bleibt in jeder Größe scharf.