Form Generator
FormGenerator is the client-side orchestrator for multi-step and multi-section forms. It renders
questions from declarative JSON (usually from a backend Steps API), handles navigation,
validation, dependent visibility, and answer collection.
Source: src/client/components/FormGenerator/
· Shared types live in core; module-owned types (e.g. Household) register via
questionRenderers.
How it works
-
Instantiate —
new FormGenerator(container, config)merges core + pagequestionRenderers, then renders into the container. -
Render steps —
One step wrapper per
totalSteps. Each question mounts into.js-form-generator-question-{id}. -
Look up the renderer —
question.questionTypeselects a factory from the registry. The instance is stored onquestion.ref. -
Collect answers —
On change, answers merge into
formGenerator.answers[step][questionId]. -
Navigate & validate —
Next runs
stepValidator(), then advances. On the last step, Next becomes Submit. -
Dependent questions —
Radio/checkbox options can list
dependentQuestion: [ids]. Selection shows/hides those questions and clears answers for hidden ones.
Continue reading
Browse by topic — playgrounds live under their own section.
Guides
Core concepts, setup, and the question JSON contract
-
Architecture
Core vs module ownership, renderer registry, and form types
-
Basic usage
Instantiate FormGenerator, pass questionRenderers, and wire callbacks
-
Config options
FormGenerator constructor options and public methods
-
Question schema
Required fields and type-specific question JSON from the Steps API
Extending
Add new question components and wire them into Form Generator
-
Creating a new question component
Build a FormComponent, register questionType and renderers, then use it in FormGenerator
-
Module-specific types
Keep specialised question types next to the feature that owns them
-
Adding a sample to the playground
Register samples, renderer maps, and optional playground sections
Playgrounds
Interactive previews with editable question JSON — including General, Household, and Search & Finder components.