shadcn.io is not affiliated with official shadcn/ui
Validation Summary Form Block for React
A company-formation form that gathers every problem into an alert summary with a link to each field, moves focus to it and removes each item live as the field is fixed.
Installation
Overview
Collect every problem in one place with this validation summary form for React with Base UI. A compact header over a hairline frame with a plus mark on each corner introduces a company-formation form built from label-and-control rows: company name, contact email, phone, an optional website and a short description, each with its hint beside the label. Pressing Start formation with problems fills a bordered summary at the top, an alert reading "3 problems to fix", moves focus to it, and lists each problem as a link that focuses its field. Each field also shows its own message, and fixing a field removes it from the summary as you type until the intro note returns. The summary shares its space with that note and is sized for the longest list, so nothing jumps. The Shine Button is the only colored control. It is built from Input, Textarea, Label, Shine Button and Guides. For long forms, applications and any page where a visitor needs to see everything wrong at once.
FAQ
Where does focus go, and what do the links do?
When a press finds problems, focus moves to the summary heading, which is focusable but not in the tab order, and the alert is read. Each item is a link to its field's id; activating it focuses that field and the browser scrolls it into view. The summary lists problems in the order of ORDER, which is also the form's reading order.
How does fixing a field update the summary?
The summary is derived from the current values every render: a field is listed while it was flagged at submit and problemsOf still returns a message for it. So the count and the list shrink as you type, and when the last item goes the summary gives way to the intro note and the foot status clears.
Why does the space under the header never change height?
The intro note, the summary and an unseen sizer copy of a five-item summary share one grid cell, and only one of the first two is visible. The cell is as tall as the longest summary, so nothing below it moves whatever the count.
How does it work with a screen reader?
The summary has role="alert", so the count is announced when it appears and when it changes. Fields in error carry aria-invalid and point at their own message with aria-describedby. The foot status is the one polite region and only says to follow the summary.
What stays local, and how do I connect it for real?
Start formation clears the form and says "Filed in this demo. Nothing sent." To make it real, post the values once problemsOf returns nothing, and put the server's errors into the same flagged state so they appear in the summary and on their fields.