HTML + CSSCheckboxen

Häkchen in zwei Strichen

Erst zeichnet sich der kurze Strich, dann der lange. Wie ein Haken, den man mit dem Stift setzt.

Einstellungen

16px
1x

Code

<label class="uv-ck2k"><input type="checkbox"><span class="bx"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round"><path class="p1" d="M5 12.5L10 17.5" pathLength="1"/><path class="p2" d="M10 17.5L19.5 7.5" pathLength="1"/></svg></span>Verifiziert</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

Der Haken in zwei Strichen wirkt handgeschrieben und passt zu Checklisten, die man ernst nimmt: die Onboarding-Schritte eines neuen Tools, „Ich habe die Hinweise gelesen“ vor einer Online-Prüfung oder die Reise-Checkliste in einer Buchungs-App. Das wirkt sorgfältig statt effekthascherisch. Eine handgezeichnete Checkbox in CSS mit zart getönter Box.

Da die Box nur leicht eingefärbt ist und nicht vollflächig, bleibt sie auch auf vollen Seiten gut lesbar. Ist deine Akzentfarbe sehr hell, dunkle sie etwas ab, damit der Haken genug Kontrast hat.