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
Angular
Vue.js

// 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"

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

<dhl-stepper></dhl-stepper>

// 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
Angular
Vue.js

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

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

<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`	`click-event`	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"`
`desktopStyle`	`desktop-style`	An optional prop. When set to true, forces the desktop layout to render on mobile/narrow viewports. The stepper switches to a touch-scrollable carousel with snap, fade edges, and auto-centering on the active step.	`boolean`	`false`
`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`	`items`	A REQUIRED prop for the component steps items.	`StepItem[]`	`undefined`
`navigation`	`navigation`	An optional prop. Controls how overflowing steps are navigated on desktop viewports. `"scroll"` (the default) keeps the original trackpad/mouse-wheel scroll behavior with no arrow controls. `"arrows"` renders ghost arrow buttons on each side of the carousel. Has no effect on mobile — on mobile with `desktopStyle` arrows are always shown for multi-step steppers regardless of this prop.	`"arrows" \| "scroll"`	`DHL_STEPPER.NAVIGATION.SCROLL`

Dependencies

Depends on

Graph

Built by DHL User Interface Library Team!

Import

Code​

Interactive Demo​

Readme​

Properties​

Dependencies​

Depends on​

Graph​