Stepper is an interface element that displays progress through numerous steps. Stepper is normally used for navigation: it informs the users about where they are situated in the process, how many steps are left and how much time is needed to complete the form. Active step is usually marked with a color or an icon, as well as the completed step. It is also important to provide the feedback after one step is saved, so the user would know if everything is processing as it should.


Designed by Rashida Kheriwala


There are few types of steps

  1. Editable, that can be edited within a session, so the users can return to any step anytime before saving all the from.
  2. Non-editable, that cannot be edited once the step is completed.
  3. Optional, that can be skipped. All optional steps should be marked so the user could understand it’s not necessary to fill.


Steppers have several varieties as well

  1. Horizontal, where all the steps are arranged horizontally. It is recommended to avoid using long titles for this kind of placement.
  2. Vertical, where all the steps are aligned vertically. It is an ideal solution for mobile screens as they have a lack of horizontal space on the screen.
  3. Linear, where each step should be completed to proceed further. You may include optional steps if needed.
  4. Non-linear, where the user can start exploring the process from any step and doesn’t need to complete each one.


Speaking about mobile UI, there are some kinds of suitable steppers for the smartphone screen. The main goal here is to adapt the design for smaller space and get rid of useless details such as long text blocks or icons.


  1. Radial stepper. This one allows to focus on important things (what is the current step, how much is left), reduces the visual noise and provides better readability.
  2. Dots. You may use this type of stepper as an alternative to save the space when no special titles are needed.
  3. Progress bar. This is another way to improve the mobile stepper from a visual point of view.


Steppers are the perfect way to bring a structure to any form inside of your website or application. You may use these tips to implement it in the desktop or mobile interfaces.

share the term