El Steps

Steps Component

Steps component guides users through tasks in accordance with a process.

When to Use

• Wizard interfaces
• Process workflows
• Step progress indicators
• Multi-step forms

Basic Usage

<template>
  <el-steps :active="active" finish-status="success">
    <el-step title="Step 1" />
    <el-step title="Step 2" />
    <el-step title="Step 3" />
  </el-steps>
  
  <el-button @click="next">Next step</el-button>
</template>

<script setup>
import { ref } from 'vue'

const active = ref(0)

const next = () => {
  if (active.value++ > 2) active.value = 0
}
</script>

With Status

<template>
  <el-steps :active="1">
    <el-step title="Step 1" description="Some description" />
    <el-step title="Step 2" description="Some description" status="process" />
    <el-step title="Step 3" description="Some description" status="wait" />
  </el-steps>
</template>

Center

<template>
  <el-steps :active="2" align-center>
    <el-step title="Step 1" />
    <el-step title="Step 2" />
    <el-step title="Step 3" />
  </el-steps>
</template>

With Description

<template>
  <el-steps :active="1">
    <el-step title="Step 1" description="Description for step 1" />
    <el-step title="Step 2" description="Description for step 2" />
    <el-step title="Step 3" description="Description for step 3" />
  </el-steps>
</template>

With Icon

<template>
  <el-steps :active="1">
    <el-step title="Step 1" :icon="Edit" />
    <el-step title="Step 2" :icon="Upload" />
    <el-step title="Step 3" :icon="Picture" />
  </el-steps>
</template>

<script setup>
import { Edit, Upload, Picture } from '@element-plus/icons-vue'
</script>

Vertical

<template>
  <el-steps :active="1" direction="vertical">
    <el-step title="Step 1" />
    <el-step title="Step 2" />
    <el-step title="Step 3" />
  </el-steps>
</template>

Simple

<template>
  <el-steps :active="1" simple>
    <el-step title="Step 1" />
    <el-step title="Step 2" />
    <el-step title="Step 3" />
  </el-steps>
</template>

API Reference

Steps Attributes

Step Attributes

Step Slots

Best Practices

1. Use active to track current step
2. Use direction="vertical" for limited width
3. Use simple for minimal UI