KQ-535 · TASK/TICK

Task Tick

A checklist that keeps its order honest. Checking draws a line through the label with pathLength on flick — the strike is the acknowledgement, so it lands before anything moves — and only after a beat does the row sink into the done section, a layout reorder on glide where the row travels rather than blinking from one place to another; unchecking floats it back and the progress pill counts on snap. The beat is what keeps a fast run of ticks pointing at the rows the reader meant. Every checkbox is a real input, so Tab reaches each one and Space toggles it, and under reduced motion the strike appears complete and rows move without springs, because the order is the information.

KQ-535 · TASK/TICK

Fernworks · 2 of 5 done

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/task-tick

Props

items: { id: string; label: string; done: boolean }[]; default —; The tasks, in the order they should read while open. Done tasks sort to the bottom a beat after they are ticked.
onToggle: (id: string, done: boolean) => void; default —; Fires from the checkbox that changed, with the value it is changing to.
label: string; default —; List label. Names the list and sits beside the progress pill.

Prop	Type	Default	Description
items	{ id: string; label: string; done: boolean }[]	—	The tasks, in the order they should read while open. Done tasks sort to the bottom a beat after they are ticked.
onToggle	(id: string, done: boolean) => void	—	Fires from the checkbox that changed, with the value it is changing to.
label	string	—	List label. Names the list and sits beside the progress pill.