...
A wizard is a step-by-step 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 directly on the pagewithin a workspace.
...
Usage & Behavior
General guidelines
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 (see below).
Structure
Element | Details | Images |
|---|---|---|
Header (In case of a dialog) |
|
In case of a dialog:
|  |
Navigation bar |
|
 | |
Content area |
|
|
|
|
|
 | |
Actions Row |
|
 |
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 |
 | |
Previous steps which have already been covered |
 | |
Uncompleted steps |
 | |
Hover |
 | |
Active |
 | |
Selected Hover |
 | |
Focus |
 | |
Focus Hover |
 | |
Focus Selected |
 |
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.
...
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
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 informationEach 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.
...
The number of steps should be between 3 and 7.
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,
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
Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.
Design
Code
| Html macro | ||
|---|---|---|
| ||
<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> |
...