Form Error Navigator
A free native form error summary for React that links browser validation messages back to their fields.
Customise
Code
<FormErrorNavigator formId="review-form" />Form Error Navigator is a free form error summary for React and Next.js that listens for native constraint-validation failures and lists each invalid control in form order. Its links return to the fields while the browser retains ownership of validation rules, focus and submission.
Use it with a design review form, a publishing workflow or any labeled native form. It reads the form's current validity state and browser messages, updates as fields change, and never copies entered values into the summary. With JavaScript disabled, the form still uses native browser validation; forms using novalidate or direct form.submit() do not emit the validation events this summary requires.
Install
Add the @te registry to your components.json once:
{
"registries": {
"@te": "https://templateempire.io/r/{name}.json"
}
}Then install the component:
npx shadcn@latest add @te/form-error-navigatorUsage
import { FormErrorNavigator } from "@/components/form-error-navigator";
export function ReviewForm() {
return (
<form id="review-form">
<FormErrorNavigator formId="review-form" />
<label htmlFor="review-image">Image URL</label>
<input id="review-image" name="image" type="url" required />
<button type="submit">Submit review</button>
</form>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| formId | string | required | Unique ID of the native form to observe on this document. |
| heading | string | "There is a problem" | Visible heading shown after the browser reports invalid controls. |
| className | string | undefined | Additional utilities merged onto the summary section. |
Customisation
The summary uses semantic foreground, surface, border, destructive and focus tokens. The state is expressed with a heading, field names, browser messages and links, so error meaning does not rely on colour.
<form id="release-form">
<FormErrorNavigator
formId="release-form"
heading="Release needs attention"
className="max-w-2xl"
/>
{/* Native required, pattern and range rules remain on your controls. */}
</form>Frequently asked questions
- Is Form Error Navigator free for commercial use?
- Yes. Form Error Navigator is MIT licensed for personal and commercial projects.
- Does the summary validate my fields or submit the form?
- No. Native browser constraints provide the invalid state and message. The browser keeps focus and submission ownership, while the component links to invalid controls.
- Why does the summary stay empty on my novalidate form?
- A form with novalidate or a direct form.submit() call does not emit native invalid events. Keep browser constraint validation enabled when you want this summary to respond.