Components / Navigation

Stepper

An ordered process navigator with an active-step panel and optional linear flow.

Preview

Install

Run in your project

npx @getweini/cli@latest add stepper

Use cases

Checkout flow

Guide readers through details, payment, and final review in order.

Application process

Show the current stage while allowing revisits to completed sections.

Usage example

Vue

<script setup lang="ts">
import { ref } from 'vue'
import Stepper from './components/ui/stepper/Stepper.vue'
const step = ref('details')
const steps = [
  { value: 'details', label: 'Details', description: 'Your information' },
  { value: 'payment', label: 'Payment', description: 'Billing method' },
  { value: 'review', label: 'Review', optional: true },
]
</script>

<template>
  <Stepper v-model="step" :items="steps" optional-label="Optional" linear label="Checkout progress">
    <template #default="{ item }">Current panel: {{ item.label }}</template>
  </Stepper>
</template>

More examples

Linear checkout

The application owns the content and decides when to advance.

Linear checkout

<script setup lang="ts">
import { ref } from 'vue'
import Button from './components/ui/button/Button.vue'
import Stepper from './components/ui/stepper/Stepper.vue'
const step = ref('details')
const steps = [{ value: 'details', label: 'Details' }, { value: 'payment', label: 'Payment' }, { value: 'review', label: 'Review' }]
</script>

<template>
  <Stepper v-model="step" :items="steps" linear label="Checkout steps">
    <template #default="{ item }"><section><h2>{{ item.label }}</h2><Button v-if="step === 'details'" @click="step = 'payment'">Continue</Button></section></template>
  </Stepper>
</template>

Optional stage

Identify optional work with application-owned text.

Optional stage

<script setup lang="ts">
import Stepper from './components/ui/stepper/Stepper.vue'
const steps = [{ value: 'account', label: 'Account' }, { value: 'profile', label: 'Profile', optional: true }, { value: 'finish', label: 'Finish' }]
</script>

<template>
  <Stepper :items="steps" optional-label="Optional" orientation="vertical" label="Setup progress">
    <template #default="{ item }"><p>Complete {{ item.label }} to continue.</p></template>
  </Stepper>
</template>

Key API

The most useful props, models, slots, events, and methods for this component.

Key API for Stepper
Name	Type	Default or requirement
`v-model`	string \| undefined	first enabled item
`items`	{ value; label; description?; disabled?; optional? }[]	required
`orientation`	horizontal \| vertical	horizontal
`linear`	boolean	false
`label`	string	undefined
`optionalLabel`	string	undefined
`indicator / label`	slots	built-in content
`default`	panel slot with { item, index }	empty

The active step uses aria-current="step". Linear mode permits only the next enabled step while keeping completed steps revisitable; arrows, Home, and End move focus and skip disabled steps.

Implementation notes

Validate the active panel before moving to the next step in application code.
Linear mode permits the next enabled step and revisits to completed steps.

Accessibility and localization

The active step exposes aria-current="step"; provide a meaningful label for the overall process.