A wizard provides an interface for a user to proceed through a sequence of steps required to complete a task.

Usage

Wizards are used to help users walk through a defined step-by-step process. Each step is in the sidebar on the left. As users complete steps, the steps are marked with a green bar to the left.

Here is when you might want to use a wizard over just a normal form:

• if the user is not familiar with the domain knowledge needed to complete a process
• if the user needs to accomplish a goal that has many steps in it
• if steps must be completed in a specific sequence

<clr-wizard #wizard [clrWizardOpen]="open" (clrWizardOpenChange)="reset($event)">
  <clr-wizard-title>New Pok&egrave;mon</clr-wizard-title>

  <clr-wizard-button [type]="'cancel'">Cancel</clr-wizard-button>
  <clr-wizard-button [type]="'previous'">Back</clr-wizard-button>
  <clr-wizard-button [type]="'next'">Next</clr-wizard-button>
  <clr-wizard-button [type]="'finish'">Done</clr-wizard-button>

  <clr-wizard-page #pageOne [clrWizardPageNextDisabled]="name.pristine || !formPageOneValid">
    <ng-template clrPageTitle>Basic Information</ng-template>
    <ng-template clrPageNavTitle>{{ pageOneTitle }}</ng-template>

    <form clrForm clrLayout="horizontal" #formPageOne="ngForm">
      <clr-input-container>
        <label>Name</label>
        <input clrInput name="name" required [(ngModel)]="model.name" #name="ngModel" />
        <clr-control-error>This field cannot be empty!</clr-control-error>
      </clr-input-container>

      <clr-select-container>
        <label>Height (Feet)</label>
        <select clrSelect name="ht_feet" [(ngModel)]="model.ht_feet">
          <option *ngFor="let measure of [ '0 ft.', '1 ft.', '2 ft.', '3 ft.', '4 ft.' ]" [value]="measure">
            {{measure}}
          </option>
        </select>
      </clr-select-container>

      <clr-select-container>
        <label>Height (Inches)</label>
        <select clrSelect name="ht_inches" [(ngModel)]="model.ht_inches">
          <option
            *ngFor="let inch of [ '0 in.', '1 in.', '2 in.', '3 in.', '4 in.', '5 in.', '6 in.', '7 in.', '8 in.', '9 in.', '10 in.', '11 in.' ]"
            [value]="inch"
          >
            {{inch}}
          </option>
        </select>
      </clr-select-container>

      <clr-input-container>
        <label>Weight</label>
        <input clrInput placeholder="lbs." name="weight" [(ngModel)]="model.weight" />
        <clr-control-error>This field cannot be empty!</clr-control-error>
      </clr-input-container>

      <clr-select-container>
        <label>Gender</label>
        <select clrSelect name="gender" [(ngModel)]="model.gender">
          <option *ngFor="let g of [ 'Male', 'Female' ]" [value]="g">
            {{g}}
          </option>
        </select>
      </clr-select-container>
    </form>
  </clr-wizard-page>

  <clr-wizard-page #pageTwo>
    <ng-template clrPageTitle>Color</ng-template>
    <ng-template clrPageNavTitle>{{ pageTwoTitle }}</ng-template>
    <form #formPageTwo="ngForm">
      <section class="form-block">
        <label>Your pok&egrave;mon will be {{ colorLabel }}.</label>
        <div class="clr-row wizdemo-color-block-row">
          <div *ngFor="let color of colorList" class="wizdemo-color-block-wrapper clr-col-3">
            <div
              class="wizdemo-color-block"
              [style.backgroundColor]="color"
              [class.active]="color === model.color"
              (click)="model.color = color"
            >
              &nbsp;
            </div>
          </div>
        </div>
      </section>
    </form>
  </clr-wizard-page>

  <clr-wizard-page #pageThree [clrWizardPageNextDisabled]="!formPageThreeValid">
    <ng-template clrPageTitle>Power</ng-template>
    <ng-template clrPageNavTitle>{{ pageThreeTitle }}</ng-template>

    <clr-alert
      [clrAlertClosable]="false"
      clrAlertType="alert-error"
      *ngIf="showPowerError"
      [clrCloseButtonAriaLabel]="'Close Wiki alert'"
    >
      <clr-alert-item>
        <span class="alert-text">
          Your power and weakness cannot be from the same source.
        </span>
      </clr-alert-item>
    </clr-alert>

    <form #formPageTwo="ngForm">
      <section class="form-block">
        <label>Your pok&egrave;mon {{ textsplanationOfPower }}.</label>
        <div class="clr-row wizdemo-color-block-row">
          <div *ngFor="let icon of powerSources" class="wizdemo-color-block-wrapper clr-col-3">
            <div
              class="wizdemo-color-block is-icon"
              [class.active]="icon === model.power"
              [class.disabled]="icon === model.weakness"
              (click)="setPower(icon)"
            >
              <cds-icon [attr.shape]="icon"></cds-icon>
            </div>
          </div>
        </div>
      </section>
    </form>
  </clr-wizard-page>

  <clr-wizard-page #pageFour [clrWizardPageNextDisabled]="!formPageThreeValid">
    <ng-template clrPageTitle>Weakness</ng-template>
    <ng-template clrPageNavTitle>{{ pageFourTitle }}</ng-template>

    <clr-alert [clrAlertClosable]="false" clrAlertType="alert-error" *ngIf="showPowerError">
      <clr-alert-item>
        <span class="alert-text">
          Your power and weakness cannot be from the same source.
        </span>
      </clr-alert-item>
    </clr-alert>

    <form #formPageTwo="ngForm">
      <section class="form-block">
        <label>Your pok&egrave;mon {{ textsplanationOfWeakness }}.</label>
        <div class="clr-row wizdemo-color-block-row">
          <div *ngFor="let icon of powerSources" class="wizdemo-color-block-wrapper clr-col-3">
            <div
              class="wizdemo-color-block is-icon"
              [class.active]="icon === model.weakness"
              [class.disabled]="icon === model.power"
              (click)="setWeakness(icon)"
            >
              <cds-icon [attr.shape]="icon"></cds-icon>
            </div>
          </div>
        </div>
      </section>
    </form>
  </clr-wizard-page>

  <clr-wizard-page #pageFive (clrWizardPageOnLoad)="createRanking()">
    <ng-template clrPageTitle>Summary</ng-template>

    <p>
      Your pok&egrave;mon's name is {{ model.name }}. {{ model.gender === "Male" ? "He" : "She" }} {{
      textsplanationOfPower }} but {{ textsplanationOfWeakness }}.
    </p>

    <p>
      Your pok&egrave;mon's power ranking is: {{ model.ranking }}{{ powerRankingPunctuation }}
    </p>

    <p>
      {{ textsplanationOfRanking }}
    </p>
  </clr-wizard-page>
