Wizard

<ui5-wizard> | Since 1.0.0-rc.10

The ui5-wizard helps users to complete a complex task by dividing it into sections and guiding them through it. It has two main areas - a navigation area at the top showing the step sequence and a content area below it.

Structure

Navigation area

The top most area of the ui5-wizard is occupied by the navigation area. It shows the sequence of steps, where the recommended number of steps is between 3 and 8 steps.

• Steps can have different visual representations - numbers or icons.
• Steps might have labels for better readability - titleText and subTitleText.
• Steps are defined by using the ui5-wizard-step as slotted element within the ui5-wizard.

Note: If no selected step is defined, the first step will be auto selected.

Note: If multiple selected steps are defined, the last step will be selected.

Keyboard Handling

The user can navigate using the following keyboard shortcuts:

Wizard Progress Navigation

• [Left] or [Down] - Focus moves backward to the WizardProgressNavAnchors.
• [Up] or [Right] - Focus moves forward to the WizardProgressNavAnchor.
• [Space] / [Enter] or [Return] - Selects an active step
• [Home] or [PAGE UP] - Focus goes to the first step
• [End] or [PAGE DOWN] - Focus goes to the last step

Fast Navigation

This component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up]. In order to use this functionality, you need to import the following module: import "@ui5/webcomponents-base/dist/features/F6Navigation.js"

Content

The content occupies the main part of the page. It can hold any type of HTML elements. It's defined by using the ui5-wizard-step as slotted element within the ui5-wizard.

Scrolling

The component handles user scrolling by selecting the closest step, based on the current scroll position and scrolls to particular place, when the user clicks on the step within the navigation area.

Important: In order the component's scrolling behaviour to work, it has to be limited from the outside parent element in terms of height. The component or its parent has to be given percentage or absolute height. Otherwise, the component will be scrolled out with the entire page.

For example:

<ui5-dialog style="height: 80%">
	<ui5-wizard></ui5-wizard>
</ui5-dialog>

Moving to next step

The ui5-wizard-step provides the necessary API and it's up to the user of the component to use it to move to the next step. You have to set its selected property (and remove the disabled one if set) to true. The ui5-wizard will automatically scroll to the content of the newly selected step.

The Fiori 3 guidelines recommends having a "nextStep" button in the content area. You can place a button, or any other type of element to trigger step change, inside the ui5-wizard-step, and show/hide it when certain fields are filled or user defined criteria is met.

Usage

When to use:

When the user has to accomplish a long or unfamiliar task.

When not to use:

When the task has less than 3 steps.

Responsive Behavior

On small widths the step's titleText, subtitleText and separators in the navigation area shrink and from particular point the steps are grouped together and overlap. Tapping on them will show a popover to select the step to navigate to. On mobile device, the grouped steps are presented within a dialog.

ES6 Module Import

import "@ui5/webcomponents-fiori/dist/Wizard.js"; (includes )

Basic Sample

By default the navigation to another step happens with scrolling or pressing the given step in the Wizard header. How to use the sample: to explore the steps click the "Step2' button, then enable the "5 years guarantee included " switch to disover the "Step3" button to reach the final step.

Properties

accessibleName

Description	Defines the accessible ARIA name of the component.
Type	string | undefined
Default	undefined
Since	2.26.0

accessibleNameRef

Description	Receives id(or many ids) of the elements that label the component.
Type	string | undefined
Default	undefined
Since	2.26.0

contentLayout

Description	Defines how the content of the ui5-wizard would be visualized.
Type	"MultipleSteps" | "SingleStep" (value descriptions in: WizardContentLayout)
Default	"MultipleSteps"
Since	1.14.0

Slots

default

Description	Defines the steps. Note: Use the available ui5-wizard-step component.
Type	Array<WizardStep>

Events

step-change

Description	Fired when the step is changed by user interaction - either with scrolling, or by clicking on the steps within the component header.
Type	CustomEvent<WizardStepChangeEventDetail>
Parameters	previousStep: WizardStep The previous step. step: WizardStep The new step. withScroll: boolean true when the event occurs due to user scrolling.
Bubbles	Yes
Cancelable	No

Methods

No methods available for this component.

CSS Parts

For more information on how to use CSS shadow parts, see Usage of CSS Shadow Parts.

Name	Description
navigator	Used to style the progress navigator of the ui5-wizard.
step-content	Used to style a ui5-wizard-step container.

CSS Custom States

No CSS custom states available for this component.

More Samples

Page Mode

Instead of scrolling each step is shown as a separate page.