Error summary
Summarizes invalid fields and moves focus to their inputs.
Preview
In action
When to use
Use it for
- Failed form submissions with errors across several fields.
Not for
- Validation on every keystroke; keep inline field feedback nearby.
Install
Three ways in. They share one source, so the pixels match whichever you pick.
1. Import the package
npm install @noorddev/vlak-react
// once, next to your app's root
import "@noorddev/vlak-react/css";
import { ErrorSummary } from "@noorddev/vlak-react";Precompiled React and one stylesheet. No compiler to configure. Per-component imports work too: @noorddev/vlak-react/components/error-summary.
2. Vendor the source
npx @noorddev/vlak-cli add error-summary
The StyleX leaf lands in components/vlak/, for your own compiler to own. See StyleX.
3. Through shadcn
npx shadcn add https://vlak.dev/r/error-summary.json
The same registry item, installed by shadcn's CLI.
CSS only
<link rel="stylesheet" href="node_modules/@noorddev/vlak/css/vlak.css" />
No React. Link vlak.css and use the markup and classes below.
React
import { ErrorSummary } from "@noorddev/vlak-react";
<ErrorSummary errors={[{ id: "email", message: "Enter an email address" }]} />Props
ErrorSummary
A form-wide summary linking each message to the field that needs attention.
| Prop | Type | Default | Description |
|---|---|---|---|
errorsrequired | FormError[] | ||
title | ReactNode | "Check the following fields" | |
autoFocus | boolean | false | Move focus to the summary after a failed submission, not while typing. |
Also accepts Omit<HTMLAttributes<HTMLDivElement>, "title">.
Keyboard
| Keys | Does |
|---|---|
| Tab, Enter, Space | Tab reaches each field link; Enter focuses the corresponding input. |
Accessibility
- Uses role alert with a heading. autoFocus is opt-in for failed submission, not continuous validation.
Markup
<div class="rs-error-summary" role="alert" aria-labelledby="error-title" tabindex="-1"><h2 id="error-title" class="rs-error-summary-title">Check the following fields</h2><ul class="rs-error-summary-list"><li><a class="rs-error-summary-link" href="#email">Enter an email address</a></li></ul></div>
Classes
.rs-error-summary.rs-error-summary-title.rs-error-summary-list.rs-error-summary-link