Step

A headless component for navigation through multi-step processes like wizards and forms.

Copy Page as Markdown

RenderlessIntermediate100% coverageJan 27, 2026

Usage

The Step component extends Single with navigation methods for moving through a sequence of items. It provides methods for first, last, next, previous, and step-by-count navigation with automatic disabled item skipping.

Step 1

Content for step 1

<script setup lang="ts">
  import { Step } from '@vuetify/v0'
  import { shallowRef } from 'vue'

  const current = shallowRef(1)
</script>

<template>
  <Step.Root v-model="current">
    <template #default="{ next, prev }">
      <Step.Item v-for="i in 3" :key="i" :value="i">
        <template #default="{ isSelected }">
          <div v-if="isSelected" class="p-6 border border-divider rounded mb-4">
            <h3 class="text-lg font-semibold mb-2">Step {{ i }}</h3>
            <p class="text-secondary">Content for step {{ i }}</p>
          </div>
        </template>
      </Step.Item>

      <div class="flex gap-2">
        <button class="px-4 py-1 border border-divider rounded" @click="prev">Previous</button>
        <button class="px-4 py-1 rounded bg-primary text-on-primary" @click="next">Next</button>
      </div>
    </template>
  </Step.Root>
</template>

Anatomy

<script setup lang="ts">
  import { Step } from '@vuetify/v0'
</script>

<template>
  <Step.Root>
    <Step.Item value="step-1" />

    <Step.Item value="step-2" />
  </Step.Root>
</template>

API Reference

The following API details are for all variations of the Step component.

Step.Root

Props

namespace

string

Namespace for dependency injection (must match StepItem namespace)

Default: "v0:step"

disabled

boolean

Disables the entire step instance

Default: false

enroll

boolean

Auto-select non-disabled items on registration

Default: false

mandatory

boolean | "force"

Controls mandatory step behavior: - false (default): No mandatory step enforcement - true: Prevents deselecting the last selected item - `force`: Automatically selects the first non-disabled item on registration

Default: false