Multi-step Form Navigation Demo

This page showcases the multi-step form navigation system with all its features. The components provide a seamless user experience with error handling, keyboard navigation, and progress tracking.

Form Example

This example demonstrates a complete multi-step form with validation, progress indication, and help text.

Personal Information
Enter your basic contact details
Project Details
Tell us about your project
Timeline & Goals
When do you need the project completed?
Summary
Review your submission

Key Features

  • Step Manager: Centralized management of form steps, including validation and navigation.
  • Step Container: Provides error handling and help text display.
  • Form Step: Individual step component with keyboard navigation and validation.
  • Conditional Steps: Show or hide steps based on form data using the isVisible function.
  • Validation: Prevent advancing to the next step until the current one is valid with the isValid function.
  • Keyboard Navigation: Use the keyboard to navigate between steps (Enter to advance, Arrow keys).