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" />

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" />