Should you allow users to click on the progress indicator to jump to a step?
Yes, but only to completed steps. Clicking a completed step lets the user review or edit previous data. Do not allow jumping forward to unvalidated steps. Validate all intermediate steps before allowing forward navigation.
Explore This Question
Search for additional explanations using these tools:
More FAQs in Tab Form Progress Indicator Implementation
Two options: linear (a progress bar with width = ((currentStep + 1) / steps.length) * 100) or stepped (dots with completed/active states connected by lines). Update on every step change. Completed steps are green, active is blue.
Create dots for each step. For each dot: add 'completed' class if index < currentStep, 'active' class if index === currentStep. For connecting lines: add 'completed' class if index < currentStep. Update on every step change.
Dots: circular (border-radius: 50%), fixed size, centered text. Lines: flex: 1, thin height (2px). Completed: green background. Active: blue background. Default: gray background. Use display: flex on the container with align-items: center.
Still have questions?
Browse all our FAQs or reach out to our support team