Table of Contents

Description

A wizard is a step-by-step dialog which allows process, allowing users to perform a set of actions in a predefined order, in order to accomplish a goal.

...

It may appear in a dialog or within a workspace.

...

Usage & Behavior

General guidelines

...

A wizard can appear on either a dialog or a page.

...

guidelines

Wizard steps may:
- depend on previous steps,
- may be mandatory or non-mandatory,
- depend on previous steps,
- may be skipped according to previous selections.
A Wizard can be entered in one of these has two possible modes:
- Create mode. The - where the wizard is entirely new: , i.e. no fields have previously been filled in. Steps In this case, steps must be completed in the predefined order.
- Edit mode. Fields - where fields have previously been completed, and filled in. In this case, the user may move freely between the steps using the navigation panelbar (see below).

Structure

Element	Details	Images
Header (In case of a dialog)	The header describes the wizard’s purpose / expected results

.

In case of a dialog box:

Image Removed

Steps navigation panel

, and the name/ID of the object that the wizard operates upon (if one exists).	Image Added
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.

Enables jumping between steps.
This differs between Create and Edit modes. See Interaction below.

Image Removed

Step content

Image Added
Content area	Displays content relevant

content

for the selected step, including a

step header, input fields

title, a Form, and additional content to support decisions.
The

content area contains a form which can include all

Form may include a variety of input fields types, such as Radio Buttons,

Check Boxes

Checkboxes, and Drop-down Menus.

Image RemovedIn

Image Added

Actions Row

Contains Back and Next Dialog Buttons.

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

will be

is disabled.

In

On the last step, the

Next

primary button will

change to

show the final action

which

that will occur

. For example,

(e.g. Create statistic Set).
Additional

action

buttons may also be included.
If one of the fields contains an error, the

Next

primarybutton will be disabled and

a guiding

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

Image Removed

Image Added

Image Removed

Default State

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

Internal Logic

Step = Inner sub page

The user can cancel and exit the wizard at any time before pressing the last confirmation in the last step. All selections and actions inside the wizard will be canceled.
The Wizard control can be entered in Create or Edit modes. See Interaction below.

States

Step navigation states:

Currently selected step

Image Removed

Image Added
Last step selected	Image Added
Previous steps which have already been covered

Image Removed

Image Added
Uncompleted steps

Image Removed

Image Added
Hover	Image Added
Active	Image Added
Selected Hover	Image Added
Focus	Image Added
Focus Hover	Image Added
Focus Selected	Image Added

Interaction

1. First step

In Edit mode, any step can be selected from the left-hand navigation panel.

Image Removed

2. Middle steps

It should be possible to return to any previous step using the navigation panel.
Navigating to an earlier step shows the choices and content the user has previously entered, which can all be changed or edited.
If the user navigates to an earlier step and doesn’t change anything, all of the content for the steps which have already been completed will remain the same.
If the user navigates to an earlier step and changes something, it may clear or invalidate other choices within this step or other steps, where there are dependencies. All other choices and content should remain the same.
In Edit mode, any step can be selected from the left-hand navigation panel.

Image Removed

3. Last step

Where relevant, show a summary of what is about to be created or updated.
The Next button will change to show the final action which will occur. For example, Create statistic Set.
After the wizard has been completed, a success or failure message should be shown in a Toast.
In Edit mode, any step can be selected from the left-hand navigation panel.

Image Removed

Validations and errors

Validations are shown inside each step, both for individual fields and the entire step as a whole. See Field Validation.

Image Removed

Transitions

When moving between steps, a transition will be used in the navigation panel, if technically possible.

...

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.

...

On the last step, clicking the primary button:
- performs the wizard action,
- either:
  - closes the dialog (or goes to the initial page), and shows a success (or failure) toast,
  - 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. In this case, a confirmation popup may appear.

Validations and errors

Each step of the wizard behaves as a separate form, where both client-side and server-side validations may occur.
For detailed information about form validations, see Forms Validations and Errors.
For detailed information about specific component’s validations, see Field Validation.

