Hold-to-confirm fingerprint
You hold a finger on the fingerprint: the ring fills, the ridges light up one by one and the option is confirmed.
Settings
Code
<div class="uvq02-fpr"><input type="checkbox" aria-label="Authorize payment"><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>Authorize payment</b><small><span class="a">Press and hold</span><span class="c">Confirmed</span></small></span></div>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Checkboxes
See all CheckboxesWhere to use it
This checkbox asks for a deliberate gesture. Pressing and holding the fingerprint fills a progress ring around it while the ridges colour in from the centre outwards; letting go early cancels. When the ring closes, a badge with a tick pops in and the hint changes to confirmed. Keyboard users toggle it with Space or Enter. It fits payments, deletions, consent and other actions that should not happen by accident.
The main color drives the ring, ridges and badge, the secondary color the soft disc behind the print. The hold lasts one second at normal speed, and the speed slider shortens or stretches it to match how serious the action is.