Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 11 Next »

IN PROGRESS DRAFT

When To Use

A Stepper is used when a series of pages are needed to complete a process or connect a series of pages in a specific order. The primary case is in the context of a multi-step form.

  • Each step label should be a maximum of 2 words long.

  • When a step is selected the <title> element should be updated to reflect the current step number and step label “Step: 1: {{Current Step Label}}”. Recommended to prepend to the existing title e.g. “Step 1: {{Current Step Label}} - {{Page/Application Context}}”

  • When a step is selected the <h1> element should append the current step details e.g. “{{Page/Application Context}} - Step 1: {{Current Step Label}}”

Using Short-Term Rental Registration as an Example:

Every step must have a title with this format:

  • Step 1: Property Address

The <title /> element in HTML must reflect this format.
so the page title will show “Step 1: Property Address”

  • It’s not required to include the page or application context. In this case “Short-Term Rental Registration”

So you could have as the page HTML <title /> that says  “Step 1: Property Address” OR “Step 1:Property Address - Short-Term Rental Registration”

  • No labels