Wizard

Overview

It can be helpful to break down a large process or form into multiple steps for the user, allowing them work on one step at a time.

We often use a wizard to implement these multi-step processes. A wizard helps the user navigate back and forth through each step of the process, working on one step at a time, while maintaining a cohesive user experience throughout the overall process.

A wizard has the following elements:

• A title displays at the top of the wizard — typically as the display block title — identifying the current step in the process.
  • The title should be succinct, while providing enough detail to allow the user to understand what the current step is about.
• Back and Next buttons display below the title.
  • By convention we label them as “< Back” and “Next >”.
  • The Back button moves the user back one step in the process. It is disabled on the first screen of the wizard.
  • The Next button moves the user forward one step in the process. It is labeled as “Finish” on the last screen of the wizard.
  • A Cancel button is optional, but only for cases where this wizard was a secondary activity that the user branched to from a different, primary activity. The Cancel button should return the user to the primary activity after confirming the cancel.
• The content for the current step displays below the Back/Next buttons.
• Use fixed layout in order to keep the Back/Next buttons always accessible at larger screen widths.
  • If the content for any step of the wizard causes the Back/Next buttons to scroll off the screen at mobile size, use a floating toolbar to keep the buttons always accessible.

A wizard gathers input from the user over multiple steps, then commits the input after the user presses the “Finish” button on the last step. Changes are typically not committed until the end of the overall process.

Each step of the wizard displays the data and inputs for a single, cohesive task in the overall process. If you include too little content in a step, it can drag out the wizard to too many steps. If you include too much content in a step, it can make that step unwieldy and awkward. It’s important to partition the overall process into a series of simple tasks, each of which is just the right size.

Wizards in responsive applications are always implemented in the function view, never in a dialog box.

Users press the Back and Next buttons to move through the wizard steps, one step at a time. The Back and Next buttons are left-aligned.

You can display step links next to the wizard if you want to allow the user to quickly jump back to a previous step in the wizard.

• Step links display one link for each step in the wizard.
• Step links display to the right of the wizard inputs at tablet or desktop size. Step links are hidden at mobile size.
• Step links are typically best for wizards that are linear, i.e. wizards that don’t branch subsequent steps based on the input to previous steps.
• Each step link can be in one of the following states:
  • Active: A link for the current step of the wizard. The active link appears bolder than the others, quickly showing users where they are in the overall wizard process.
  • Static: A link that isn’t for the current step of the wizard and is not clickable. Static step links are helpful when you don’t want users to be able to click ahead to a subsequent step of the wizard until they have provided input for the current step.
  • Clickable: A link that isn’t for the current step of the wizard but is clickable. Clickable step links can help the user quickly return to steps for which they have already provided input.

If the user attempts to navigate away from the wizard view but has entered non-trivial data into the wizard, your application should prompt for confirmation before losing the data.

Development

Web component development

The following example shows a wizard that has 4 steps for gathering input, 1 step to display a recap of that input, and a final screen to display the results of adding the user.

The TypeScript uses a wizardStepIndex number variable to indicate the current step number and a wizardTitle string variable to specify the current step title. The display block binds its title to the wizardTitle variable, allowing the TypeScript to update the title displayed as the user moves from step to step.

The content for each of the steps is a series of divs. The proper div is displayed for the current step using *ngIf.

Step links display in a separate display block to the right of the wizard content at tablet and desktop sizes. This display block is hidden at mobile size, using the rui-hidden-phone CSS class. Within that display block we add the rui-wizard-step-links CSS class to a container div. We then include one anchor element for each step link, adding the rui-step-link-active CSS class to the current step link, the rui-step-link-clickable CSS class to any step link that isn’t the current step and is clickable, and the rui-step-link-static CSS class to any step link that isn’t the current step and isn’t clickable.

The Back button is disabled if wizardStepIndex is less than 2, i.e. the user is on the first step. The Next button’s text is bound to a TypeScript variable (wizardNextButtonText), allowing that button to display “Finish” on the recap step and “Next >” on the previous steps.

