Progressive Mobile Form
Progressive Mobile Form keeps one group open at a time. Completed answers compress into editable summaries, the current group owns the input, and the next group is previewed without becoming a hidden wizard.
Live example
Try the interaction before reading the recipe.
real component · keyboard-safe
Current / Name
What should we call you?
Next: Focus
Purpose
Progressive Mobile Form keeps one group open at a time. Completed answers compress into editable summaries, the current group owns the input, and the next group is previewed without becoming a hidden wizard.
Use when
- A long form has independent groups that can be completed in sequence.
- Showing every field at once would overload a small screen.
Interaction
Complete the current group, move Next, revisit a completed answer with Edit, or go Back. The final state offers a clear edit path.
Accessibility
Use real labels and inputs, labelled Back/Next buttons and current-step text. Completed summaries must not replace the underlying edit control.
Reduced motion
Swap the active group and compact summaries immediately; preserve the same order and controls.
Tune
- Make each group answerable in one short session.
- Show the next group name so progress is not mysterious.
Source: packages/skills/mobile/progressive-mobile-form.md