shadcn.io is not affiliated with official shadcn/ui
Validation Errors Stepper Block for Ark UI
A street-event permit application where Next checks one step, failed steps show an alert glyph on the rail, and a problems list has Fix buttons that focus each field.
Installation
Overview
Put errors where people can find them with this validating stepper for React with Ark UI. A plus-marked frame holds a problems band, a Steps rail of four steps (Basics, Contact, Documents and Submit) and a form for a street-event permit. Next checks only the step you are on; when it fails, that step's ring shows an alert glyph and "Needs attention" instead of a check, and the band lists each problem with a Fix button that opens the step and focuses the field. Soft warnings, such as more than 500 people needing a safety plan or no insurance certificate named, are listed too but never block. "Next" and "Submit application" are the block's one Shine Button. The band keeps its height whatever it lists.
FAQ
How do I add or change a check?
Add an issue helper beside nameIssues or emailIssues: it returns a list of issues with a field, a message, a severity and the step it belongs to. issuesOf joins them; the band, the rail marks and the field messages all read that one list.
What is the difference between an error and a warning?
An error blocks Next and Submit. A warning is listed with the word "Warning" and a triangle, offers "Review" instead of "Fix" and never blocks. Neither is told by colour alone.
What does Fix do?
It opens the step the problem is on and moves focus to its field. The same helper handles the first problem when a Next press fails.
What stays local?
Values and the application are component state; nothing is sent and the last step ends on "Application held in this demo". To make it real, run the same checks on the server and return its issues in the same shape.