<rui-function-view titleText="Wizard" isFixedLayout="true" [jhaIsBusy]="loading">

    <!-- The floating toolbar keeps the Back/Next buttons accessible when the user scrolls down at mobile size -->
    <rui-floating-toolbar>
        <rui-button *ngIf="wizardStepIndex <= 4" text="&lt; Back" (rui-click)="WizardBack()"
            [isDisabled]="wizardStepIndex < 2"></rui-button>
        <rui-button *ngIf="wizardStepIndex <= 4" text="{{wizardNextButtonText}}" buttonStyle="Primary"
            (rui-click)="WizardNext()" [isDisabled]="wizardNextButtonDisabled"></rui-button>
    </rui-floating-toolbar>

    <!-- Fixed layout keeps the Back/Next buttons accessible at larger screen sizes -->
    <rui-fixed-layout-container orientation="horizontal">

        <rui-fixed-layout-element width="star">

            <!-- Wizard content -->
            <rui-display-block [titleText]="wizardTitle" class="rui-fixed-layout-size-star">

                <!-- Back/Next buttons -->
                <rui-toolbar slot="display-block-toolbar-below">
                    <rui-button *ngIf="wizardStepIndex <= 4" text="&lt; Back" (rui-click)="WizardBack()"
                        [isDisabled]="wizardStepIndex < 2"></rui-button>
                    <rui-button *ngIf="wizardStepIndex <= 4" text="{{wizardNextButtonText}}" buttonStyle="Primary"
                        (rui-click)="WizardNext()" [isDisabled]="wizardNextButtonDisabled"></rui-button>
                </rui-toolbar>

                <!-- Wizard step 1: Select recipient -->
                <div class="rui-wizard-content" *ngIf="wizardStepIndex == 1">

                    <!-- content for step 1... -->

                </div>

                <!-- Wizard step 2: Select account -->
                <div class="rui-wizard-content" *ngIf="wizardStepIndex == 2">

                    <!-- content for step 2... -->

                </div>

                <!-- Wizard step 3: Specify amount and comment -->
                <div class="rui-wizard-content" *ngIf="wizardStepIndex == 3">

                    <!-- content for step 3... -->

                </div>

                <!-- Wizard step 4: Recap -->
                <div class="rui-wizard-content" *ngIf="wizardStepIndex == 4">

                    <!-- content for step 4... -->

                </div>

                <!-- Wizard step 5: Result message -->
                <div class="rui-wizard-content" *ngIf="wizardStepIndex == 5">

                    <!-- content for recap... -->

                </div>

            </rui-display-block>

        </rui-fixed-layout-element>

        <rui-fixed-layout-element width="250" class="rui-hidden-mobile">
    
            <!-- Step links -->
            <rui-display-block class="rui-fixed-layout-size-250 rui-hidden-phone">
                <div class="rui-wizard-step-links">
                    <a (click)="wizardStep(1)"
                        [ngClass]="{'rui-step-link-active' : wizardStepIndex == 1, 'rui-step-link-clickable' : wizardMaxStepVisited >= 1}">Recipient</a>
                    <a (click)="wizardStep(2)"
                        [ngClass]="{'rui-step-link-active' : wizardStepIndex == 2, 'rui-step-link-clickable' : wizardMaxStepVisited >= 2, 'rui-step-link-static' : wizardMaxStepVisited < 2}">Account</a>
                    <a (click)="wizardStep(3)"
                        [ngClass]="{'rui-step-link-active' : wizardStepIndex == 3, 'rui-step-link-clickable' : wizardMaxStepVisited >= 3, 'rui-step-link-static' : wizardMaxStepVisited < 3}">Amount</a>
                    <a (click)="wizardStep(4)"
                        [ngClass]="{'rui-step-link-active' : wizardStepIndex == 4, 'rui-step-link-clickable' : wizardMaxStepVisited >= 4, 'rui-step-link-static' : wizardMaxStepVisited < 4}">Recap</a>
                </div>
            </rui-display-block>

        </rui-fixed-layout-element>

    </rui-fixed-layout-container>