...

Transitions

When moving between steps, a transition should be used on both the navigation bar and the content area to illustrate the flow.

Best practices

Use where:

object creation or editing may be complex and needs to be divided into steps.
users needs guided help.
steps are dependant on each other in a complex way.

Don’t use where:

the overall task isn’t complex (less than 3 steps).
advanced users might be frustrated by a wizard, which can be rigid and limiting.

General

The number of steps should be between 3 and 7, for readability and ease of use.Provide .
On each step:
- keep the wizard title short and informative,
- include a brief explanation at the top, describing the purpose of the step,
- set the focus to the first field,
- provide the user with enough information to make decisions and act on them
.
The title of each step should be short and clear, and describe the step’s purpose.
Each step should present a brief explanation of its purpose at the beginning.
Use defaults or predefined
- ,
- use default values where possible.

Use where:

object creation or editing may be complex and needs to be divided into steps.
users needs guided help.
steps are dependant on one another in a complex way.

Don’t use where:

the overall task isn’t complex.
users are advanced and might be frustrated by a wizard, which can be rigid and limitingOn 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

Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.

Design

Zeplin link	Screen thumbnail
https://zpl.io/bW6oWKa

Image Removed

Image Added

Code

Html macro

sanitize	false

<link rel="stylesheet" href="https://ux.verint.com/fonts/css/verint_lux.css">
<link rel="stylesheet" href="https://ux.verint.com/bootstrap-4.0.0/dist/css/bootstrap.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ux.verint.com/bootstrap-4.0.0/dist/js/bootstrap.bundle.js"></script>
<script src="https://ux.verint.com/bootstrap-4.0.0/dist/other/accessibility.js"></script>
<script src="https://ux.verint.com/bootstrap-4.0.0/dist/other/prism.min.js"></script>
<link rel="stylesheet" href="https://ux.verint.com/bootstrap-4.0.0/dist/other/prism-coy.min.css">


