N Steps

Naive UI Steps Component

1, 2, 3... done! Show progress through a sequence of steps.

When to Use

Use this component when:

• Form wizards: Guide users through multi-step forms
• Checkout process: Show progress in e-commerce checkout
• Onboarding: Display progress through setup steps
• Task completion: Track progress through sequential tasks

When to Invoke

Invoke this skill when:

• User needs to implement step indicators
• User wants to create a wizard or multi-step form
• User needs to track progress through a sequence
• User wants clickable step navigation
• User asks about step customization

Features

• Multiple Sizes: Small and medium sizes
• Vertical Layout: Support for vertical step display
• Status States: Process, finish, error, and wait states
• Custom Icons: Customize icons for different states
• Clickable Steps: Allow clicking to navigate between steps
• Content Placement: Control where description appears

API Reference

Steps Props

Step Props

Steps Slots

Step Slots

Basic Usage

Basic Steps

<template>
  <n-steps :current="current" :status="currentStatus">
    <n-step
      title="I Me Mine"
      description="All through the day, I me mine I me mine, I me mine"
    />
    <n-step
      title="Let It Be"
      description="When I find myself in times of trouble Mother Mary comes to me"
    />
    <n-step
      title="Come Together"
      description="Here come old flat top He come grooving up slowly"
    />
    <n-step
      title="Something"
      description="Something in the way she moves Attracts me like no other lover"
    />
  </n-steps>
</template>

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

const current = ref(1)
const currentStatus = ref('process')
</script>

Vertical Steps

<template>
  <n-steps vertical :current="current" :status="currentStatus">
    <n-step
      title="I Me Mine"
      description="All through the day, I me mine I me mine, I me mine"
    />
    <n-step
      title="Let It Be"
      description="When I find myself in times of trouble Mother Mary comes to me"
    />
    <n-step title="Break" />
    <n-step
      title="Come Together"
      description="Here come old flat top He come grooving up slowly"
    />
  </n-steps>
</template>

Common Patterns

Interactive Steps with Navigation

<template>
  <n-space vertical>
    <n-steps :current="current" :status="currentStatus">
      <n-step title="Step 1" description="First step description" />
      <n-step title="Step 2" description="Second step description" />
      <n-step title="Step 3" description="Third step description" />
      <n-step title="Step 4" description="Final step description" />
    </n-steps>
    <n-button-group>
      <n-button @click="prev">
        <template #icon>
          <n-icon><ArrowBackIcon /></n-icon>
        </template>
        Previous
      </n-button>
      <n-button @click="next">
        Next
        <template #icon>
          <n-icon><ArrowForwardIcon /></n-icon>
        </template>
      </n-button>
    </n-button-group>
  </n-space>
</template>

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

const current = ref(1)
const currentStatus = ref('process')

const prev = () => {
  if (current.value > 1) current.value--
}

const next = () => {
  if (current.value < 4) current.value++
}
</script>

Clickable Steps

<template>
  <n-steps v-model:current="current">
    <n-step
      title="I Me Mine"
      description="All through the day, I me mine I me mine, I me mine"
    />
    <n-step
      title="Let It Be"
      description="When I find myself in times of trouble Mother Mary comes to me"
    />
    <n-step
      title="Come Together"
      description="Here come old flat top He come grooving up slowly"
    />
    <n-step
      disabled
      title="Something"
      description="Something in the way she moves"
    />
  </n-steps>
</template>

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

const current = ref(1)
</script>

Custom Icons

<template>
  <n-steps :current="current" :status="currentStatus">
    <template #finish-icon>
      <n-icon><CheckIcon /></n-icon>
    </template>
    <template #error-icon>
      <n-icon><CloseIcon /></n-icon>
    </template>
    <n-step title="Step 1" description="First step" />
    <n-step title="Step 2" description="Second step" />
    <n-step title="Step 3" description="Third step" />
  </n-steps>
</template>

Content Placement

<template>
  <n-steps
    :content-placement="contentPlacement"
    :current="current"
    :status="currentStatus"
  >
    <n-step title="Step 1" description="First step description" />
    <n-step title="Step 2" description="Second step description" />
    <n-step title="Step 3" description="Third step description" />
  </n-steps>
</template>

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

const contentPlacement = ref('right')
</script>

Step with Custom Content

<template>
  <n-steps :current="current" :status="currentStatus">
    <n-step title="I Me Mine">
      <div class="n-step-description">
        <p>All through the day, I me mine I me mine, I me mine</p>
        <n-button
          v-if="current === 1"
          type="primary"
          size="small"
          @click="next"
        >
          Next
        </n-button>
      </div>
    </n-step>
    <n-step title="Let It Be">
      <div class="n-step-description">
        <p>When I find myself in times of trouble Mother Mary comes to me</p>
        <n-button
          v-if="current === 2"
          type="primary"
          size="small"
          @click="next"
        >
          Next
        </n-button>
      </div>
    </n-step>
  </n-steps>
</template>

Error State

<template>
  <n-steps :current="2" status="error">
    <n-step title="Personal Info" description="Completed" />
    <n-step title="Verification" description="Validation failed" />
    <n-step title="Complete" description="Waiting" />
  </n-steps>
</template>

Best Practices

1. Limit step count: Keep steps between 3-7 for best UX

2. Clear descriptions: Provide meaningful descriptions for each step

3. Show progress: Always indicate current step clearly

4. Handle errors: Use error state when a step fails validation

5. Clickable navigation: Enable clicking for navigation when appropriate

6. Consistent sizing: Use consistent size throughout the application