---
layout: ../../layouts/PageLayout.astro
title: Multi-step Form Wizard
description: a multi-step form wizard
order: 7
---

import LiveExample from '@/components/LiveExample.vue';

# Multi-step Form Wizard

These examples showcases a simple multi-step form (form wizard), with `next` and `previous` step navigation.

## Higher Order Components

This example uses the higher-order components only.

<LiveExample client:visible id="vee-validate-v4-hoc-multi-step-form" />

## Composition API

This example uses the composition API to construct a system of `<FormStep>` and `<FormWizard>` components to make building form steps easier.

<LiveExample client:visible id="vee-validate-v4-multi-step-form-composition" />
