Kreuz wird zum Haken
Die zwei Balken eines roten Kreuzes verschieben sich beim Anhaken und werden zu einem grünen Haken.
Einstellungen
Code
<label class="uv-cxm"><input type="checkbox"><span class="bx"><i class="a"></i><i class="b"></i></span>Ich nehme an der Veranstaltung teil</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
Eine Checkbox, die beide Antworten gleichzeitig zeigt, eignet sich gut für Ja-Nein-Fragen wie die Teilnahme an einem Event, eine Einladung annehmen oder einen Artikel als verfügbar markieren. Unangehakt zeigt sie ein weiches rotes Kreuz, angehakt bewegen, verkürzen und drehen sich dieselben Balken zu einem Haken, während sich die Kachel grün füllt.
Beide Farben sind anpassbar, etwa auf Markentöne oder neutrales Grau und Blau. Jeder Balken nutzt eine federnde Transition, die Verwandlung läuft so in beide Richtungen weich, ganz ohne Keyframes.