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 interactive widget. It tracks the active item and exposes sequential navigation methods (first, last, next, prev, step) plus per-item state on each slot’s attrs; it ships pointer activation (a click handler) but no role, keyboard navigation, or focus management.

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

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

This is single-selection navigation state. For a fully accessible tabbed stepper — role="tablist" / role="tab", arrow-key navigation, and roving tabindex — use Tabs, which composes the same step logic. When you bind attrs to your own element, you are responsible for wiring the navigation methods to keyboard handlers and supplying the roles the pattern requires.

FAQ