Check a mano alzada
Una casilla de trazo tembloroso donde el check se garabatea y el texto se subraya a boli.
Ajustes
Código
<label class="uv-csc"><input type="checkbox"><span class="bx"><svg viewBox="0 0 40 40" fill="none" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path class="sq" d="M6.5 7.8c8.6-1.1 17.9-1.6 26.6-.4.9 8.5 1 17.4.2 25.9-8.8.7-17.7.9-26.4.1C6 24.8 6.2 16.2 6.9 7.6"/><path class="ck" pathLength="1" d="M9 20.5c2.4 1.7 4.6 4.4 6.4 7.6 1.2-4.4 6.2-14.6 17.3-24.5M13.5 24.6c1.3.7 2.4 1.9 3 3"/></svg></span><span class="tx">Comprar pan<svg viewBox="0 0 100 10" preserveAspectRatio="none" aria-hidden="true"><path pathLength="1" d="M2 6c18-3 36-3 54-1s30 1 42-2"/></svg></span></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
Ver todos: CheckboxesDónde usarlo
No todas las interfaces tienen que parecer hechas a máquina. Esta casilla dibuja su caja con un trazo irregular, como en un cuaderno, después garabatea un check con un doble trazo rápido y subraya el texto con una línea suelta de bolígrafo. Encaja en listas de la compra, apps de diario, herramientas para el aula y marcas con personalidad manuscrita.
Por defecto usa azul de tinta, como un boli de toda la vida, y el color secundario define el subrayado. Los trazos son paths SVG animados con dash offset, así que se ven nítidos a cualquier tamaño y no necesitan JavaScript.