form-ux-patterns_skill

Overview

This skill provides practical UX patterns and components for designing complex forms: multi-step wizards, cognitive chunking (5–7 fields max), progressive disclosure, and conditional or repeatable fields. It focuses on improving completion rates, reducing cognitive load, and making validation and navigation predictable in checkout flows, onboarding, and long data-entry forms.

How this skill works

It exposes patterns and small components/hooks to split forms into steps or chunks, validate and focus on each chunk, and reveal fields only when needed. Use the multi-step hook to manage progress, validation, and conditional steps; use conditional and repeatable field patterns to show/hide or duplicate inputs while optionally unregistering hidden values. Step indicators and navigation components provide accessible progress and controls.

When to use it

• Checkout flows with address, shipping, and payment sections
• Onboarding wizards that collect profile data over several screens
• Forms with many fields that would overload a single page
• Situations requiring conditional inputs (tax IDs, shipping vs pickup)
• Repeatable lists like team members, addresses, or line items

Best practices

• Chunk related fields into groups of 5–7 to respect working memory limits
• Show briefings or task-level instructions before a group, keep labels short
• Reveal only relevant fields using progressive disclosure to reduce noise
• Validate per-step and focus the first error for fast recovery
• Allow optional steps and conditionally skip steps based on prior answers
• Provide a clear, accessible progress indicator and predictable navigation

Example use cases

• Ecommerce checkout split into contact, shipping, and payment steps with progress bar
• SaaS onboarding that asks essential info first and reveals advanced settings later
• Tax or business forms that show company fields only when a business checkbox is checked
• A repeatable team member list with Add/Remove and min/max constraints
• Support forms that progressively request details based on issue type