Components

Step indicator

Represents a single step within a multi-step process or timeline.

TabStepper

CircleStepper

VerticalStepper

StepIndicator

Component

View code

Show playground

Sets the type of the step indicators. Uses the StepIndicatorType enum.

 <template>
    <CircleStepper :type="StepIndicatorType.NUMBER" />
</template>

Value	Description
`NUMBER`	Uses numbered steps
`EMPTY`	Shows an empty space in the step indicator
`ICON`	Displays a custom icon in the step indicator (except if the step is completed).

Sets the status of the step indicators. Uses the StepStatus enum.

 <template>
    <CircleStepper :status="StepStatus.CURRENT" />
</template>

Value	Description
`none`	The step does not use state and renders a default style
`inactive`	The step is inactive
`current`	The step is the current step
`completed`	The step is completed

Sets the size of the step indicators. Uses the StepIndicatorSize enum.

 <template>
    <CircleStepper :size="StepIndicatorSize.XL" />
</template>

Sets the current step.

 <template>
    <CircleStepper :step="3" />
</template>

Sets the icon to be displayed when the step is not completed.

 <template>
    <CircleStepper stepIcon="mdi:home-outline" />
</template>

Sets the icon to be displayed when the step is completed.

 <template>
    <CircleStepper completedIcon="mdi:check" />
</template>

Sets if the step indicator is interactive.

 <template>
    <CircleStepper isHovered />
</template>