Checkbox que se dibuja
Al marcarla, la casilla da un pequeño bote y el check se dibuja trazo a trazo.
Ajustes
Código
<label class="uv-cd"><input type="checkbox" checked><span><svg viewBox="0 0 24 24"><path d="M5 12.5l4.5 4.5L19 7.5" pathLength="1"/></svg></span>Acepto</label>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
Dónde usarlo
Esta checkbox animada encaja en los momentos en los que alguien acepta algo: el «Acepto las condiciones» de un registro, el consentimiento de la newsletter bajo un formulario de contacto o la casilla de privacidad de una reserva. La caja se llena con tu color, rebota una vez y el check se traza como un rápido golpe de boli.
Debajo hay una casilla de verdad, así que el formulario recibe el valor como siempre. Deja el texto corto: toda la línea es clicable. El efecto es lo bastante sutil como para repetirlo varias veces en una página de ajustes sin que canse.