React MUI Stepper

Types of Steps

Editable Steps

Editable steps allow users to go back and edit their responses in previous steps. This is useful for forms or wizards where users might need to revise their input.

Non-Editable Steps

Non-editable steps prevent users from going back and changing their responses. This is ideal for processes that require a linear progression, such as a purchase checkout.

Mobile Steps

Mobile steps are designed for smaller screens and come in several variations :

1. Text : A simple text-based mobile step.
2. Text with Carousel Effect : Mobile steps with a carousel-like transition effect between steps.
3. Dots : Mobile steps represented as dots for navigation.
4. Progress : Steps displaying progress indicators, perfect for tracking completion.

Optional Steps

Optional steps are not mandatory and allow users to skip them if they choose. Useful for processes with optional sections.

Types of Steppers

Horizontal Steppers

Horizontal steppers are the most common type of stepper, where steps are arranged horizontally from left to right. They are ideal for scenarios where you want users to progress through a series of sequential actions.

1. Linear Stepper : In a linear horizontal stepper, users are required to complete each step in a strict sequence. They cannot skip steps or jump ahead. This is suitable for processes that demand a specific order of completion, such as a multi-step form. Use Case : Ideal for processes that demand a specific order of completion, such as a multi-step form or wizard.
2. Non-Linear Stepper : In contrast to linear steppers, non-linear horizontal steppers allow users to jump to any step, regardless of their current position. Non-linear steppers are useful when the order of steps isn't critical, or you want to give users more flexibility in their navigation. Use Case : Useful when the order of steps isn't critical, or you want to give users more flexibility in their navigation.
3. Alternative Label Stepper : Horizontal steppers can have alternative labels for each step, providing additional information or context. This can be helpful when steps have lengthy descriptions or when you want to offer more details about each step. Use Case : Helpful when steps have lengthy descriptions or when you want to offer more details about each step.
4. Error Step : Error steps in horizontal steppers are used to highlight any issues or errors encountered during the process. For example, if a user enters invalid information in a step, you can visually indicate the problematic step. It helps users quickly identify and rectify errors. Use Case : Useful for guiding users to fix issues or errors encountered during the process, improving user experience.
5. Customized Horizontal Stepper : React MUI allows you to customize the appearance and behavior of horizontal steppers to suit your application's unique requirements. You can adjust colors, styles, and step icons, making it a versatile choice. Use Case : Customize colors, styles, and step icons to match your application's design and enhance user engagement.

Vertical Steppers

Vertical steppers are an alternative layout for steps, where steps are stacked vertically, usually from top to bottom. They are especially useful when you want to save horizontal space or create a different visual flow.

1. Performance Vertical Stepper : Vertical steppers can be optimized for performance, ensuring a smooth and efficient user experience. This is essential if your application has many steps or if you're concerned about performance on mobile devices.

Linear

Similar to its horizontal counterpart, a linear vertical stepper enforces a strict sequence of steps, requiring users to complete each one before moving to the next. This is suitable for processes with a clear order of actions.

Non-Linear

Non-linear vertical steppers allow users to freely jump between steps, providing flexibility in navigation. This is helpful when the order of steps doesn't matter, or you want to give users more control.

Benefits of Vertical Steppers :

• Space-Saving : Vertical steppers are excellent when horizontal space is limited, as they stack steps vertically from top to bottom, optimizing screen real estate.
• Optimized Performance : Vertical steppers can be optimized for performance, ensuring smooth interactions even with a large number of steps. This is crucial for applications with extensive multi-step workflows.

When to Choose Linear vs. Non-Linear Navigation :

For Horizontal Steppers:

• Linear Navigation: Choose linear navigation when you need to enforce a strict sequence of steps, and completing each step is mandatory for progression. This is suitable for processes with a specific order, like a checkout process.
• Non-Linear Navigation: Opt for non-linear navigation when you want to allow users to jump between steps freely, and the order of steps isn't critical. This provides flexibility and is ideal for processes where users may have varying paths, such as profile setup.

For Vertical Steppers:

• Linear Navigation: Use linear navigation when you need a clear, top-to-bottom sequence of steps and completion order matters. It's useful for guiding users through a defined process, like a tutorial.
• Non-Linear Navigation: Choose non-linear navigation for vertical steppers when you want to give users the flexibility to explore steps in any order. This is helpful for processes where users can skip sections or have diverse paths, like a knowledge quiz.