Wizard steps may:
- be mandatory or non-mandatory,
- depend on previous steps,
- be skipped according to previous selections.
A Wizard has two possible modes:
- Create mode - where the wizard is entirely new, i.e. no fields have previously been filled in. In this case, steps must be completed in the predefined order.
- Edit mode - where fields have previously been filled in. In this case, the user may move freely between steps using the navigation bar.

Structure

Element

Details

Images

Header

The header describes the wizard’s purpose / expected results.

In case of a dialog:

Image Modified

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 Modified

Content area

Displays content relevant for the selected step, including a header, a

form

Form, and additional content to support decisions.
The

form

Form may include a variety of input fields types, such as Radio Buttons, Checkboxes, and Drop-down Menus.	Image Modified
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 Modified

Default State

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

States

Step navigation states:

Currently selected step	Image Modified
Last step selected	Image Modified
Previous steps which have already been covered	Image Modified
Uncompleted steps	Image Modified
Hover	Image Modified
Active	Image Modified
Selected Hover	Image Modified
Focus	Image Modified
Focus Hover	Image Modified
Focus Selected	Image Modified

Interaction

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.

...

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

Design

Zeplin link	Screen thumbnail
https://zpl.io/bW6oWKa	Image ModifiedImage ModifiedImage Modified

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 41	New Version 42
Changes made by	Carlie Bradshaw	Carlie Bradshaw
Saved on	Mar 16, 2022	Oct 26, 2023

Content Comparison

Versions Compared

Key