Grundtone

Appearance

Stepper ​

Horizontal step indicator with dots, checkmarks, and connecting lines. Guides the user through a known sequence of steps.

When to use ​

Use for multi-step flows (forms, wizards) where the user needs to see their progress. Last step should be "Summary".

Do not use as navigation replacement. Do not use with a side menu at the same time. Avoid sub-steps.

Do's and don'ts ​

✓Do
Divide steps into natural, logical groups
✓Do
Allow clicking back to completed steps
✓Do
Last step: "Opsummering" or "Tjek dine svar"
✓Do
Show clear error messages on the step itself
✗Don't
Use together with a side menu
✗Don't
Create sub-steps
✗Don't
Skip the summary step

Accessibility ​

  • <ol> ordered list with role="list"
  • aria-current="step" on active step
  • Completed steps are keyboard-navigable
  • Error steps announced via label

References ​