Use a wizard when your form involves multiple steps. This makes the experience more manageable for the user and helps to eliminate error by validating inputs as the user progresses.

1. Wizard header: This region identifies the task flow and provides the wizard's controls. The wizard header spands the full width of the viewport.
   • a. Wizard title (required): A short, descriptive title identifying the wizard.
   • b. Previous step button (required): A button allowing the user to return to the previous wizard step. This button is positioned similarly to a browser's back button and is aligned to the left side of the wizard's header. It should appear on all steps except the first.
   • c. Cancel button (required): A button allowing the user to leave the wizard. When clicked, a confirmation modal will appear. This button is aligned to the right side of the header.
2. Step identifier: This region provides the user with information regarding the current step.
   • a. Step title (required): A short, descriptive title uniquely identifying the step.
   • b. Step summary (optional): A summary of where the user is within the wizard, formatted as "Step X of Y".
   • c. Step description (optional): Any additional context or information about the current step.
3. Step inputs: Form inputs for the current step.
4. Step footer: The footer contains a primary action button to advance to the next step or finish the wizard. The footer should remain a consistent width across all steps of a wizard so that the next button is placed consistently for the user. Its width should match the width of the widest step.
   • a. Next/finish button (required): A primary action button that allows the user to advance to the next step or finish the wizard. This button should be aligned to the far-right side of the footer.
5. Cancel wizard modal (required), displayed when "Cancel" button is clicked: A center modal that provides double confirmation before the wizard is exited and cancelled.

A wizard should always appear as a fullscreen modal.

The Wizard header should always be sticky so that user has persistent access to previous step and cancel actions. The footer, when there is sufficient height on desktop, should be placed directly below the inputs. On mobile, or when there is not sufficient height to show all inputs, the footer should be sticky on the bottom of the window.

It is helpful to provide concise and clear descriptions for each step of the form. Keep each step simple and in chunks easy enough to fit on a single page. This helps the user have confidence in how to fill out the form correctly.

It is important to give the user an indication of where they are within the form. This should be done by indicating the total number of steps and the user's current position (i.e. "Step 1 of 3").

Validation should occur within each step of the wizard. If there are any errors with the inputs in the current step, the user should not be able to advance and errors should be displayed. Error display should follow conventions established by Form.

The final step of a wizard should summarize what has been accomplished or configured. This summary is displayed to the user prior to form submisson. In order to complete the wizard, the user will click a submit button provided on this screen. Examples of submit button labels include "Finish Setup", "Finish Configuration", etc.

It is important to provide the user with an option to "Cancel" or exit the wizard. Place this button on the upper right hand corner of the wizard. When clicked, the "Cancel" button should:

• Open a layer that allows the user to confirm they want to cancel.
• Provide two buttons with a clear binary choice (Example: yes or no) and a secondary term that reaffirms the action (Example: stay or exit)
• The Primary Button should be used to confirm cancellation (Example: "Yes, Exit") and a Secondary Button should give the option to return back to completing the wizard (Example: "No, Stay").

If guidance can be provided in a short description, use a single column wizard. When additional guidance is required for the form or content of the wizard, you might consider a two-column format.

If using a single column format:

• Center the "Next" or submit button directly under the form inputs.

If using a two column format:

• Wrap guidance in a containing box with different background color than the page, so that it is visually separate from form inputs.
• Center the "Next" or submit button underneath both the form inputs and the guidance.
• On desktop, place the guidance to the right of form inputs.
• On mobile, place the guidance above form inputs.

Common wizard variants.

When additional guidance is necessary, use a two-column wizard. Click "See Fullscreen" for a more realistic experience.