</rui-function-view>

Angular wrapper development

The following example shows a wizard that has 4 steps for gathering input, 1 step to display a recap of that input, and a final screen to display the results of adding the user.

The TypeScript uses a wizardStepIndex number variable to indicate the current step number and a wizardTitle string variable to specify the current step title. The display block binds its title to the wizardTitle variable, allowing the TypeScript to update the title displayed as the user moves from step to step.

The content for each of the steps is a series of divs. The proper div is displayed for the current step using *ngIf.

Step links display in a separate display block to the right of the wizard content at tablet and desktop sizes. This display block is hidden at mobile size, using the jha-hidden-phone CSS class. Within that display block we add the jha-wizard-step-links CSS class to a container div. We then include one anchor element for each step link, adding the jha-step-link-active CSS class to the current step link, the jha-step-link-clickable CSS class to any step link that isn’t the current step and is clickable, and the jha-step-link-static CSS class to any step link that isn’t the current step and isn’t clickable.

The Back button is disabled if wizardStepIndex is less than 2, i.e. the user is on the first step. The Next button’s text is bound to a TypeScript variable (wizardNextButtonText), allowing that button to display “Finish” on the recap step and “Next >” on the previous steps.

<jha-function-view jhaTitle="Wizard" jhaIsFixedLayout="true" [jhaIsBusy]="loading">

    <!-- The floating toolbar keeps the Back/Next buttons accessible when the user scrolls down at mobile size -->
    <jha-floating-toolbar>
        <jha-button *ngIf="wizardStepIndex <= 4" jhaText="&lt; Back" (jhaClick)="WizardBack()"
            [jhaIsDisabled]="wizardStepIndex < 2"></jha-button>
        <jha-button *ngIf="wizardStepIndex <= 4" jhaText="{{wizardNextButtonText}}" jhaButtonStyle="Primary"
            (jhaClick)="WizardNext()" [jhaIsDisabled]="wizardNextButtonDisabled"></jha-button>
    </jha-floating-toolbar>

    <!-- Fixed layout keeps the Back/Next buttons accessible at larger screen sizes -->
    <div class="jha-fixed-layout-container-horizontal">

        <!-- Wizard content -->
        <jha-display-block [jhaTitle]="wizardTitle" class="jha-fixed-layout-size-star">

            <!-- Back/Next buttons -->
            <jha-display-block-toolbar>
                <jha-button *ngIf="wizardStepIndex <= 4" jhaText="&lt; Back" (jhaClick)="WizardBack()"
                    [jhaIsDisabled]="wizardStepIndex < 2"></jha-button>
                <jha-button *ngIf="wizardStepIndex <= 4" jhaText="{{wizardNextButtonText}}" jhaButtonStyle="Primary"
                    (jhaClick)="WizardNext()" [jhaIsDisabled]="wizardNextButtonDisabled"></jha-button>
            </jha-display-block-toolbar>

            <!-- Wizard step 1: Select recipient -->
            <div class="jha-wizard-content" *ngIf="wizardStepIndex == 1">

                <!-- content for step 1... -->

            </div>

            <!-- Wizard step 2: Select account -->
            <div class="jha-wizard-content" *ngIf="wizardStepIndex == 2">

                <!-- content for step 2... -->

            </div>

            <!-- Wizard step 3: Specify amount and comment -->
            <div class="jha-wizard-content" *ngIf="wizardStepIndex == 3">

                <!-- content for step 3... -->

            </div>

            <!-- Wizard step 4: Recap -->
            <div class="jha-wizard-content" *ngIf="wizardStepIndex == 4">

                <!-- content for step 4... -->

            </div>

            <!-- Wizard step 5: Result message -->
            <div class="jha-wizard-content" *ngIf="wizardStepIndex == 5">

                <!-- content for recap... -->

            </div>

        </jha-display-block>

        <!-- Step links -->
        <jha-display-block class="jha-fixed-layout-size-250 jha-hidden-phone">
            <div class="jha-wizard-step-links">
                <a (click)="wizardStep(1)"
                    [ngClass]="{'jha-step-link-active' : wizardStepIndex == 1, 'jha-step-link-clickable' : wizardMaxStepVisited >= 1}">Recipient</a>
                <a (click)="wizardStep(2)"
                    [ngClass]="{'jha-step-link-active' : wizardStepIndex == 2, 'jha-step-link-clickable' : wizardMaxStepVisited >= 2, 'jha-step-link-static' : wizardMaxStepVisited < 2}">Account</a>
                <a (click)="wizardStep(3)"
                    [ngClass]="{'jha-step-link-active' : wizardStepIndex == 3, 'jha-step-link-clickable' : wizardMaxStepVisited >= 3, 'jha-step-link-static' : wizardMaxStepVisited < 3}">Amount</a>
                <a (click)="wizardStep(4)"
                    [ngClass]="{'jha-step-link-active' : wizardStepIndex == 4, 'jha-step-link-clickable' : wizardMaxStepVisited >= 4, 'jha-step-link-static' : wizardMaxStepVisited < 4}">Recap</a>
            </div>
        </jha-display-block>

    </div>