<div class="card">
			<div class="card-header">Wizard <button id="toggleMarkup" type="button" class="btn btn-sm btn-outline-primary btn btn-fixed-width float-right m-0" onclick="$('pre' ).toggle()">Toggle Markup</button></div>
			<div class="card-body">
				<div class="form-group row">
					<label for="inputKey" class="col-lg-2 col-form-label col-form-label-sm">Wide Example</label>
					<div class="col-lg-4">
						<button class="btn btn-sm btn-light btn-fixed-width" type="button" data-toggle="modal" data-target="#wideModal">Wide Wizard</button>
						<!-- Modal -->
						<div class="modal fade" id="wideModal" tabindex="-1" role="dialog" aria-labelledby="wideModalLabel" aria-hidden="true">
							<div class="modal-dialog modal-dialog-sm modal-wide modal-dialog-centered modal-wizard" role="document">
								<div class="modal-content">
									<div class="modal-header">
										<h5 class="modal-title" id="wideModalLabel">Wizard Name</h5>
										<button type="button" class="close" data-dismiss="modal" aria-label="Close">
											<span aria-hidden="true">×</span>
										</button>
									</div>
									<div id="collapseOne" class="collapse show" data-parent="#wideModal">
										<nav aria-label="breadcrumb">
										  <ol class="breadcrumb">
										    <li class="breadcrumb-item active" aria-current="page">First Wizard Step with some more</li>
										    <li class="breadcrumb-item">Second Wizard Step with some</li>
										    <li class="breadcrumb-item">Last Wizard Step with some more</li>
										  </ol>
										</nav>
										<div class="modal-body">
											<h5>First Wizard Step Header</h5>
											<p>Morbi in faucibus lorem. Aliquam sollicitudin, mi tincidunt volutpat semper, neque nibh pulvinar sapien, nec vehicula sapien odio et mi. Curabitur volutpat nunc non magna porta, eu pellentesque eros porttitor. Sed imperdiet mollis massa in hendrerit. Nullam sed nunc auctor, sollicitudin odio nec, auctor tortor. Nulla facilisi. Vestibulum mattis elit quis tristique viverra. Aliquam accumsan enim velit, eget dictum leo tristique et. Proin varius mauris erat, in molestie ligula ut.</p>
											<form>
												<div class="custom-control custom-control-sm custom-checkbox">
												  <input type="checkbox" id="customCheckbox1" name="customCheckbox" class="custom-control-input">
												  <label class="custom-control-label" for="customCheckbox1">Morbi in faucibus lorem</label>
												</div>
												<div class="custom-control custom-control-sm custom-checkbox">
												  <input type="checkbox" id="customCheckbox2" name="customCheckbox" class="custom-control-input">
												  <label class="custom-control-label" for="customCheckbox2">Aliquam sollicitudin</label>
												</div>
												<div class="custom-control custom-control-sm custom-checkbox">
												  <input type="checkbox" id="customCheckbox3" name="customCheckbox" class="custom-control-input">
												  <label class="custom-control-label" for="customCheckbox3">Curabitur volutpat nunc non magna</label>
												</div>
												<div class="custom-control custom-control-sm custom-checkbox">
												  <input type="checkbox" id="customCheckbox4" name="customCheckbox" class="custom-control-input">
												  <label class="custom-control-label" for="customCheckbox4">Nullam sed nunc auctor</label>
												</div>
											</form>
										</div>
										<div class="modal-footer">
											<button type="button" class="btn btn-sm btn-light btn-fixed-width" disabled>Back</button>
											<button type="button" class="btn btn-sm btn-primary btn-fixed-width" data-toggle="collapse" data-target="#collapseTwo">Next</button>
										</div>
									</div>
									<div id="collapseTwo" class="collapse" data-parent="#wideModal">
										<nav aria-label="breadcrumb">
										  <ol class="breadcrumb">
										    <li class="breadcrumb-item complete">First Wizard Step with some more</li>
										    <li class="breadcrumb-item active" aria-current="page">Second Wizard Step with some</li>
										    <li class="breadcrumb-item">Last Wizard Step with some more</li>
										  </ol>
										</nav>
										<div class="modal-body">
											<h5>Second Wizard Step Header</h5>
											<p>Morbi in faucibus lorem. Aliquam sollicitudin, mi tincidunt volutpat semper, neque nibh pulvinar sapien, nec vehicula sapien odio et mi. Curabitur volutpat nunc non magna porta, eu pellentesque eros porttitor. Sed imperdiet mollis massa in hendrerit. Nullam sed nunc auctor, sollicitudin odio nec, auctor tortor. Nulla facilisi. Vestibulum mattis elit quis tristique viverra. Aliquam accumsan enim velit, eget dictum leo tristique et. Proin varius mauris erat, in molestie ligula ut.</p>
											<form>
												<div class="custom-control custom-control-sm custom-checkbox">
												  <input type="checkbox" id="customCheckbox5" name="customCheckbox" class="custom-control-input">
												  <label class="custom-control-label" for="customCheckbox5">Morbi in faucibus lorem</label>
												</div>
												<div class="custom-control custom-control-sm custom-checkbox">
												  <input type="checkbox" id="customCheckbox6" name="customCheckbox" class="custom-control-input">
												  <label class="custom-control-label" for="customCheckbox6">Aliquam sollicitudin</label>
												</div>
												<div class="custom-control custom-control-sm custom-checkbox">
												  <input type="checkbox" id="customCheckbox7" name="customCheckbox" class="custom-control-input">
												  <label class="custom-control-label" for="customCheckbox7">Curabitur volutpat nunc non magna</label>
												</div>
												<div class="custom-control custom-control-sm custom-checkbox">
												  <input type="checkbox" id="customCheckbox8" name="customCheckbox" class="custom-control-input">
												  <label class="custom-control-label" for="customCheckbox8">Nullam sed nunc auctor</label>
												</div>
											</form>
										</div>
										<div class="modal-footer">
											<button type="button" class="btn btn-sm btn-light btn-fixed-width" data-toggle="collapse" data-target="#collapseOne">Back</button>
											<button type="button" class="btn btn-sm btn-primary btn-fixed-width" data-toggle="collapse" data-target="#collapseThree">Next</button>
										</div>
									</div>
									<div id="collapseThree" class="collapse" data-parent="#wideModal">
										<nav aria-label="breadcrumb">
										  <ol class="breadcrumb">
										    <li class="breadcrumb-item complete">First Wizard Step with some more</li>
										    <li class="breadcrumb-item complete">Second Wizard Step with some</li>
										    <li class="breadcrumb-item active" aria-current="page">Last Wizard Step with some more</li>
										  </ol>
										</nav>
										<div class="modal-body">
											<h5>Last Wizard Step Header</h5>
											<p>Morbi in faucibus lorem. Aliquam sollicitudin, mi tincidunt volutpat semper, neque nibh pulvinar sapien, nec vehicula sapien odio et mi. Curabitur volutpat nunc non magna porta, eu pellentesque eros porttitor. Sed imperdiet mollis massa in hendrerit. Nullam sed nunc auctor, sollicitudin odio nec, auctor tortor. Nulla facilisi. Vestibulum mattis elit quis tristique viverra. Aliquam accumsan enim velit, eget dictum leo tristique et. Proin varius mauris erat, in molestie ligula ut.</p>
											<form>
												<div class="custom-control custom-control-sm custom-checkbox">
												  <input type="checkbox" id="customCheckbox9" name="customCheckbox" class="custom-control-input">
												  <label class="custom-control-label" for="customCheckbox9">Morbi in faucibus lorem</label>
												</div>
												<div class="custom-control custom-control-sm custom-checkbox">
												  <input type="checkbox" id="customCheckbox10" name="customCheckbox" class="custom-control-input">
												  <label class="custom-control-label" for="customCheckbox10">Aliquam sollicitudin</label>
												</div>
												<div class="custom-control custom-control-sm custom-checkbox">
												  <input type="checkbox" id="customCheckbox11" name="customCheckbox" class="custom-control-input">
												  <label class="custom-control-label" for="customCheckbox11">Curabitur volutpat nunc non magna</label>
												</div>
												<div class="custom-control custom-control-sm custom-checkbox">
												  <input type="checkbox" id="customCheckbox12" name="customCheckbox" class="custom-control-input">
												  <label class="custom-control-label" for="customCheckbox12">Nullam sed nunc auctor</label>
												</div>
											</form>
										</div>
										<div class="modal-footer">
											<button type="button" class="btn btn-sm btn-light btn-fixed-width" data-toggle="collapse" data-target="#collapseTwo">Back</button>
											<button type="submit" class="btn btn-sm btn-primary btn-fixed-width" data-dismiss="modal">Finish</button>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="col-lg-6">
							<pre class="language-html"><code><script type="prism-html-markup"><button class="btn btn-sm btn-light btn-fixed-width" type="button" data-toggle="modal" data-target="#wideModal">Wide Wizard</button>
