Stepper

KStepper is an ordered step indicator.

1. Personal Information
2. Billing Details
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 step
2. Active step
3. Pending step
4. Erroneous step
5. Default step

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

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

maxLabelWidth

The width of step labels (default is 170px). We support numbers (will be converted to px), auto, and percentages (e.g. 25%) for values.

1. Step a long long long long time ago
2. in a galaxy far far away
3. Kongponents were battling in space and
4. fighting robots and space monsters with lots of explosions

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