</clr-wizard>

Anatomy

Sizes

There are multiple sizes for wizards. The Clarity wizard defaults to x-large but different sizes could be used based on the content and screen sizes you are planning to support. Always remember to test responsiveness as you design and use wizards. The best size is one that doesn’t feel like there is too much or too little whitespace. If you’re unsure, test different ones to see which looks best.

Medium: Width - 576px

Large: Width - 864px

Extra Large: Width - 1152px

Steps

Wizards should have at least 2 steps. If your wizard exceeds 10 steps, consider combining similar steps.

Step Indicators

• Current step is indicated by a row-selected blue background
• Complete steps are indicated by a green bar to the left

Building Steps

When building a step, it’s important to organize related tasks in it. Unrelated tasks should be separate into a new step. This helps preserve context around the step being completed. If a step’s content scrolls, consider splitting the step into two steps or use a larger sized wizard. Scrolling content can sometimes be overlooked and users may try to progress to the next step unintentionally. It’s best to include only the required tasks in a step so users know they need to fill out everything they see. Optional tasks slow the process of filling out a wizard.

Conditional Steps

Conditional wizards change step content or the number of steps based on the entry from another step. Non-conditional wizards are preferable. However, if a conditional wizard is necessary, it is preferred to update the next step to be completed. Otherwise, users might lose context of what change was made.

Titles

Titles are concise summaries. The wizard title describes the overall workflow. The step title describes the task being completed. The content title should be similar to its step title.

Content area

The content may differ between different types of wizards. Content can be text, a form, or both. Be concise and provide a clear explanation of the task or information a user should focus on.

Buttons

Default progress buttons are provided, but can be overridden. Buttons are right-aligned based on the Z Pattern. Read more about it in Button Placement.

Behavior

Error Validation

Enhancement to the wizard component to add an error state to the wizard step states.

Error Reported

When an error occurs, replace the step number with the error icon. This design is consistent with the stepper design. Change the progress indicator to red and add a one pixel gap above and below the red bar for accessibility.

Error State Active

Indicate clearly why the error occurs on the error step.

Error Resolved

The progress indicator changed back to green once all errors are resolved.

Dismissing Wizard

• A user needs to actively dismiss a wizard. A wizard should not disappear on its own
• Completing all of the steps or cancelling should dismiss the wizard
• The wizard can be closed by clicking the finish button, the cancel button, or canceling out by clicking the close "X" in the top right. Content

Clarity Wizards are not dismissed when clicking on the background overlay. This prevents losing information or data. An option to override this is available.

Use Cases Under Consideration

• When selections in a later step in the wizard invalidate entries in earlier steps
• When the user resolves an error/errors in the current step