HTML + CSSCheckboxes
Checkbox con trazo y rebote
El check se dibuja solo y el cuadro da un pequeño rebote, así el clic se nota de verdad.
Ajustes
16px
1x
Código
<label class="uv-ck2d"><input type="checkbox"><span class="bx"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5" pathLength="1"/></svg></span>Acepto los términos</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
Es la casilla que hay que marcar antes de seguir: el «Acepto los términos» de un formulario de registro, el consentimiento de privacidad bajo un formulario de contacto o la confirmación de edad de una tienda de vinos. El trazo y el rebote corto dejan claro que el clic ha funcionado. Un checkbox animado en HTML y CSS.
Úsalo en una o dos casillas por formulario, no en una lista de veinte opciones, porque tanto rebote acaba cansando. Pon el color de acento igual que el de tu botón principal y la casilla y el envío parecerán un mismo paso.