# wizard

### Overview

The Wizard component is used to build multi-part forms. The component provides a few built-in components, for the progress bar, the button bar, and a slide deck component to animate the transitions. This component also provides a number of options to validate the input data along the way, to enable/diable the user from going to the next step. The progress bar is pure CSS and builds itself based on the slides you provide.

## Basic Usage

This is the most basic implementation of the wizard. This example does not include any input validation. Notice the wizard fits nice and flush within a `card` component.

<card>
</card>

## Validation

One of the key components to building a successfull multi-step form is being able to determine when the user can go to the next step. This requires validating the data, enabling, or disabling specific buttons. The validation function must return `true` or `false`.

#### Step Validation

There are two main ways to validate the current step in the form. The easiest way is to validate the data within each `wizard-step` component. This allows each step to have a unique validation routine.

#### Global Validation

The other way to validate the steps is by using a single global validation routine in the `wizard` component.

<card>
</card>