Progress Indicator

Overview

Wizard of Zod provides a flexible approach to progress indicators, allowing developers to choose from built-in options, supply a custom component or none at all. The progress indicator helps users track their progress through the wizard steps.

Choosing a Progress Indicator

The wizard supports a configurable progressIndicator prop, which determines the type of progress indicator displayed. The available options are:

Value	Description
'bar'	A linear progress bar indicating the user's advancement.
'stepper'	A step-based indicator showing the current and completed steps.
null	Disables the progress indicator entirely.

Built-in Progress Indicators

Bar Indicator

The bar progress indicator is a simple linear bar that visually represents the completion percentage. It updates dynamically as the user moves through the wizard.

<Wizard progressIndicator="bar" />

Stepper Indicator

The stepper progress indicator displays a series of steps. The current step is highlighted, and completed steps show a checkmark. This is useful when you want users to have a clear understanding of their position within the wizard.

<Wizard progressIndicator="stepper" />

Providing a Custom Progress Indicator

If the built-in progress indicators do not meet your needs, you can provide a fully custom progress indicator using the #progressIndicator slot.

Example Usage

<Wizard>
  <template #progressIndicator>
    <div class="my-custom-progress">
      Step {{ currentStep }} of {{ totalSteps }}
    </div>
  </template>
</Wizard>

How It Works

When using the slot, Wizard of Zod will render your custom progress indicator instead of the built-in ones. You can access currentQuestion, totalQuestions and completed through slot props to create your desired UI.

See the guide on the progressIndicator slot for more information.

Conclusion

The progressIndicator prop and slot allow for maximum flexibility, ensuring that the progress indicator aligns with your project’s design requirements. Whether using the built-in bar or stepper, or crafting a fully custom progress UI, Wizard of Zod makes it easy to guide users through multi-step forms efficiently.