Step

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

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.

<script setup lang="ts">
  import { Button, 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.Root class="px-4 py-1 border border-divider rounded" @click="prev">Previous</Button.Root>
        <Button.Root class="px-4 py-1 rounded bg-primary text-on-primary" @click="next">Next</Button.Root>
      </div>
    </template>
  </Step.Root>
</template>

Anatomy

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

<template>
  <Step.Root>
    <Step.Item />
  </Step.Root>
</template>

Recipes

Navigation Methods

The default slot exposes navigation methods for moving through steps:

<template>
  <Step.Root v-model="current">
    <template #default="{ first, last, next, prev, step }">
      <Step.Item value="details">Details</Step.Item>
      <Step.Item value="payment">Payment</Step.Item>
      <Step.Item value="confirm">Confirm</Step.Item>

      <button @click="prev">Back</button>
      <button @click="next">Continue</button>

      <!-- Jump by count: step(2) advances two steps, step(-1) goes back one -->
      <button @click="step(2)">Skip ahead</button>
    </template>
  </Step.Root>
</template>

Disabled Item Skipping

Disabled items are automatically skipped by next, prev, and step. Use this to conditionally hide steps based on form state:

<template>
  <Step.Root v-model="current">
    <Step.Item value="details">Details</Step.Item>

    <!-- Skipped by next/prev when needsShipping is false -->
    <Step.Item value="shipping" :disabled="!needsShipping">Shipping</Step.Item>

    <Step.Item value="confirm">Confirm</Step.Item>
  </Step.Root>
</template>

Accessibility

Step is a headless state provider, not a complete tablist. It tracks the active item and exposes first, last, next, prev, and step. Item attrs include role="tab", a tabindex, Enter/Space, and the click handler.

• Step.Root exposes aria-multiselectable="false" — single-selection.

• Step.Item exposes aria-selected and aria-disabled, plus data-selected and data-disabled for styling.

Binding attrs already applies role="tab" and Enter/Space. Wire arrow keys to next and prev yourself. For role="tablist" and arrow-key roving, use Tabs, which composes the same step logic.

FAQ