Stepper

El componente v-stepper muestra el progreso en pasos numerados.

Uso

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

API

Nombre
alt-labels
Default
false
Type
boolean

Coloca las etiquetas debajo del paso

Nombre
dark
Default
false
Type
boolean

Aplica la variante del tema dark

Nombre
light
Default
false
Type
boolean

Aplica la variante del tema light

Nombre
non-linear
Default
false
Type
boolean

Permitir que el usuario brinque a cualquier paso

Nombre
value
Default
undefined
Type
number | string

Controla la visibilidad

Nombre
vertical
Default
false
Type
boolean

Muestra el paso verticalmente

Ejemplos

Editable steps

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

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.

Horizontal steps

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

Vertical steppers

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

Linear steppers

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

Non-linear steppers

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

Alternate labels

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

Multi-line error state

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

Alternative label multi-line error state

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

Vertical multi-line error state

The same state also applies to Vertical steppers.

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.

Edit this page | language on Github
Vuetify 3 is now available!The latest version of Vuetify is now available!
Learn about Vuetify 3's new features and functionality for modern Vue applications
Start exploringExplore