Fila para deslizar y completar
Una fila de lista que se marca arrastrándola a la derecha y se desmarca hacia la izquierda, también con las flechas.
Ajustes
Código
<label class="uvq02-swp"><input type="checkbox"><span class="bg" aria-hidden="true"><span class="l"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5" pathLength="1"/></svg>Hecho</span><span class="r">Deshacer</span></span><span class="fg"><span class="dt" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5" pathLength="1"/></svg></span><span class="tx"><b>Responder a Marta</b><small aria-hidden="true">Desliza para marcar</small></span><span class="tm" aria-hidden="true">09:40</span></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
Tomado de las apps de correo y tareas, este checkbox es una fila de lista con círculo de estado, título, una pista y la hora. Al arrastrarla a la derecha aparece un panel verde y se marca; hacia la izquierda aparece deshacer y se desmarca, y un toque también la cambia. Con teclado funcionan las flechas, Espacio e Intro. Encaja en listas de tareas y bandejas de entrada.
El color principal es el panel de hecho y el check; el secundario, el lado de deshacer. El umbral del gesto es más o menos un tercio del ancho de la fila, así que en el móvil se siente intencionado sin costar en el ordenador.