...
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.
...
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.
...
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
Zeplin link | Screen thumbnail |
|---|---|
    |
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> |
...