Step header

The title row for one stage of a flow, carrying the step count and the way back out.

Refined portWildStepHeader.vueWStepHeader, StepHeaderLevel

Try it

Step through with Next and the back arrow, with or without a tracker above.

Count

Back

Tracker

<WildStepHeader
  :step="2"
  :total="4"
  backLabel="Back to Site"
  @back="goBack"
>
  Add the logger
</WildStepHeader>

Don’t use it

count and back

first step

title only

Leave out the back arrow on the first step, where there’s nowhere to go back to.

The count is read as part of the heading: “Step 2 of 4, Add the logger”. When the step number changes, focus moves to the new title.

Key	What it does
Tab	Moves to the back button.
Shift + Tab	Reaches the back button after a step change.
Enter / Space	Goes back one step.

Prop	Type	Default	Description
#default	slot	—	The stage title.
step	number	—	1-based, as printed. Omit for no count.
total	number	—	Step count, printed after the step.
hideCount	boolean	false	Hides the count line; focus still follows the step.
@back	() => void	—	Adds the back button.
backLabel	string	'Back'	Names the back button for screen readers.
backDisabled	boolean	false	Disables the back button.
as	'h1' \| 'h2' \| 'h3'	'h2'	Heading level.
id	string	—	Heading id, for the form’s aria-labelledby.
focusOnChange	boolean	true	Focuses the title when the step number changes.