Components

Circle stepper

A multi-step progress component that visually represents sequential steps using circular indicators, with optional interactivity and icon support.

TabStepper

CircleStepper

VerticalStepper

StepIndicator

Component

View code

Show playground

Props

Props	Default	Type
`modelValue`	`1`	`number`
`steps`	`An example array`	`number \| CircleStep[]>`
`type`	`StepIndicatorType.NUMBER`	`StepIndicatorType`
`size`	`StepIndicatorSize.XL`	`StepIndicator`
`completedIcon`	`mdi:check`	`string`
`isInteractive`	`false`	`boolean`
`isFullWidth`	`true`	`boolean`

Usage

modelValue

Sets the current step. The steps starts always with the value 1 by default.

 <template>
    <CircleStepper v-model="currentStep" />
</template>
<script setup lang="ts">
const currentStep = ref(1)
</script>

Type: number
Default: 1

steps

Sets the steps. You can set the steps by using a number or pass an array of objects which uses the CircleStep interface.

 <template>
    <CircleStepper :steps="steps" />
</template>
<script setup lang="ts">
const steps: CircleStep[] = [
    {
        icon: 'mdi:home-outline',
    },
    {
        icon: 'mdi:account-outline',
    },
    {
        icon: 'mdi:map-marker-star-outline',
    },
]
</script>

TypeScript interface

 interface CircleStep {
    icon?: string
}

The icon property is usefull when the type is ICON. Otherwise, it is ignored even if it passed in the array.

type

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

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

Type: StepIndicatorType
Default: StepIndicatorType.NUMBER

Options

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).

completedIcon

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

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

Type: string
Default: mdi:check

isInteractive

Sets if the step indicator is interactive. If it is, the user can click on the step to go to the step. As a result, it will also update the ref asigned to the v-model.

In case of having the value false, nothing will happen.

 <template>
    <CircleStepper :isInteractive="false" />
</template>

Type: boolean
Default: false

isFullWidth

Sets if the component will be displayed as a full width component. It will take the full width of the parent element. Otherwise, it will fit to the content.

 <template>
    <CircleStepper :isFullWidth="true" />
</template>

Type: boolean
Default: true

dividerClass

Sets the class to be applied to the divider. It is useful when you want to customize the divider.

You can change for instance the color or the divider or the min-width.