shadcn.io is not affiliated with official shadcn/ui
Review and Submit Form Block for Solid
A review step: three sections of typed answers that each edit in place in the same boxes, a side cell of what changed, a Submit that names the section to finish, and a lock after a local submit.
Installation
Overview
Check answers before they go in with this review and submit form for Solid with Ark UI. A compact header sits over a hairline frame with a plus mark on each corner, with a side cell beside the sections. Three sections of typed answers (Personal, Contact, Preferences) read as label-and-value rows. Each has an Edit button, with aria-expanded, that turns that section's values into fields in the very same boxes, so nothing moves: Save checks them and keeps them, and an answer that differs from the one given carries the word "Edited"; Cancel drops them; focus goes back to Edit. The side cell lists what changed, each answer with what it was and what it is now. Submit while a section is open says "Finish editing Contact first" and puts focus in it, and a good Submit locks the review until Reopen. Built from Input, Native Select, Switch, Shine Button and Guides, with a CSS entrance only. For visa, onboarding and checkout flows that end on a summary.
FAQ
How do I feed it the answers from a real flow?
ORIGINAL is the answers as given, keyed by field id, and FIELDS and SECTIONS describe them: a label, a kind (text, email, tel, select or switch) and the section it belongs to. Pass your own answers in as ORIGINAL, keep a copy in state as saved, and "Edited" and the list of changes follow from comparing the two.
How does editing in place avoid moving anything?
A section's rows and its fields share one grid cell, built from the same boxes: a label line, then a value or a field of the same height. The one not shown is invisible and inert, so it takes no focus. Save and Cancel live in a foot row that is always there, showing the section's hint while it is closed.
What does Submit do when something is open?
It refuses in words ("Finish editing Contact first.") and puts focus in the first field of that section, so an unsaved edit is never lost or sent by accident. When every section is closed it locks the review: the Edit buttons answer "Submitted. Reopen to edit." and Reopen unlocks it. Reopen is always on the page, quiet until there is something to reopen.
How does it work from the keyboard?
Edit moves focus to the section's first field; Tab walks the fields to Cancel and Save; Save and Cancel return focus to Edit. Escape is not taken. Pressing Edit on an open section moves focus back to its first field. The status line says what happened after each action.
What stays local, and how do I connect it for real?
Everything: Submit says "Submitted in this demo. Nothing was sent." Replace the body of submit with a call that sends saved to your service, and validate again on the server. The Save checks (a name of two characters, an email shape, 7 to 15 digits in a phone number) are typed samples: use your own rules.