Stepper

Stepper and StepperStep form a compound component for wizard-style multi-step flows. The Stepper manages navigation state and renders the indicator track automatically from the registered steps; StepperStep provides the step content and exposes an actions slot for navigation buttons.

ExamplesCodeUsageChangelog

Basic horizontal

Tailwind v4

<script setup>
import { ref } from 'vue'
const step = ref(0)
</script>

<Stepper v-model="step">
  <StepperStep title="Account" description="Login details">
    <p>Set up your account credentials.</p>
    <template #actions="{ next, back, isFirst, isLast }">
      <Button :disabled="isFirst" @click="back">Back</Button>
      <Button @click="next">{{ isLast ? 'Finish' : 'Continue' }}</Button>
    </template>
  </StepperStep>
  <StepperStep title="Profile" description="Your information">
    <p>Tell us a bit about yourself.</p>
    <template #actions="{ next, back, isFirst, isLast }">
      <Button :disabled="isFirst" @click="back">Back</Button>
      <Button @click="next">{{ isLast ? 'Finish' : 'Continue' }}</Button>
    </template>
  </StepperStep>
  <StepperStep title="Review">
    <p>Check everything looks right before submitting.</p>
    <template #actions="{ next, back, isFirst, isLast }">
      <Button :disabled="isFirst" @click="back">Back</Button>
      <Button @click="next">{{ isLast ? 'Finish' : 'Continue' }}</Button>
    </template>
  </StepperStep>
</Stepper>

Vertical orientation

Tailwind v4

<Stepper v-model="step" orientation="vertical">
  <StepperStep title="Shipping" description="Where to send it">
    <p>Enter your shipping address details.</p>
    <template #actions="{ next, back, isFirst, isLast }">
      <Button :disabled="isFirst" @click="back">Back</Button>
      <Button @click="next">{{ isLast ? 'Place Order' : 'Next' }}</Button>
    </template>
  </StepperStep>
  <StepperStep title="Payment" description="How to pay">
    <p>Enter your payment information.</p>
    <template #actions="{ next, back, isFirst, isLast }">
      <Button :disabled="isFirst" @click="back">Back</Button>
      <Button @click="next">{{ isLast ? 'Place Order' : 'Next' }}</Button>
    </template>
  </StepperStep>
  <StepperStep title="Confirm">
    <p>Review your order before placing it.</p>
    <template #actions="{ next, back, isFirst, isLast }">
      <Button :disabled="isFirst" @click="back">Back</Button>
      <Button @click="next">{{ isLast ? 'Place Order' : 'Next' }}</Button>
    </template>
  </StepperStep>
</Stepper>

With form content and sizes

Tailwind v4

<Stepper v-model="step" size="lg">
  <StepperStep title="Personal Info" description="Basic details" icon="👤">
    <!-- form fields -->
    <template #actions="{ next, back, isFirst, isLast }">
      <Button :disabled="isFirst" @click="back">Back</Button>
      <Button @click="next">{{ isLast ? 'Submit' : 'Continue' }}</Button>
    </template>
  </StepperStep>
  <StepperStep title="Choose Plan" icon="📋">
    <!-- plan picker -->
    <template #actions="{ next, back, isFirst, isLast }">
      <Button :disabled="isFirst" @click="back">Back</Button>
      <Button @click="next">{{ isLast ? 'Submit' : 'Continue' }}</Button>
    </template>
  </StepperStep>
</Stepper>

Props

Stepper

Prop	Type	Default	Description
modelValue	number	0	Active step index (0-based). Use with v-model
orientation	'horizontal' | 'vertical'	'horizontal'	Layout direction of the indicator track
linear	boolean	true	When true, users cannot skip ahead past uncompleted steps
size	'sm' | 'md' | 'lg'	'md'	Size of the step indicator circles

StepperStep

Prop	Type	Default	Description
title	string	—	Required. Label shown in the indicator track
description	string	—	Optional subtitle shown beneath the title in the track
icon	string	—	Emoji or character shown inside the circle instead of the step number
disabled	boolean	false	Prevents the step from being navigated to

Emits

Stepper

Event	Payload	Description
update:modelValue	number	Emitted when the active step changes
complete	—	Emitted when next() is called on the final step

Slots

Stepper

Slot	Description
default	Place StepperStep components here

StepperStep

Slot	Slot props	Description
default	—	Step body content, shown only when this step is active
actions	{ next, back, isFirst, isLast, step, canGoNext, isCompleted }	Navigation controls area. Use the injected next / back helpers to advance or retreat