Skip to content
Pinky UI

forms

Progressive Form

Completed form sections condense into context while only the next useful section opens.

  • forms
  • form
  • progressive
  • steps

Live preview

Section 1 of 3

Brief

Name the work.

In focus

The first decision remains visible after you continue.

Up next

AudienceChoose the next reader.

Quick usage

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

<ProgressiveForm steps={steps} onCompletedIdsChange={setCompleted} />

Presets

Default

Restrained production behaviour.

Default behaviour

Quiet

Reduced intensity for dense product screens.

disabled={true}

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

Props

PropTypeDefaultDescription
stepsProgressiveFormStep[]—Ordered sections with content, summaries and optional completion guards.
classNamestring—Styles the outer interaction surface.

Accessibility

  • Completed sections remain editable buttons; current content and next context have stable headings.
  • Continue, Back and Complete form are explicit controls with a live completion announcement.

Performance

  • Only the active section renders its form content; reduced motion preserves the same structure.

Reduced motion

Motion resolves immediately while semantics, focus and state remain unchanged.

When to use

  • Short setup flows where completed answers should remain visible

When not to use

  • Long forms that need a full review page or arbitrary branching

Skill

Purpose

Completed form sections condense into context while only the next useful section opens — the form narrows attention without hiding what was already answered.

Good for

  • Short setup flows where completed answers should remain visible

Avoid for

  • Long forms that need a full review page or arbitrary branching

Usage

tsx
<ProgressiveForm steps={steps} onCompletedIdsChange={setCompleted} />

Accessibility

  • Completed sections remain editable buttons; current content and next context have stable headings.
  • Continue, Back and Complete form are explicit controls with a live completion announcement.

Performance

  • Only the active section renders its form content; reduced motion preserves the same structure.

Related: progressive-disclosure, stepper.

Open this skill on its own page