Centered Multi Step Form Hero Block for React

Edit the STEPS array. Each step has a label (under its dot), a title (its heading), a description and its fields. Each field has a label, a type, a keyboard (inputMode) and an autoComplete token, a placeholder, the pattern a valid value matches, the error shown when it doesn't, and wide for a full row instead of half of one. The plan step has no fields: it shows the PLANS choice cards. Add an entry to add a step; the dots and the step count follow the array.

Next is the form's submit button, so pressing Enter in a field moves on too. It tests the step's values against their patterns, with spaces removed, so a card number can be typed in groups. Each field that fails shows its error under it in FieldError, is marked invalid and described by the message, and focus goes to the first one. Finish checks every step, so a field emptied after going back sends the visitor to that step with its error. Typing in a field clears its error, and the dots ahead stay disabled until the steps before them pass.

When the last step passes, submit moves to the confirmation: send values (the fields, by id) and plan to your backend there, and show the confirmation once it answers. Treat the card fields as layout only: for real payments, put your payment provider's hosted card fields or checkout in that step, so card numbers never reach your own server, and keep your server's own checks, since anything in the browser can be bypassed.

The dots are a list of tabs named "Signup steps", and each step is a panel named by its tab. After every move, focus goes to the new step's heading, never on load, and one polite live region says where the visitor is: "Step 2 of 3: Plan", then "Your books are open". The plan cards are a radio group, so the arrow keys change the plan without moving on. Every field has a visible label and an autocomplete token (name, email, cc-number, cc-exp, cc-csc), so browsers and password managers can fill it. The dots, the line between them and the Next button use the foreground color, so the block's only primary control is Next.

The shell is a rounded-2xl border bg-muted/50 p-1.5 box and the panel inside it is rounded-xl bg-card shadow-lg ring-1 ring-foreground/15. In a light theme the card and the page are nearly the same color, so the tinted shell and the ring are what make the panel read as lifted. Both follow the theme, in light and dark. The page's rails and top rule come from the spine, so the wizard needs no lines of its own.

The panel takes the full width of the hero and reads down to 320px. The dots stay in one centered row with their labels under them, the card number takes a full row while the expiry date and the security code share one, and Back and Next stay on one row, at either end. Next is on the first screen for the account step. Below the sm breakpoint the headline wraps, balanced, at text-4xl.

Use a wizard when the signup needs more than four or five fields, or when they fall into groups that are easier to answer one at a time: each step feels short, and the dots show how little is left. Use a single form, such as an inline email signup, when one or two fields are enough to get started.