Pack for the trip de 4
Checklist with progress bar
Four tasks that fill a bar and update a counter as you tick them, with no JavaScript at all.
Settings
Code
<div class="uv-cpg"><ul><li><label><input type="checkbox"><span class="bx"><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">Passport</span></label></li><li><label><input type="checkbox"><span class="bx"><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">Phone charger</span></label></li><li><label><input type="checkbox"><span class="bx"><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">Sunglasses</span></label></li><li><label><input type="checkbox"><span class="bx"><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">Book the taxi</span></label></li></ul><p class="hd"><span class="ti">Pack for the trip</span><span class="ct"><span class="n"></span> <span>of 4</span></span></p><div class="br"><i></i></div></div>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
This compact checklist card counts finished tasks with CSS counters and fills its progress bar using the :has selector, so it needs no script. Each item is a native checkbox with a round tick, and completed tasks fade and get struck through. It suits packing lists, onboarding steps, launch checklists and habit trackers.
Edit the title with the text control and swap the four tasks in the HTML. The bar uses a gradient between both colors, and the title switches to the second color when everything is done, a quiet finish line.