shadcn.io is not affiliated with official shadcn/ui
Review Confirmation Stepper Block for React Aria
A four-step school-trip permission form with validated fields and a review of three cards, each with an Edit button that jumps to its step and returns straight to the review, tagging what changed.
Installation
Overview
Let people fix one answer without walking the whole form again, with this review stepper for React with React Aria. A hairline frame with plus marks holds a vertical Steps rail with a divider: Child's details, Emergency contact, Consents and Review. Each step checks its own Fields: a name, a birth date that makes the pupil 5 to 16, a year group, a phone number of 7 to 15 digits, an optional email and second contact, and two required Checkboxes. The Review step reads the answers back in three cards. Each card has an Edit button that jumps to its step; there the block's one Shine Button says "Back to review" instead of Next, keeps focus, and returns straight to the review, where a changed card is tagged "Updated". "Send form" ends the flow.
FAQ
How does Back to review know what changed?
Pressing Edit saves a copy of the answers and sets a flag. When you return, changedIn compares that copy with the current answers section by section, and the sections that differ get the Updated tag. Tags from earlier edits stay until you start over.
What does each step check?
Child's details: a name of two letters or more, a birth date that makes the child 5 to 16 on the trip day (12 Nov 2026) and a year group. Emergency contact: a name, a relationship and a phone number; the email and the second contact are optional, but a second name needs a number and the other way round. Consents: the permission and the treatment tick. Problems show in a reserved line and the first takes focus.
What stays local, and how do I make it real?
Everything. The sample answers are typed in the block and "Send form" ends on a panel that says "Sent in this demo". To make it real, post values from the submit handler on Review and show the school's reply in the last panel.
How does the keyboard work?
The rail is one tab stop on the current step; arrow keys move between the steps you can reach. Enter inside a field is Next, or Back to review after an Edit. After Edit or a move, focus goes to the step's heading; after Back to review it stays on the button and the polite line in the foot says what changed.