Form Wizard
A form in steps, in a dialog or on a page (a new customer, an onboarding).
Overview
FormWizard takes steps ({ title, description } per step) and the current step, controlled (step/onStepChange) or not (defaultStep).
- Navigation: it's a react-aria
Formwhose submit is Next, so Enter advances and the current step's fields validate natively (only that step is mounted). ThenonNext(step)runs — validate or save there (react-hook-form'strigger). Returningfalseor throwing keeps the user on the step, and a promise shows Next as pending. Finish runsonNextof the last step and thenonComplete. - `FormWizardSteps`: the
stepperlist. Earlier steps are reachable, later ones only through Next. Titles show when the wizard is wide enough for that many steps; narrower, only the numbers, with the current title under them (container query). - `FormWizardStep`: holds a step's fields; after Back or Next, focus moves to its first field.
- `FormWizardFooter`: the progress ("Step 2 of 4", announced politely),
childrenbefore Back (a dialog's Cancel), Back and Next/Finish.
The values stay in the app; with react-hook-form, keep shouldUnregister off.
Built-in text is in English; translate it with i18n.labels.
Installation
CLI
Manual
- 1
Register the @fma-ds namespace in components.json (once)
- 2
Add the item
Files land in
components/fma-ds/form-wizard/form-wizard.tsx; npm and registry dependencies are installed along with them.
Dependencies
- npm
- cn@^0.5.0lucide-react@^1.61.0react-aria-components@^1.22.1