Swipe to complete row
A list row you check by dragging it to the right and uncheck by dragging left, or with the arrow keys.
Settings
Code
<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>Done</span><span class="r">Undo</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>Reply to Marta</b><small aria-hidden="true">Swipe to check</small></span><span class="tm" aria-hidden="true">09:40</span></span></label>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Checkboxes
See all CheckboxesWhere to use it
Borrowed from mail and task apps, this checkbox is a whole list row with a status circle, a title, a hint and a time. Dragging it to the right reveals a green done panel and checks it, dragging left reveals undo and unchecks it, and a simple tap toggles it too. Arrow keys, Space and Enter work from the keyboard. It suits to-do lists, inboxes, delivery apps and mobile dashboards.
The main color is the done panel and the tick, the secondary color the undo side. The swipe threshold is about a third of the row width, so it feels intentional on phones without being hard to reach on desktop.