# Steppers

The v-stepper component displays progress through numbered steps.

# Usage

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


# Examples

# Props

# Alternate label

Steppers also have an alternative label style which places the title under the step itself.

# Non linear

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

# Vertical

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

# Misc

# Alternative label with errors

The error state can also be applied to the alternative label style.

# Dynamic steps

Steppers can have their steps dynamically added or removed. If a currently active step is removed, be sure to account for this by changing the applied model.

# Editable steps

An editable step can be selected by a user at any point and will navigate them to that step.

# Errors

An error state can be displayed to notify the user of some action that must be taken.

# Horizontal steps

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

# Linear steppers

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

# Non editable steps

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

# Optional steps

An optional step can be called out with sub-text.

# Vertical errors

The same state also applies to Vertical steppers.

Ready for more?

Continue your learning with related content selected by the Team or move between pages by using the navigation links below.
Edit this page on GitHub
Last updated:05/20/2022, 4:10:15 PM