HTML + CSSCheckboxen

Checkbox mit Konfetti

Beim Ankreuzen fliegen acht kleine Partikel heraus, eine Mini-Feier fürs Erledigen.

Einstellungen

16px
1x

Code

<label class="uv-cb"><input type="checkbox"><span><i style="--i:0"></i><i style="--i:1"></i><i style="--i:2"></i><i style="--i:3"></i><i style="--i:4"></i><i style="--i:5"></i><i style="--i:6"></i><i style="--i:7"></i><svg viewBox="0 0 24 24"><path d="M5 12.5l4.5 4.5L19 7.5" pathLength="1"/></svg></span>Erledigt</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

Diese Checkbox feiert mit. Sie passt zu dem Moment, in dem jemand etwas abschließt, das ihm wichtig ist: die tägliche Gewohnheit in einem Habit-Tracker abhaken, den letzten Schritt einer Onboarding-Checkliste erledigen oder eine Lektion im Sprachkurs abschließen. Acht Punkte in deinen zwei Farben schießen heraus, während sich der Haken zeichnet.

Heb sie dir für Erfolge auf. In einem langen Formular mit zehn Checkboxen nervt das Konfetti spätestens beim dritten Mal. Die Partikel verlassen die Box, gib ihr also etwas Luft, vor allem wenn mehrere Checkboxen dicht untereinander stehen.