Form Wizard

v1.0.0·Added in 1.0.0

A multi-step form with a stepper, per-step sync or async validation, direction-aware slides, a summary step and a full-screen phone layout.

Fill in a step and press Continue (or Enter in any single-line field, Cmd+Enter / Ctrl+Enter in a textarea): the step's validators run, and on success the step is marked with a check and the next one slides in from the side you are heading, while the card's height follows on a spring. A failed step turns its marker into a red "!", shakes the Continue button and puts focus on the first invalid field; an async check shows a spinner on the button after a moment. Back never validates. Click a completed step in the stepper to jump back to it (with linear={false} any step), and on the summary step the Edit links do the same. Optional steps show Skip. On the last step the button submits and shows a spinner while onComplete runs, then a check. Tab order is the stepper, the fields, then Back, Skip and Continue; after a step change focus lands on the new step's heading and screen readers hear "Step 2 of 5: Details". Below 768px the stepper becomes a compact progress bar with the step title, and with fullScreenOnMobile the wizard fills the screen with a sticky header, a scrolling body and a sticky footer of 48px buttons above the safe area (in the flow, so it rides above the keyboard). Steps change only through the buttons: no swipe, so sliders and carousels inside a step keep their gestures. Under reduced motion steps crossfade and nothing shakes.