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.
Step Wizard
A 3-step wizard with next/previous navigation buttons and per-step content rendering.
Step 1
Content for step 1
Features
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>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>Step.Root
Props
namespace
string | undefinedNamespace for dependency injection (must match StepItem namespace)
Default: "v0:step"
mandatory
boolean | "force" | undefinedControls 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
modelValue
T | T[] | undefinedSlots
default
StepRootSlotPropsStep.Item
Props
Slots
default
StepItemSlotProps<V>