Stepper

Steps begin at 1. The parent owns validation and content panels. Disable steps until prerequisites are satisfied. Linear mode prevents jumping ahead of the next step.

Preview

Open in the playground

Usage

StepperExample.vueVue / TS

<script setup lang="ts">
import { ref } from 'vue'
import { FzStepper } from '@chrisdalbano/forza-ui'
import type { ForzaStep } from '@chrisdalbano/forza-ui'
const step = ref<number>(1)
const steps: ForzaStep[] = [
  { title: 'Choose' },
  { title: 'Configure' },
  { title: 'Review' },
]
</script>

<template>
  <FzStepper v-model="step" label="Setup" :steps="steps" />
</template>

TypeScript exampleSource you can use.

Import the shared stylesheet once and wrap your app in .fz-theme. See installation.

Props

Name	Type	Required	Default
steps	readonly ForzaStep[]	Yes	None
label	string	Yes	None
linear	boolean | undefined	No	true
modelValue	number	Yes	None

Events and state

v-model: number (1-based)

• update:modelValue: [value: number]

Slots

none

Add from source

forza add stepper

Set up the CLI first. Generated API tables come from the Vue source, using Vue Language Tools.