stepper
The v-stepper component displays progress through numbered steps.

Examples

#1 Example
edit
A stepper can be used for a multitude of scenarios, including shopping carts, record creation and more.

#2 Editable steps
edit
An editable step can be selected by a user at any point and will navigate them to that step.

#3 Non-editable steps
edit
Non-editable steps force a user to process linearly through your process.

#4 Optional steps
edit
An optional step can be called out with sub-text.

#5 Horizontal steps
edit
Horizontal steppers move users along the x-axis through the defined steps.

#6 Vertical steppers
edit
Vertical steppers move users along the y-axis and otherwise work exactly the same as their horizontal counterpart.

#7 Linear steppers
edit
Linear steppers will always move a user through your defined path.

#8 Non-linear steppers
edit
Non-linear steppers allow the user to move through your process in whatever way they choose.

#9 Alternate labels
edit
Steppers also have an alternative label style which places the title under the step itself.

#10 Multi-line error state
edit
An error state can be displayed to notify the user of some action that must be taken.

#11 Alternative label multi-line error state
edit
The error state can also be applied to the alternative label style.

#12 Vertical multi-line error state
edit
The same state also applies to Vertical steppers.

API

chevron_leftchevron_right