Step Indicator

A Step Indicator shows the user their progress along the process of completing a task. User actions are required for the progress to be updated.

Code


                                                        
                                                        
                                                            <template>
                                                          <w-step-indicator
                                                            current="2"
                                                            label="Step 2 of 5"
                                                            progress="25"
                                                            steps="5"
                                                          ></w-step-indicator>
                                                        </template>
                                                        
                                                            

Props

Name

Description

Type

Default

Values

current

Sets the step as the current step.

number

1

 

label Required

The label for the step indicator.

string

Loading

 

progress

Defines the amount of progress in the current step.

number

null

 

steps Required

Defines the number of steps.

number

 

 

align

Change the alignment of the step indicator label.

string

block

block, inline