Handgezeichnete Checkbox
Ein krakelig gezeichnetes Kästchen, in das der Haken gekritzelt und das Label locker unterstrichen wird.
Einstellungen
Code
<label class="uv-csc"><input type="checkbox"><span class="bx"><svg viewBox="0 0 40 40" fill="none" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path class="sq" d="M6.5 7.8c8.6-1.1 17.9-1.6 26.6-.4.9 8.5 1 17.4.2 25.9-8.8.7-17.7.9-26.4.1C6 24.8 6.2 16.2 6.9 7.6"/><path class="ck" pathLength="1" d="M9 20.5c2.4 1.7 4.6 4.4 6.4 7.6 1.2-4.4 6.2-14.6 17.3-24.5M13.5 24.6c1.3.7 2.4 1.9 3 3"/></svg></span><span class="tx">Brot kaufen<svg viewBox="0 0 100 10" preserveAspectRatio="none" aria-hidden="true"><path pathLength="1" d="M2 6c18-3 36-3 54-1s30 1 42-2"/></svg></span></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
Nicht jede Oberfläche muss maschinell wirken. Diese Checkbox zeichnet ihr Kästchen mit einem unregelmäßigen Pfad wie in einem Notizbuch, kritzelt dann mit schnellem Doppelstrich einen Haken hinein und unterstreicht das Label mit einer lockeren Stiftlinie. Passt zu Einkaufslisten, Journal-Apps, Unterrichtstools und Marken mit handschriftlichem Charakter.
Standard ist Tintenblau wie beim Kugelschreiber, die zweite Farbe färbt die Unterstreichung. Die Striche sind SVG-Pfade mit animiertem Dash-Offset, bleiben also in jeder Größe scharf und brauchen kein JavaScript.