HTML + CSSCheckboxes
Check de dos trazos
Primero se dibuja el trazo corto y luego el largo, como un check hecho a mano con bolígrafo.
Ajustes
16px
1x
Código
<label class="uv-ck2k"><input type="checkbox"><span class="bx"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round"><path class="p1" d="M5 12.5L10 17.5" pathLength="1"/><path class="p2" d="M10 17.5L19.5 7.5" pathLength="1"/></svg></span>Verificado</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
Dibujado en dos trazos, el check parece hecho a mano y encaja con listas que la gente se toma en serio: los pasos de bienvenida de una herramienta nueva, el «He leído las instrucciones» antes de un examen online o la lista previa al viaje en una app de reservas. Transmite cuidado, no espectáculo. Un checkbox a mano en CSS.
Como el cuadro lleva un tinte suave y no un color sólido, sigue siendo legible en páginas cargadas. Si tu color de acento es muy claro, oscurécelo un poco para que el check tenga contraste.