Stepper

Option for your step by step user action

Anatomy

The Stepper component is a UI element that helps users navigate through a process or workflow by breaking it down into smaller, sequential steps.

Step Label: Describes the current step in the process.
Step Icon: A visual indicator of the current step.
Step Content: The content for each step in the process, which could include instructions, forms, or other UI elements.
Step Connector: A line or other visual element that connects each step in the process.

Usage

The Stepper component is commonly used in forms, onboarding flows, and other multi-step processes. It helps users understand where they are in the process and what steps they need to take next.

Common places buttons appear: Mobile app homepage , website homepage and other pages when needed etc.

When to use

When a process or workflow has multiple steps that need to be completed in a specific order.
When users may need to go back and change previous steps in the process.
When users need to understand the progress they have made and how much is left to complete.

When not to use

When the process or workflow only has one or two steps.
When the steps in the process are not sequential or do not need to be completed in a specific order.
When the Stepper component would make the interface too cluttered or complex.

Accessibility

To ensure accessibility, the Stepper Component should:

Each step in the Stepper component should be clearly labeled and easy to distinguish from other steps.
The Stepper should be usable with keyboard navigation, and each step should be focusable.
Use ARIA attributes to help users understand the purpose and function of the Stepper component.

Use the Stepper Component for small ranges of values. So the users can understand and see the step without it being tedious.

Don't

Use the Stepper Component for large ranges of values. Because it can be tedious for users to increment or decrement the value multiple times to reach the desired value.

Content

When creating Stepper :

Step Label: Descriptive label for each step in the process.
Step Icon: An easily recognizable icon or symbol that represents each step.
Step Connector: A line or other visual element that connects each step in the process.
Step Content: The content for each step in the process, which could include instructions, forms, or other UI elements.

Use clear, concise labels or icons for each tab element. So it doesn't causes some confusion and misunderstanding for the users in using Tab Bar component.

Don't

Use unclear, vague labels or icons for each tab element. Because it could causes some confusion and misunderstanding for the users in using Tab Bar component.