VerticalStepper ⚠️ Experimental

The VerticalStepper component can be used imported from:

Playground

Parameters

Events

This component has events. Check the documentation about how to use the events.

Name	Payload	Description
@update:modelValue	number	Returns the new value of the model
@restarted	void	Emitted on value reset

Slots

This component has slots. Check the documentation about how to use the slots.

Name	Tags	Description
header	span

Parameters use

Check the documentation about how to use the parameters.

steps

The steps attribute is used to define the total number of steps in the stepper. If not provided, the default value is 10.

We can use <option> tags to define the values of steps

modelValue

Attention!

If you hardcode this value, it will not be reactive and the selection won't change. Use a variable instead and, ideally, a closed loop.

The model attribute is used to define the current step in the stepper

Make sure the value is between 1 and the total number of steps.

header

The header attribute is used to define the header of the stepper.

config

You can use the config attribute to display the stepper as collapsed.

Flags

disabled

The disabled attribute is used to block the interaction with the stepper.

Browser support

Detected engine:  

• Chromium

• Webkit

• Gecko

CodeSandbox example

Sorry, not available yet ☹️