Steps

Align-center matches Arco's vertical label placement; other forms retain Element Plus structures. See the Element Plus docs for props.

Centered Steps

Align-center matches Arco vertical labels; Next advances the steps.

<script setup lang="ts">
import { ref } from 'vue'
const active = ref(1)
</script>

<template>
  <div style="width: 100%; ">
    <el-steps :active="active" align-center>
      <el-step title="Start" description="Create the project" />
      <el-step title="Review" description="Review the details" />
      <el-step title="Finish" description="Publish the result" />
    </el-steps>
  </div>
  <el-button @click="active = (active + 1) % 4">Next</el-button>
</template>

Default & Error Status

The default layout and error state retain Element Plus structure with Arco colors.

<script setup lang="ts">
import { ref } from 'vue'
const active = ref(1)
</script>

<template>
  <div style="width: 100%; ">
    <el-steps :active="active" process-status="error">
      <el-step title="Start" description="Create the project" />
      <el-step title="Review" description="Review the details" />
      <el-step title="Finish" description="Publish the result" />
    </el-steps>
  </div>
  <el-button @click="active = (active + 1) % 4">Next</el-button>
</template>

Simple Steps

Simple has no equivalent Arco structure and keeps the compact Element Plus layout.

<script setup lang="ts">
import { ref } from 'vue'
const active = ref(1)
</script>

<template>
  <div style="width: 100%; ">
    <el-steps :active="active" simple>
      <el-step title="Start"  />
      <el-step title="Review"  />
      <el-step title="Finish"  />
    </el-steps>
  </div>
  <el-button @click="active = (active + 1) % 4">Next</el-button>
</template>

Vertical Steps

Vertical retains the Element Plus layout with themed status colors.

<script setup lang="ts">
import { ref } from 'vue'
const active = ref(1)
</script>

<template>
  <div style="width: 100%; height: 240px">
    <el-steps :active="active" direction="vertical">
      <el-step title="Start" description="Create the project" />
      <el-step title="Review" description="Review the details" />
      <el-step title="Finish" description="Publish the result" />
    </el-steps>
  </div>
  <el-button @click="active = (active + 1) % 4">Next</el-button>
</template>

Differences from Arco

• Finish shows a number rather than Arco's checkmark; connector timing and layout follow Element Plus.
• Default left-aligned, simple and vertical forms use themed colors with Element Plus layouts.