Huella para confirmar
Hay que mantener el dedo sobre la huella: el anillo se completa, las líneas se colorean y la opción queda confirmada.
Ajustes
Código
<div class="uvq02-fpr"><input type="checkbox" aria-label="Autorizar el pago"><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>Autorizar el pago</b><small><span class="a">Mantén pulsado</span><span class="c">Confirmado</span></small></span></div>Prompt para IA
Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.
Más en Checkboxes
Ver todos: CheckboxesDónde usarlo
Este checkbox pide un gesto a propósito. Al mantener pulsada la huella, un anillo de progreso se llena mientras las líneas se colorean del centro hacia fuera; si sueltas antes, se cancela. Cuando el anillo se cierra aparece una insignia con un check y la pista cambia a confirmado. Con teclado basta Espacio o Intro. Encaja en pagos, borrados, consentimientos y acciones que no deben ocurrir sin querer.
El color principal mueve el anillo, las líneas y la insignia; el secundario, el disco suave detrás de la huella. La pulsación dura un segundo a velocidad normal y el control de velocidad la acorta o la alarga según lo seria que sea la acción.