Components - Steppers

Steppers convey progress through numbered steps.

• Steppers display progress through a sequence of logical and numbered steps.
• They may also be used for navigation.
• Steppers may display a transient feedback message after a step is saved.

Usage

• Steppers display progress through a sequence by breaking it up into multiple logical and numbered steps.
• Avoid using steppers to break up sections in a short form, or multiple times on one page.

Types of Steps

1. Editable
Editable steps allow users to return later to edit a step. These are ideal for workflows that involve editing steps within a session.
2. Non-editable
Non-editable steps should be used when:
• Users cannot edit a step later
• Step editing poses a distraction risk to form completion
3. Mobile
4. Optional
Optional steps within a linear flow should be marked as optional.

Types of Steppers

1. Horizontal :
Horizontal steppers are ideal when the contents of one step depend on an earlier step.Avoid using long step names in horizontal steppers.
2. Vertical :
Vertical steppers are designed for narrow screen sizes. They are ideal for mobile.
3. Linear :
Linear steppers require users to complete one step in order to move on to the next.
4. Non-linear :
Non-linear steppers allow users to enter a multi-step flow at any point.

Alternative Labels

Alternative Labels contains Labels decorated with different shapes.

Stepper FeedBack

• Steppers may display a transient feedback message after a step is saved.
• Stepper feedback should only be used if there is a long latency between steps.

Specs

For Specs Click Here.