Review and Submit Card
Multi-section form summary with inline edit links per section, a terms acceptance checkbox, and a submit button that stays disabled until the user confirms.
Multi-section form summary with inline edit links per section, a terms acceptance checkbox, and a submit button that stays disabled until the user confirms.
Search blocks by description or jump to a page.
The source for every Application block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Review and Submit Card is the final step of a project creation wizard, summarising three sections in a labeled definition list layout: Project details (Checkout Redesign, owned by Acme, improving conversion on the payment step), Team (Avery Stone as owner, Jordan Lee and Priya Nair invited, visibility Private to members), and Environment (main branch, Node 20 LTS, auto deploy On). Each section has an inline Edit link that returns to the relevant step. A terms checkbox confirms the user understands that submitting creates the project, sends invite emails, and triggers the first deploy; Submit is disabled until the box is checked.
Sections are a const array with a rows sub-array; the agreed checkbox is local useState. Both footer messages repeat the same honest note: nothing is created until you submit.
Reach for this block as the last card in any multi-step wizard, wired to your form state. Populate the rows from the data collected in earlier steps and route the Edit links back to the correct step index.
A natural flow around it on an Application Pro page:
Before
After
One strong use is a project creation confirmation step. Other review card contexts:
Tip: repeat the nothing happens until you submit note in both the description and the footer; users skim one or the other, rarely both.