HTML + CSSCheckboxen

Checkbox mit Häkchen und Federeffekt

Das Häkchen zeichnet sich selbst, die Box federt kurz nach. So spürt man, dass der Klick angekommen ist.

Einstellungen

16px
1x

Code

<label class="uv-ck2d"><input type="checkbox"><span class="bx"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5" pathLength="1"/></svg></span>Ich akzeptiere die Bedingungen</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

Das ist die Checkbox, die man anklicken muss, bevor es weitergeht: „Ich akzeptiere die AGB“ bei der Registrierung, die Datenschutz-Einwilligung unter einem Kontaktformular oder die Altersabfrage in einem Weinshop. Der gezeichnete Haken und das kurze Federn bestätigen den Klick deutlich. Eine animierte Checkbox in reinem HTML und CSS.

Setz sie ein- oder zweimal pro Formular ein, nicht bei zwanzig Optionen untereinander, sonst wird das Federn anstrengend. Nimm als Akzentfarbe die Farbe deines Haupt-Buttons, dann wirken Zustimmung und Absenden wie ein einziger Schritt.