Introduction
A stepper progress control is a user interface element that visually represents a user's progress through a sequence of steps in a process. It can be used in scenarios like registration, onboarding, or multi-step forms, making it easy for users to track their progress and navigate between steps.
Notable features:
- Visual progress indication through multiple steps
- Step validation and completion tracking
- Navigation between completed and current steps
- Customizable step content and styling
- Support for complex multi-step workflows
- Integration with form validation systems
Basic Example
Here's an example showing how the stepper component can be used for a multi-step form process:
Properties
The Stepper component provides comprehensive properties for managing multi-step processes.
Core Properties
- data: Array of step configurations
- value: Current active step (bindable)
- class: Custom CSS classes for styling
Step Configuration
- title: Display name for the step
- completed: Whether the step is completed
- disabled: Whether the step can be accessed
- content: Step-specific content or components
Basic stepper configuration:
Interactive Stepper
The Stepper component supports interactive navigation and dynamic content updates based on user progress.
Step Management
You can programmatically control step progression, validation, and completion states to create sophisticated multi-step workflows.
Use Cases
The Stepper component is perfect for guiding users through complex processes with clear progress indicators.
Form Workflows
- Multi-page registration forms
- Order checkout processes
- Survey and questionnaire flows
- Account setup wizards
Process Guidance
- Onboarding tutorials
- Setup configuration guides
- Data import wizards
- Installation processes
Ready for more?
Now that you understand how the Stepper works, explore other layout components or learn about form validation and data collection.
NavContent → Form Validation →