Wizard

Specifications

Orientation & Layout

• Wizards are available in two orientations: Vertical & Horizontal
• Use Horizontal orientation for a process less than 5 steps
• Use Vertical orientation for a process of 3 steps and above (Limit is 9 steps)

Indicators & Labels

• Indicator can be numbers or icons, however all indictors need to be consistent. If you use numbers it has to be used for all indicators in each step.
• Indicator States:
  • Incomplete: Use Neutral/Gray 3
    #a3a6b1
    for steps that are not complete
  • Current: Use Blue Pale
    #dcedf9
    for steps that user is filling
  • Complete: Use Trimble Blue Dark
    #004f83
    for completed steps

Labels

Please follow the below guidelines for styling and size

• Label should not be more than 3 words with a max-width of 120px and not more than 2 line wrapping.
• If the step is complete the line to the right is Trimble Blue Dark
  #004f83
  , if the step is in progress or not started then the line to the right is Neutral/Gray 3
  #a3a6b1

Hidden Labels

Labels can be hidden if…..

Bottom Labels

Use bottom labels with horizontal layout

Inline Labels

Use inline labels with vertical layouts

Footer

• The footer is placed at the bottom of a page or modal
• It has to contain a wizard pager and title of the step
• It has to contain at least one button

Behavior

• Team should decide if back button is enabled or not or if user can go to previous step
• Back can be enabled or disabled
• If user can click “back” to previous step then step immediately goes to an incomplete state