Checkbox mit gezeichnetem Haken
Beim Ankreuzen federt die Box kurz auf und der Haken zeichnet sich Strich für Strich.
Einstellungen
Code
<label class="uv-cd"><input type="checkbox" checked><span><svg viewBox="0 0 24 24"><path d="M5 12.5l4.5 4.5L19 7.5" pathLength="1"/></svg></span>Ich stimme zu</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 animierte Checkbox passt zu Momenten, in denen jemand etwas bestätigt: „Ich akzeptiere die AGB“ bei der Registrierung, die Newsletter-Einwilligung unter einem Kontaktformular oder die Datenschutz-Box einer Buchung. Die Box füllt sich mit deiner Hauptfarbe, federt einmal, und der Haken entsteht wie ein schneller Stiftstrich.
Darunter steckt eine echte Checkbox, das Formular bekommt den Wert also ganz normal. Halte die Beschriftung kurz, die ganze Zeile ist klickbar. Der Effekt ist dezent genug, um ihn auf einer Einstellungsseite mehrfach zu verwenden, ohne dass er nervt.