KQ-1169 · INK/CHECKLIST

Ink Checklist

A checklist on a notepad where each tick is drawn by a pen: a filled outline rebuilt every frame from a stroke with pressure — light where the nib lands, heaviest at the corner, lifting to a hairline as it flicks — on springs.flick, followed by a wavering pen line through the words at the pen's own pace, struck line by line when they wrap. Unticking rubs both out with a small eraser that leaves a fading smudge, and a margin bar fills with ink to the share done on springs.glide. Every item is a native checkbox in a fieldset, so Tab reaches each box and Space ticks it exactly as a press does.

KQ-1169 · INK/CHECKLIST

2 of 5 done · next: Pack spare batteries

Open it on the Atelier stage

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/ink-checklist

Props

label: string; default —; What the list is for. The fieldset's legend.
items: InkChecklistItem[]; default —; The items: { id, label, disabled? }.
value / defaultValue: string[]; default []; The ids of the ticked items, controlled or initial.
onValueChange: (value: string[]) => void; default —; Fires from the press or key that ticked or unticked an item, with every ticked id in list order.
ink: "blue" | "black" | "red"; default "blue"; The pen.
strike: boolean; default true; Strike an item's words through when it is ticked.
wobble: number; default 0.4; How unsteady the hand is, 0 to 1: the boxes' corners, the tick's path and the strike's waver.
name: string; default —; Form field name; each ticked item submits its id under it.
hint: string; default —; Helper text under the legend.
error: string; default —; An error from the host; replaces the hint.
required: boolean; default false; Every item must be ticked before the form submits; a refused submit says how many are left.
disabled: boolean; default false; Turns the whole list off.
sound: boolean; default false; Play the pen's tick and scratch and the eraser's rub. Only the visitor's own ticks are heard.
className: string; default —; Classes for the pad.

Prop	Type	Default	Description
label	string	—	What the list is for. The fieldset's legend.
items	InkChecklistItem[]	—	The items: { id, label, disabled? }.
value / defaultValue	string[]	[]	The ids of the ticked items, controlled or initial.
onValueChange	(value: string[]) => void	—	Fires from the press or key that ticked or unticked an item, with every ticked id in list order.
ink	"blue" \| "black" \| "red"	"blue"	The pen.
strike	boolean	true	Strike an item's words through when it is ticked.
wobble	number	0.4	How unsteady the hand is, 0 to 1: the boxes' corners, the tick's path and the strike's waver.
name	string	—	Form field name; each ticked item submits its id under it.
hint	string	—	Helper text under the legend.
error	string	—	An error from the host; replaces the hint.
required	boolean	false	Every item must be ticked before the form submits; a refused submit says how many are left.
disabled	boolean	false	Turns the whole list off.
sound	boolean	false	Play the pen's tick and scratch and the eraser's rub. Only the visitor's own ticks are heard.
className	string	—	Classes for the pad.