Fingerabdruck zum Bestätigen
Man hält den Finger auf den Abdruck: Der Ring füllt sich, die Linien färben sich nacheinander und die Option ist bestätigt.
Einstellungen
Code
<div class="uvq02-fpr"><input type="checkbox" aria-label="Zahlung freigeben"><span class="pd" aria-hidden="true"><svg class="rg" viewBox="0 0 48 48"><circle cx="24" cy="24" r="22.5" pathLength="1"/></svg><svg class="fp" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path style="--i:0" d="M12 10a2 2 0 0 0-2 2c0 1.02-.1 2.51-.26 4"/><path style="--i:1" d="M14 13.12c0 2.38 0 6.38-1 8.88"/><path style="--i:2" d="M9 6.8a6 6 0 0 1 9 5.2v2"/><path style="--i:3" d="M5 19.5C5.5 18 6 15 6 12a6 6 0 0 1 .34-2"/><path style="--i:4" d="M8.65 22c.21-.66.45-1.32.57-2"/><path style="--i:5" d="M17.29 21.02c.12-.6.43-2.3.5-3.02"/><path style="--i:6" d="M2 12a10 10 0 0 1 18-6"/><path style="--i:7" d="M21.8 16c.2-2 .131-5.354 0-6"/><path style="--i:8" d="M2 16h.01"/></svg><span class="ok"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5" pathLength="1"/></svg></span></span><span class="tx" aria-hidden="true"><b>Zahlung freigeben</b><small><span class="a">Gedrückt halten</span><span class="c">Bestätigt</span></small></span></div>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
Diese Checkbox verlangt eine bewusste Geste. Wer den Fingerabdruck gedrückt hält, füllt einen Fortschrittsring, während sich die Linien von innen nach außen färben; zu frühes Loslassen bricht ab. Schließt sich der Ring, springt ein Abzeichen mit Haken auf und der Hinweis wechselt auf bestätigt. Per Tastatur geht es mit Leertaste oder Enter. Passt zu Zahlungen, Löschvorgängen, Einwilligungen und Aktionen, die nicht aus Versehen passieren sollen.
Die Hauptfarbe steuert Ring, Linien und Abzeichen, die Zweitfarbe die weiche Scheibe hinter dem Abdruck. Das Halten dauert bei normalem Tempo eine Sekunde, und der Tempo-Regler verkürzt oder verlängert es je nach Gewicht der Aktion.