Description

...

Element	Details	Images
Header	The header describes the wizard’s purpose / expected results.	In case of a dialog:
Navigation bar	Shows all of the steps in the wizard. Indicates which step the user is currently on, and the steps which have already been covered.	Image RemovedImage Added
Content area	Displays content relevant for the selected step, including a header, a form, and additional content to support decisions. The form may include a variety of input fields types, such as Radio Buttons, Check Boxes, and Drop-down Menus.
Actions Row	On each step, the actions row will include at least two Dialog Buttons: Back (secondary) and Next (or other primary). On the first step, the Back button is disabled. On the last step, the primary button will show the final action that will occur (e.g. Create statistic Set). Additional buttons may also be included. If one of the fields contains an error, the primarybutton will be disabled and an error message will be shown (see validations and errors below).	Image Removed

Default State

By default, the wizard will show the first step, with the first field in focus.

Internal Logic

...

In some cases, a decision made in a specific step will add one or more steps to the process. In this case, the additional steps will be added to the navigation bar.

...

message will be shown (see validations and errors below).

Image Added

Default State

By default, the wizard will show the first step, with the first field in focus.

States

Step navigation states:

Currently selected step
Last step selected	Coming soon…
Previous steps which have already been covered
Uncompleted steps
Hover	Coming soon…
Active	Coming soon…
Selected Hover	Coming soon…
Focus	Coming soon…
Focus Hover	Coming soon…
Focus Selected	Coming soon…

...

• On the navigation panel, the user can only select steps that were already filled in. Selecting a step shows the content of that step and updates the navigation panel accordingly.

• Clicking the Next button saved the data and goes to the next step (. In this case, both the content and the navigation bar are updated).

• Clicking the Back button saves the data (without triggering a mandatory field validation), and goes to the previous step. In this case, all changes made to the current step will not be saved.

...

• On the last step, clicking the primary buttonthe primary button:

  • performs the wizard action,

  • either:

    • closes the dialog

    , what happens is case of a page?

  • performs the action,

  • • (or goes to the initial page), and shows a success (or failure) toast

    . Is the data still saved somewhere?

...

• • • ,

    • goes to a final step showing the results.

...

• If the wizard appears in a dialog, clicking the X button on the header will close the dialog, without saving its content. Warning?In this case, a confirmation popup may appear.

Validations and errors

• Clicking the Next button or the primary button in the last step triggers a validation process. In case of an error (either an invalid field value or a missing mandatory field):

  • the button is disabled,

  • an error message appears next to the buttons.

  • After fixing the errors, the message disappears and the button is enabled.

• For more information, see Field Validation.

...

• The number of steps should be between 3 and 7.

• On each step:

  • Keep keep the wizard title short and informative.,

  • Include include a brief explanation at the top, describing the purpose of the step.Provide ,

  • set the focus to the first field,

  • provide the user with enough information to make decisions and act on them.,

  • Use use default values where possible.

• On the last step show a summary of what is about to be created or updated.

• Where possible, save user input when leaving a step or in case of a wizard submission failure.

Accessibility compliance

...