Stepper

Steps header + panels + next / back

A task split into ordered steps with one panel at a time — checkout, onboarding, a setup wizard. Use it when each step depends on the one before; a single long form is often simpler.

Basic

1. 1
   Account
2. 2
   Profile
3. 3
   Review

<script setup lang="ts">
import { ref } from "vue";
import { BlessInput, BlessStepper, useToast } from "blessing-ui";
const step = ref(0);
const { success } = useToast();
const steps = [{ label: "Account" }, { label: "Profile" }, { label: "Review" }];
</script>

<template>
  <div style="max-width: 560px">
    <BlessStepper v-model="step" :steps @finish="success('Done')">
      <template #default="{ index }">
        <div v-if="index === 0" class="col">
          <BlessInput placeholder="email" aria-label="Email" /><BlessInput
            placeholder="password"
            type="password"
            aria-label="Password"
          />
        </div>
        <div v-else-if="index === 1" class="col">
          <BlessInput placeholder="display name" aria-label="Display name" />
        </div>
        <p v-else>Everything looks good.</p>
      </template>
    </BlessStepper>
  </div>
</template>

• Next / Back / Finish buttons by default (labels to rename, #actions to replace). On each step change focus moves to the panel, so the new step is read.
• linear (default) lets the header go back to completed steps only; :linear="false" lets people jump to any step.

Usage

import { BlessStepper } from "blessing-ui";

API

Props

Name	Type	Default	Description
steps*	BlessStep[]	—
orientation	"horizontal" | "vertical"	"horizontal"
linear	boolean	true	linear: the header only goes back to completed steps; off: any step can be jumped to
labels	Partial<{ next: string; prev: string; finish: string; }>	—
modelValue	number	0

Events

Name	Payload	Description
update:modelValue	[value: number]
finish	[]

Slots

Name	Scope	Description
default	{ step: BlessStep; index: number; next: () => number | void; prev: () => number | false; last: boolean; }
actions	{ next: () => number | void; prev: () => number | false; index: number; last: boolean; }