Stepper

The Stepper component can be used to improve the user experience of a multi-step process or form by visually indicating the progress and providing a clear sense of direction to the user.

Import

React

// with @dhl-official/react-library:
import { DhlStepper } from "@dhl-official/react-library"

// with @dhl-official/ui-libraries/react-library:
import { DhlStepper } from "@dhl-official/ui-libraries/react-library"

Angular

If the DUIL has been installed, you can use the web component directly:

<dhl-stepper></dhl-stepper>

Vue.js

// with @dhl-official/vue-library:
import { DhlStepper } from "@dhl-official/vue-library"

// with @dhl-official/ui-libraries/vue-library:
import { DhlStepper } from "@dhl-official/ui-libraries/vue-library"

Code

React

<DhlStepper items={items}></DhlStepper>

Angular

<dhl-stepper [items]="items"></dhl-stepper>

Vue.js

<dhl-stepper :items="items"></dhl-stepper >

Items prop should be passed in the following format:

const items = [
  {
    label: 'Step Label',
    description: 'Step Description',
    icon: icons.Containership,
  },
  {
    label: 'Step Label',
    description: 'Step Description',
  },
  {
    label: 'Step Label',
    description: 'Step Description',
    icon: icons.PlaneAirFreight,
  },
  {
    label: 'Step Label',
    description: 'Step Description',
  },
];

Interactive Demo

Readme

Properties

Property	Attribute	Description	Type	Default
activeIndex	active-index	A REQUIRED prop to set active step index.	number	0
clickEvent	--	An optional step click event callback handler.	(index: number) => void	undefined
dataAriaLabel	data-aria-label	An optional prop defining the text read by the screen reader to represent the component; use this if you need different text to be read from label.	string	"Stepper"
dataClassName	data-class-name	An optional prop for the class of the root element.	string	undefined
dataId	data-id	An optional prop. Gives a valid HTML ID attribute value for the component.	string	dhl-stepper-${getRandomString()}
dataTestid	data-testid	An optional prop. The test id attached to the component as a data-testid attribute.	string	"Stepper"
hasBackground	has-background	An optional prop to toggle component background.	boolean	true
headline	headline	An optional prop for the headline of the component	string	undefined
items	--	A REQUIRED prop for the component steps items.	StepItem[]	undefined

Dependencies

Depends on

• dhl-headline
• dhl-stepper-step

Graph

---

Built by DHL User Interface Library Team!