</jha-function-view>

Design

Figma design

A wizard allows the user to enter values in a series of linear steps, one step at a time.

The user presses Next and Back buttons to move forwards and backwards through the wizard one step at a time.

A wizard can optionally display step links that allow the user to see which step they’re on in the overall process. These step links can optionally be clickable, allowing the user to jump directly to that step.

A wizard design displays up to two display blocks:

• The main display block for the wizard appears on the left.
  • The display block title describes the current step of the wizard. This can be a simple title or a prompt to direct the user’s response.
  • "< Back" and “Next >” buttons display below the display block title.
  • The Back button is a secondary text button and the Next button is a primary text button.
  • The Back button is disabled on the first step and enabled on subsequent steps.
  • The Next button’s text changes to “Finish” on the last step.
  • The Next button can optionally be disabled until the user enters valid input for the step.
  • The set of inputs and data for the current step display below the Back/Next buttons.
• An optional second display block displays the step links on the right.
  • The steps link corresponding to the current wizard step is active.
  • The other step links are either clickable if the user can click them to jump to that step or non-clickable if the user cannot jump directly to that step. This is up to your product team to decide.
  • Any step that contains a validation error in it — whether active, clickable, or non-clickable — should display with error styling.
  • IMPORTANT: The step link display block is hidden at mobile mobile size.

Adobe XD design

A wizard allows the user to enter values in a series of linear steps, one step at a time.

The user presses Next and Back buttons to move forwards and backwards through the wizard one step at a time.

A wizard can optionally display step links that allow the user to see which step they’re on in the overall process. These step links can optionally be clickable, allowing the user to jump directly to that step.

A wizard design displays up to two display blocks:

• The main display block for the wizard appears on the left.
  • The display block title describes the current step of the wizard. This can be a simple title or a prompt to direct the user’s response.
  • "< Back" and “Next >” buttons display below the display block title.
  • The Back button is a secondary text button and the Next button is a primary text button.
  • The Back button is disabled on the first step and enabled on subsequent steps.
  • The Next button’s text changes to “Finish” on the last step.
  • The Next button can optionally be disabled until the user enters valid input for the step.
  • The set of inputs and data for the current step display below the Back/Next buttons.
• An optional second display block displays the step links on the right.
  • The steps link corresponding to the current wizard step is active.
  • The other step links are either clickable if the user can click them to jump to that step or non-clickable if the user cannot jump directly to that step. This is up to your product team to decide.
  • Any step that contains a validation error in it — whether active, clickable, or non-clickable — should display with error styling.
  • IMPORTANT: The step link display block is hidden at mobile mobile size.