Steps

Guide users through a multi-step process.

Basic Usage

1

Enter email and invite code

Supports common emails

2

Validate email

Enter email verification code

3

Settings

Set username and password

4

Complete registration

Welcome aboard

<template>
  <bp-steps v-model="current" type="vertical">
    <bp-step v-for="v in progessList" :description="v.description">{{ v.title }}</bp-step>
  </bp-steps>
</template>

<script setup lang="ts">
import { ref } from "vue";

const current = ref(0);
const progessList = [
  { title: "Enter email and invite code", description: "Supports common emails" },
  { title: "Validate email", description: "Enter email verification code" },
  { title: "Settings", description: "Set username and password" },
  { title: "Complete registration", description: "Welcome aboard" },
];
</script>

Horizontal Steps

Default is horizontal; switch to vertical with type="vertical".

Step 1

Fill in info

2

Step 2

In review

3

Step 3

Done

<template>
  <div style="display: flex; gap: 20px">
    <bp-steps v-model="current" type="horizontal">
      <bp-step description="Fill in info">Step 1</bp-step>
      <bp-step description="In review">Step 2</bp-step>
      <bp-step description="Done">Step 3</bp-step>
    </bp-steps>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";

const current = ref(1);
</script>

Interactive Steps

Drive previous/next navigation with buttons.

1

Fill in info

Fill in basic info

2

In review

Pending review

3

Done

Registered

<template>
  <div>
    <bp-steps v-model="current">
      <bp-step v-for="v in steps" :description="v.description">{{ v.title }}</bp-step>
    </bp-steps>
    <div style="margin-top: 20px">
      <bp-button size="small" type="plain" @click="prev" :disabled="current <= 0">Previous</bp-button>
      <bp-button
        size="small"
        status="primary"
        @click="next"
        :disabled="current >= steps.length - 1"
        style="margin-left: 8px"
      >
        Next
      </bp-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";

const current = ref(0);
const steps = [
  { title: "Fill in info", description: "Fill in basic info" },
  { title: "In review", description: "Pending review" },
  { title: "Done", description: "Registered" },
];

const prev = () => {
  if (current.value > 0) current.value--;
};
const next = () => {
  if (current.value < steps.length - 1) current.value++;
};
</script>

Steps Props

v-model	Current step index	Number	-	-
type	Direction	String	horizontal	-
hide-line	Whether to hide the connector	Boolean	-	-

Step Props

index	Step index	Number	-	-
status	Status	String	wait	-
description	Description	String	-	-
type	Direction	String	horizontal	-
hide-line	Whether to hide the connector	Boolean	-	-

Steps Slots

default

Step list

-

-

Step Slots

default

Title content

-

-