Kendo UI for jQuery Wizard Overview
- EXAMPLE
- VIEW SOURCE
-
Change Theme
defaultDefault Theme
- Main
- Main Dark
- Nordic
- Ocean Blue
- Ocean Blue A11Y
- Purple
- Turquoise
Bootstrap Theme- Main
- Bootstrap 3
- Bootstrap 3 Dark
- Main Dark
- Nordic
- Turquoise
- Turquoise Dark
- Urban
- Vintage
Material Theme- Main
- Arctic
- Lime Dark
- Main Dark
- Nova
Classic Theme- Main
- Green
- Green Dark
- Lavender
- Lavender Dark
- Main Dark
- Metro
- Metro Dark
- Moonlight
- Opal
- Opal Dark
- Silver
- Silver Dark
- Uniform
Fluent Theme- Main
Also available for:
API REFERENCEThe Wizard component is part of Kendo UI for jQuery, a professional grade UI library with 110+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.
Description
The Kendo UI for jQuery Wizard lets you easily create multi-step processes and guide step-by-step users in applications.
In this demo, you can see the implementation of a simple registration process using the Wizard widget, that requests user input in detail in three steps: Registration Info, Personal, and Payment Details. Breaking up a process into stages will simplify user input tasks so that they will need to manage just one form at a time. At each step, you have a pre-configured built-in validation of the input data and a progress indicator showing the number of steps left towards achieving their final goal for the process.
Key Features of Wizard component:
- Built-in Validation (If configured)
- Integration with the Form component
- Loading content using AJAX
- Configuring the position of the component's stepper
The Wizard widget can be initialized both from a form and div DOM elements. When initialized from a form element, if the Wizard configuration contains form definitions, the forms inside the widget will be initialized from a div DOM element. In this scenario, the ‘novalidate’ attribute should be added to the form element from which the Wizard is initialized.
< form id="wizard" novalidate> < /form>
The ‘novalidate’ attribute is needed to prevent the duplication of the built-in form validation and the default browser validation. If a form inside the Wizard is not validated using the component’s configuration, there is no need to add the ‘novalidate’ attribute.
You can find additional information on how to use the Kendo UI Wizard in this section of the product documentation. Here you can see the API provided by the widget.