Stepper

A progress trail through a sequence of steps. The stepper owns which step is current and which are finished; each step renders the state it is handed.

Note

This one ships as a web component only. There is no React or Svelte implementation yet, so the CLI has nothing to copy for those targets.

Preview

Your details Where to send it How to pay

Show code Copy

Installation

npm install @nana-tec/ui-components

import "@nana-tec/ui-components/stepper";

Moving through it

next() finishes the step it is on and opens the following one. previous() goes back, and stops at the first. goTo(index) jumps, and returns whether the rules allowed it.

Steps before current count as finished. completed marks any others, which matters when a step is finished out of order.

Linear

Add linear and a step only opens once the one before it is finished, so a wizard cannot be skipped through. A finished step can always be reopened. Without linear, any step can be chosen.

Pick one Locked until the first is done Locked too

Show code Copy

Vertical

Show code Copy

Keyboard

Key	Result
← / →	Moves focus along a horizontal trail
↑ / ↓	Moves focus along a vertical trail
Home / End	Jumps to the first or last step
Enter / Space	Opens the focused step, if the rules allow

Focus moves freely along the trail; only opening a step is governed by linear.

API

Properties

Property	Attribute	Type	Default	Description
completed	completed	number[]	[]	Steps finished out of order, as indices. A step before current counts as done anyway.
current	current	number	0	Zero-based index of the step being worked on.
linear	linear	boolean	false	Steps open only in order.
orientation	orientation	StepperOrientation	'horizontal'
showProgress	show-progress	boolean	false	Draw the progress line behind the steps.

Events

Event	Description
nana-step-change	After the current step moves; detail: { current: number, previous: number }

Slots

Slot	Description
(default)	The nana-stepper-step children

CSS parts

Part	Description
::part(base)	The trail container
::part(progress)	The progress line behind the steps

CSS custom properties

Property	Description
--nana-stepper-gap	Space between steps
--nana-stepper-line-color	Colour of the trail line
--nana-stepper-line-size	Thickness of the trail line
--nana-stepper-step-size	Diameter of a step marker, which the line is centred on

Properties

Property	Attribute	Type	Default	Description
index	index	number	0	Position in the trail, set by the parent stepper.
label	label	string	''	The step's name.
last	last	boolean	false	Whether this is the final step, set by the parent.
orientation	orientation	StepperOrientation	'horizontal'
reachable	reachable	boolean	false	Whether the stepper would open this step, set by the parent.
status	status	StepStatus	'upcoming'	Set by the parent stepper.

Slots

Slot	Description
(default)	Description shown under the label

CSS parts

Part	Description
::part(base)	The step container
::part(marker)	The numbered or ticked circle
::part(label)	The step name
::part(description)	The slotted description
::part(connector)	The line joining this step to the next

CSS custom properties

Property	Description
--nana-stepper-step-size	Diameter of the marker
--nana-stepper-step-color	Marker colour while upcoming
--nana-stepper-step-active	Marker colour while current or complete

Events

Event	Type	Description
nana-step-change	CustomEvent	The current step moved; detail carries current and previous.

Accessibility

The trail is a labelled group and each step is a button carrying aria-current="step" when it is the one being worked on. A step the rules keep closed reports aria-disabled, and exactly one step stays in the tab order.

Related components

• Progress Bar — a single unlabelled measure
• Tab Group — switching between panels rather than advancing