form-ux-patterns

Break forms into multi-step chunks using progressive disclosure and conditional fields. This pattern organizes long forms into digestible sections—typically 5–7 fields per step—revealing fields only when relevant based on user input, reducing overwhelm in checkout flows and onboarding wizards.

Yes. This Skill provides structured patterns for multi-step forms in React with TypeScript, including step indicators, configurable navigation, validation hooks, progress tracking, and conditional rendering to control field visibility based on user responses.

Use progressive disclosure patterns that show or hide fields based on user selections—for example, revealing shipping options only after address entry. This Skill defines validation and navigation controls to manage conditional rendering and maintain form state across steps.

Apply field chunking (5–7 fields per section) with step-based progression and optional briefing text before each group. Multi-step patterns segment related fields into logical chunks, improving focus and reducing cognitive overhead in lengthy forms.

This Skill uses React and TypeScript. Progressive disclosure itself is a UX pattern applicable across frameworks, but this implementation provides React-specific hooks, components, and state management for multi-step forms with conditional field rendering.

Use multi-step forms for complex flows with many fields, conditional logic, or high cognitive load—checkout processes, lengthy onboarding, or forms requiring user decisions that affect later fields. Step-based chunking helps users maintain context and reduces abandonment.