Forms

Scribble strike checklist

A task list where checking a row draws a wobbling hand-drawn line across the label, and unchecking retracts it.

Draft the release notesSync with design on card spacingPing legal about the updated termsMerge the flaky checkout test fix

Using Scribble strike checklist

A task list where checking a row draws a wobbling hand-drawn line across the label, and unchecking retracts it.

Try the live preview with a pointer and keyboard, then check focus visibility and the narrow layout in your own page. Use the plate number or slug when asking your coding agent to fetch this component.

Props: strokeMs, accent, wobble, dimCompleted

Which frameworks are available?

The catalog lists these versions: react, vue, svelte, astro, html. The live preview on this page runs React.

How do I access the implementation?

The code, framework versions and installation commands are available in the workbench above.

Connect your agent

Nearby

2341Drag reorder checklistData displayA checklist whose rows can be dragged into a new order, with checked items drawing an animated check and a strikethrough.

1925Branded Code PanelFormsA centred verification panel under a small brand lockup, where a rejected code shakes the row once, clears it and hands focus back to the first box.

1938Code cover cardFormsA wide verification card with the code form on one side and a cover panel on the other that fills a progress bar as digits are entered.

1965Control BenchFormsA page wide bench of working form parts side by side: a payment fieldset, inline input add-ons, a prompt composer, grouped buttons and a quiet empty state.

1957Field with status iconFormsA labeled input whose trailing edge shows a small check or warning icon that fades in the moment the field's validity changes, without shifting the layout.

1964Focus Guard FormFormsA form that, on a failed submit, cancels the submission, moves keyboard focus straight to the first invalid field, and announces the problem for screen reader users.