Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Form blocks

Pro

Review and Submit Form Block for React

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.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Check answers before they go in with this review and submit form for React with Base 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.

How do I connect it to react-hook-form or TanStack Form?

Hold all the answers in one form and render this as its last step. With react-hook-form, read the values with getValues, write an edited section back with setValue in the section's Save handler, and submit with handleSubmit.

  • Pro

    Payment Method Form

    Checkout and address

    A payment form where the method decides the fields: card, bank transfer with an IBAN grouped as you type and checked for length and mod-97, or a wallet, in one grid cell so nothing moves.

  • Pro

    Address Form with ZIP Help

    Checkout and address

    A six-column address grid that never changes size: street, an apartment line behind a quiet button, city, a state select and a ZIP code that fills the city and state from a typed table of six.

  • Pro

    Credit Card Field Form

    Checkout and address

    A card as one joined control: number, expiry and CVC in a single group with one focus ring, a brand from the first digits, auto-advance, errors that name the part, and only the brand and last four kept after Save.

  • Pro

    Phone Input with Country Code Form

    Numbers and pickers

    A national-number field joined to a country menu that formats the digits for the chosen country as you type, checks the count per country and shows how the number would be stored.

  • Pro

    Ship-To Country Select Form

    Selects

    A combobox of 20 countries in four areas, each with a two-letter tile and calling code, where four are out of reach with the reason in the row and a band gives what a parcel to the chosen country needs.

  • Pro

    Settings Drawer Form

    Dialogs and layouts

    A longer settings form in a bottom drawer with a fixed header and footer, soft shadows at the scrolling edges, a count of unsaved changes worked out from the fields and a guard against closing a dirty form.

All 42 form blocks