Stepper

KStepper is an ordered step indicator.

1. Personal information
2. 2

   Billing details
3. 3

   Shipping information

<KStepper :steps="steps" />

Props

steps

An array of step objects. Each step object should have a required label property, and an optional state property.

step property takes one of the following values:

• active
• default
• pending
• completed
• error

1. Completed
2. 2

   Active
3. Pending
4. Erroneous
5. 5

   Default

<template>
  <KStepper :steps="steps" />
</template>

<script setup lang="ts">
const steps = ref<StepItem[]>([
  { label: 'Completed', state: 'completed' },
  { label: 'Active', state: 'active' },
  { label: 'Pending', state: 'pending' },
  { label: 'Erroneous', state: 'error' },
  { label: 'Default' }
])
</script>

maxLabelWidth

The width of step labels (default is 170px). We support any valid CSS length (e.g. 25%) value.

1. 1

   A step with a long title
2. 2

   A step with even longer title

<KStepper max-label-width="20ch" :steps="steps" />

NOTE

In containers < 768px wide only the active step label will be shown to preserve horizontal space. In containers < 400px wide, all step labels will be hidden and only icons will be displayed.

hideStepNumbers

Whether to show the step numbers. Default is false.

1. Personal information
2. Billing details
3. Shipping information
4. Review

<KStepper hide-step-numbers :steps="steps" />