Skip to content
Pinky UI

mobile

Progressive Mobile Form

Completed groups compress into editable summaries while the current group stays open and the next group is previewed.

  • mobile
  • forms
  • progressive
  • steps
Related pattern

A mobile form keeps one decision open at a time without hiding completed answers.

Live preview

Current / Name

What should we call you?

Next: Focus

Quick usage

usage
import { ProgressiveMobileForm } from "@pinky-ui/systems";

<ProgressiveMobileForm steps={steps} />

Install

Add @pinky-ui/systems as a dependency, or use the CLI to copy this component's source directly into your project — no dependency to manage, fully editable.

shell
npm install @pinky-ui/systems

Prefer to run the whole repository locally instead?

repository
git clone https://github.com/florash/Pinky-UI.git
cd Pinky-UI
npm install
npm run dev

Accessibility

  • Every gesture has a labelled button or keyboard path, and primary controls meet a 44px touch target.
  • State remains readable without relying on colour or motion.

Performance

  • Interaction state is local and bounded; gesture updates do not require a page-wide render loop.
  • Timers and listeners are cleaned up on unmount.

Reduced motion

The same state change resolves immediately; travel, scale and spring motion are removed without removing the interaction.

When to use

  • Touch-first product surfaces where the next action should stay close to the hand.

When not to use

  • Desktop-only workflows or interactions whose gesture would hide the only available action.

Skill

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.
Open this skill on its own page