HTML + CSSCheckboxes

Tarea que se tacha

Una fila de lista de tareas: al marcar el círculo, una línea tacha el texto y lo atenúa.

Ajustes

16px
1x

Código

<label class="uv-ct"><input type="checkbox"><span><svg viewBox="0 0 24 24"><path d="M5 12.5l4.5 4.5L19 7.5" pathLength="1"/></svg></span><em>Comprar leche</em></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 checkbox de lista de tareas de toda la vida: marcas el círculo y una línea tacha la tarea mientras el texto se apaga. Encaja en una app de la compra, en la checklist de una organizadora de bodas, en los ingredientes de una receta que vas siguiendo o en las tareas de un tablero de proyecto pequeño.

Mantén cada tarea en una sola línea; el tachado pasa por el centro del texto y, si se parte en dos, solo quedaría tachado a medias. Apila varias filas con un poco de separación y ya tienes una lista que funciona.