Demonstration

The types of steppers and steps are specified in Material Design page.

• Type of steps Editable steps, Non-editable steps, Mobile steps and Optional steps.
• Type of steppers Horizontal steppers, Vertical steppers, Linear steppers, Non-linear steppers, Alternative labels and Stepper feedback

Regarding the presented topics, here are the features supported by the MDL Stepper library:

• Horizontal steppers
• Vertical steppers
• Linear stepper
• Non-linear stepper
• Stepper feedback
• Editable steps
• Optional steps
• Error state

Horizontal steppers

Horizontal steppers are ideal when the contents of one step depend on an earlier step. On horizontal steppers, the step name and numbers appear on a horizontal bar.

By default, the horiztonal steppers width is defined as 840px. To change width dimension you only need to update the value of property max-width. Also, you can custom the height size of horizontal steppers with min-height property.

Horizontal stepper is only available for large screens (e.g. desktop). In other words, the screen must have, at least, 840px.

Vertical steppers

Vertical steppers are designed for narrow screen sizes. They are ideal for mobile.

By default, the vertical steppers width is defined as 800px. To change width dimension you only need to update the value of property max-width.

Linear stepper

Linear steppers require users to complete one step in order to move on to the next.

Toggle horizontal/vertical get linear code

Non-linear stepper

Non-linear steppers allow users to enter a multi-step flow at any point.

Toggle horizontal/vertical get non-linear code

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.

Toggle horizontal/vertical get feedback code

Editable steps

Editable steps allow users to return later to edit a step. These are ideal for workflows that involve editing steps within a session.

Toggle horizontal/vertical get step editable code

Optional steps

Optional steps within a linear flow should be marked as optional.

Steps marked as optional serve to define their behavior within the stepper and they will not show message "optional" by default. You need to set the title message manually. Even because this message may vary according to many languages.

Toggle horizontal/vertical get optional step code

Error state

Toggle horizontal/vertical get step + error state code