PxFormWizard

A multi-step form wizard that combines a built-in step navigation header with PxSchemaForm dynamic rendering and per-step Zod schema validation.

Basic Usage

Multi-Step Schema Form Wizard

Tipo de Cuenta *

Select...

Correo Electrónico *

<script setup lang="ts">
import { ref } from 'vue'
import { PxFormWizard, type WizardStep } from 'praxis-vue-ui'
import { z } from 'zod'

const formData = ref({
  email: '',
  companyName: ''
})

const steps: WizardStep[] = [
  {
    id: 'account',
    title: 'Cuenta',
    description: 'Acceso inicial',
    schema: [
      { key: 'email', label: 'Correo', type: 'text', required: true }
    ],
    zodSchema: z.object({
      email: z.string().min(1, 'El correo es requerido').email('Correo no válido')
    })
  },
  {
    id: 'organization',
    title: 'Organización',
    description: 'Datos de empresa',
    schema: [
      { key: 'companyName', label: 'Empresa', type: 'text', required: true }
    ],
    zodSchema: z.object({
      companyName: z.string().min(2, 'Mínimo 2 caracteres')
    })
  }
]
</script>

<template>
  <PxFormWizard
    v-model="formData"
    :steps="steps"
    @complete="(data) => console.log('Wizard completado:', data)"
  />
</template>

Props

Props

Prop	Type	Default	Description
steps	WizardStep[]	[]	Array of step configuration objects (see WizardStep interface below).
modelValue	Record<string, unknown>	{}	Two-way bound form state across all steps.
loading	boolean	false	Disables step buttons and displays a loading spinner.
linear	boolean	true	When true, users cannot jump ahead to steps without successfully completing previous steps.
nextLabel	string	'Siguiente'	Label for the advance button.
previousLabel	string	'Anterior'	Label for the back button.
completeLabel	string	'Completar'	Label for the submit button on the final step.
loadingLabel	string	'Guardando...'	Text shown when loading is active.

WizardStep Interface

interface WizardStep {
  id: string | number
  title: string
  description?: string
  icon?: Component
  schema: FormSchemaField[]
  zodSchema?: ZodSchema<any>
  validate?: (
    stepData: Record<string, unknown>,
    allData: Record<string, unknown>
  ) => boolean | Promise<boolean> | string | Promise<string>
}

Emits

Emits

Event	Payload	Description
update:modelValue	Record<string, unknown>	Emitted whenever any field value changes.
step-change	stepIndex: number, step: WizardStep	Emitted when moving between steps.
complete	Record<string, unknown>	Emitted on the last step after all validations pass.
error	{ stepIndex: number, message: string }	Emitted when step validation fails.

Slots

Slots

Slot	Scope	Description
before-form	{ step: WizardStep, stepIndex: number }	Content placed before the active step's schema form.
after-form	{ step: WizardStep, stepIndex: number }	Content placed after the active step's schema form.
actions	{ step: WizardStep, stepIndex: number, isLastStep: boolean }	Custom replacement for next / complete action buttons.