Kendo UI for Vue Native Wizard Overview

The Kendo UI for Vue Native Wizard consists of one or more steps. Each step contains a Form with a set of components. The different steps can have their own custom layout that doesn't depend on the other steps.

A common use-case scenario for the Wizard component is a longer Form which is organized into multiple steps. Talking with real-life examples imagine a payment details form where one page is asking for personal information, another of the card information, and so on.

The main advantage of Wizard is allowing customers and leads to complete their information in smaller chunks, which creates a positive user experience and increases conversions.

The Kendo UI for Vue Wizard is not a separate component that can provide the Wizard functionality out of the box. However, using the combination of the Native Form and Stepper components, we can effortlessly achieve the functionality of a virtual Wizard component.

The Kendo UI for Vue Native Form and Stepper components are part of the Kendo UI for Vue library of Native Vue UI components. Each of the components is distributed through NPM under the following packages:

• Stepper - kendo-vue-layout package.
• Form - kendo-vue-form package.

Basic Usage

The following example demonstrates the Virtual Wizard component in action.

Functionality and Features

• Wizard data validation
• Using the Wizard functionality with router
• Content positioning

Suggested Links

• Getting started with the Form component
• API Reference of the Form
• Getting started with the Stepper component
• API Reference of the Stepper
• Kendo UI Productivity Tools extension for VS Code