<!-- Modal -->
<div class="modal fade" id="wideModal" tabindex="-1" role="dialog" aria-labelledby="wideModalLabel" aria-hidden="true">
   <div class="modal-dialog modal-dialog-sm modal-wide modal-dialog-centered modal-wizard" role="document">
      <div class="modal-content">
         <div class="modal-header">
            <h5 class="modal-title" id="wideModalLabel">Wizard Name</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">×</span>
            </button>
         </div>
         <div id="collapseOne" class="collapse show" data-parent="#wideModal">
            <nav aria-label="breadcrumb">
               <ol class="breadcrumb">
                  <li class="breadcrumb-item active" aria-current="page">First Wizard Step with some more</li>
                  <li class="breadcrumb-item">Second Wizard Step with some</li>
                  <li class="breadcrumb-item">Last Wizard Step with some more</li>
               </ol>
            </nav>
            <div class="modal-body">
               <h5>First Wizard Step Header</h5>
               <p>Morbi in faucibus lorem. Aliquam sollicitudin, mi tincidunt volutpat semper, neque nibh pulvinar sapien, nec vehicula sapien odio et mi. Curabitur volutpat nunc non magna porta, eu pellentesque eros porttitor. Sed imperdiet mollis massa in hendrerit. Nullam sed nunc auctor, sollicitudin odio nec, auctor tortor. Nulla facilisi. Vestibulum mattis elit quis tristique viverra. Aliquam accumsan enim velit, eget dictum leo tristique et. Proin varius mauris erat, in molestie ligula ut.</p>
               <form>
                  <div class="custom-control custom-control-sm custom-checkbox">
                     <input type="checkbox" id="customCheckbox1" name="customCheckbox" class="custom-control-input">
                     <label class="custom-control-label" for="customCheckbox1">Morbi in faucibus lorem</label>
                  </div>
                  <div class="custom-control custom-control-sm custom-checkbox">
                     <input type="checkbox" id="customCheckbox2" name="customCheckbox" class="custom-control-input">
                     <label class="custom-control-label" for="customCheckbox2">Aliquam sollicitudin</label>
                  </div>
                  <div class="custom-control custom-control-sm custom-checkbox">
                     <input type="checkbox" id="customCheckbox3" name="customCheckbox" class="custom-control-input">
                     <label class="custom-control-label" for="customCheckbox3">Curabitur volutpat nunc non magna</label>
                  </div>
                  <div class="custom-control custom-control-sm custom-checkbox">
                     <input type="checkbox" id="customCheckbox4" name="customCheckbox" class="custom-control-input">
                     <label class="custom-control-label" for="customCheckbox4">Nullam sed nunc auctor</label>
                  </div>
               </form>
            </div>
            <div class="modal-footer">
               <button type="button" class="btn btn-sm btn-light btn-fixed-width" disabled>Back</button>
               <button type="button" class="btn btn-sm btn-primary btn-fixed-width" data-toggle="collapse" data-target="#collapseTwo">Next</button>
            </div>
         </div>
         <div id="collapseTwo" class="collapse" data-parent="#wideModal">
            <nav aria-label="breadcrumb">
               <ol class="breadcrumb">
                  <li class="breadcrumb-item complete">First Wizard Step with some more</li>
                  <li class="breadcrumb-item active" aria-current="page">Second Wizard Step with some</li>
                  <li class="breadcrumb-item">Last Wizard Step with some more</li>
               </ol>
            </nav>
            <div class="modal-body">
               <h5>Second Wizard Step Header</h5>
               <p>Morbi in faucibus lorem. Aliquam sollicitudin, mi tincidunt volutpat semper, neque nibh pulvinar sapien, nec vehicula sapien odio et mi. Curabitur volutpat nunc non magna porta, eu pellentesque eros porttitor. Sed imperdiet mollis massa in hendrerit. Nullam sed nunc auctor, sollicitudin odio nec, auctor tortor. Nulla facilisi. Vestibulum mattis elit quis tristique viverra. Aliquam accumsan enim velit, eget dictum leo tristique et. Proin varius mauris erat, in molestie ligula ut.</p>
               <form>
                  <div class="custom-control custom-control-sm custom-checkbox">
                     <input type="checkbox" id="customCheckbox5" name="customCheckbox" class="custom-control-input">
                     <label class="custom-control-label" for="customCheckbox5">Morbi in faucibus lorem</label>
                  </div>
                  <div class="custom-control custom-control-sm custom-checkbox">
                     <input type="checkbox" id="customCheckbox6" name="customCheckbox" class="custom-control-input">
                     <label class="custom-control-label" for="customCheckbox6">Aliquam sollicitudin</label>
                  </div>
                  <div class="custom-control custom-control-sm custom-checkbox">
                     <input type="checkbox" id="customCheckbox7" name="customCheckbox" class="custom-control-input">
                     <label class="custom-control-label" for="customCheckbox7">Curabitur volutpat nunc non magna</label>
                  </div>
                  <div class="custom-control custom-control-sm custom-checkbox">
                     <input type="checkbox" id="customCheckbox8" name="customCheckbox" class="custom-control-input">
                     <label class="custom-control-label" for="customCheckbox8">Nullam sed nunc auctor</label>
                  </div>
               </form>
            </div>
            <div class="modal-footer">
               <button type="button" class="btn btn-sm btn-light btn-fixed-width" data-toggle="collapse" data-target="#collapseOne">Back</button>
               <button type="button" class="btn btn-sm btn-primary btn-fixed-width" data-toggle="collapse" data-target="#collapseThree">Next</button>
            </div>
         </div>
         <div id="collapseThree" class="collapse" data-parent="#wideModal">
            <nav aria-label="breadcrumb">
               <ol class="breadcrumb">
                  <li class="breadcrumb-item complete">First Wizard Step with some more</li>
                  <li class="breadcrumb-item complete">Second Wizard Step with some</li>
                  <li class="breadcrumb-item active" aria-current="page">Last Wizard Step with some more</li>
               </ol>
            </nav>
            <div class="modal-body">
               <h5>Last Wizard Step Header</h5>
               <p>Morbi in faucibus lorem. Aliquam sollicitudin, mi tincidunt volutpat semper, neque nibh pulvinar sapien, nec vehicula sapien odio et mi. Curabitur volutpat nunc non magna porta, eu pellentesque eros porttitor. Sed imperdiet mollis massa in hendrerit. Nullam sed nunc auctor, sollicitudin odio nec, auctor tortor. Nulla facilisi. Vestibulum mattis elit quis tristique viverra. Aliquam accumsan enim velit, eget dictum leo tristique et. Proin varius mauris erat, in molestie ligula ut.</p>
               <form>
                  <div class="custom-control custom-control-sm custom-checkbox">
                     <input type="checkbox" id="customCheckbox9" name="customCheckbox" class="custom-control-input">
                     <label class="custom-control-label" for="customCheckbox9">Morbi in faucibus lorem</label>
                  </div>
                  <div class="custom-control custom-control-sm custom-checkbox">
                     <input type="checkbox" id="customCheckbox10" name="customCheckbox" class="custom-control-input">
                     <label class="custom-control-label" for="customCheckbox10">Aliquam sollicitudin</label>
                  </div>
                  <div class="custom-control custom-control-sm custom-checkbox">
                     <input type="checkbox" id="customCheckbox11" name="customCheckbox" class="custom-control-input">
                     <label class="custom-control-label" for="customCheckbox11">Curabitur volutpat nunc non magna</label>
                  </div>
                  <div class="custom-control custom-control-sm custom-checkbox">
                     <input type="checkbox" id="customCheckbox12" name="customCheckbox" class="custom-control-input">
                     <label class="custom-control-label" for="customCheckbox12">Nullam sed nunc auctor</label>
                  </div>
               </form>
            </div>
            <div class="modal-footer">
               <button type="button" class="btn btn-sm btn-light btn-fixed-width" data-toggle="collapse" data-target="#collapseTwo">Back</button>
               <button type="submit" class="btn btn-sm btn-primary btn-fixed-width" data-dismiss="modal">Finish</button>
            </div>
         </div>
      </div>
   </div>
</div></script></code></pre>
					</div>
				</div>
			</div>
		</div>

Version	Old Version 35	New Version Current
Changes made by	Liav Nadler	Liav Nadler
Saved on	Oct 22, 2020	Jan 19, 2025

Content Comparison

Versions Compared

Key

Description

Usage & Behavior

General guidelines

guidelines

Structure

Default State

Internal Logic

States

Interaction

1. First step

2. Middle steps

3. Last step

Validations and errors

Transitions

Validations and errors

Transitions

Best practices

Accessibility compliance

Design

Code