ns-ui / validation-error-summary
Request a quote — clear
0 opensubmit with the defaults to fail — pick an item to see the leader line, fix a field to strike it off
ns-ui
Failed-submit error handling as a contractor's punch list: a numbered defect summary pins to the top of the form, a hairline SVG leader line links each entry to its field on selection, and fixing a field strikes it through and counts down to self-dismissal.
Use when a failed submit where the errors must gather into one focusable numbered list at the top instead of scattering as red borders down the form, each entry a real anchor that leader-lines to its field and strikes through as it is fixed; it is the wrong choice for validating one field live as it is typed (password-strength-tide does that for a password) and for gating a multi-step flow where the step itself should refuse to advance (wizard-canal-lock).
Install
npx shadcn add https://design.helpmarq.comns-ui / validation-error-summary
submit with the defaults to fail — pick an item to see the leader line, fix a field to strike it off
| Prop | Type | Default | Description |
|---|---|---|---|
| fields | PunchListField[] | — | — |
| title? | string | — | — |
| submitLabel? | string | — | — |
| onSubmit? | (values: Record<string, string>) => void | — | — |
| className? | string | — | — |