Skip to main content

ProgressIndicator

The ProgressIndicator 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

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

Code​

<DhlProgressIndicator items={items}></DhlProgressIndicator>

Interactive Demo​

Migrating from DUIL 1.0​

  • Rename onClickHandler to clickEvent

Readme​

Overview​

Usage​

Default usage​

<dhl-progress-indicator></dhl-progress-indicator>

<script>
   const items = [
       {
         number: 1,
         text: "Finished Step",
         state: "finished",
       },
       {
         number: 2,
         text: "Partial Step",
         state: "partial",
       },
       {
         number: 3,
         text: "Current Step",
         state: "current",
         },
       {
         number: 4,
         text: "Upcoming Step",
         state: "upcoming",
       },
     ],

    const progressIndicator = document.querySelector(
      "dhl-progress-indicator",
   );
  progressIndicator.items = items;
</script>

Usage with steps as icons​

<dhl-progress-indicator></dhl-progress-indicator>

<script>
  const items = [
    {
      number: 1,
      text: "Finished Step",
      state: "finished",
    },
    {
      number: 2,
      text: "Partial Step",
      state: "partial",
      hasIcon: true,
    },
    {
      number: 3,
      text: "Current Step",
      state: "current",
      hasIcon: true,
      indicatorIcon: "icons/android.svg",
    },
    {
      number: 4,
      text: "Upcoming Step",
      state: "upcoming",
      hasIcon: true,
      indicatorIcon: "icons/briefcase.svg",
    },
  ];

  const progressIndicator = document.querySelector(
    "dhl-progress-indicator",
  );
  progressIndicator.items = items;
</script>

Properties​

PropertyAttributeDescriptionTypeDefault
clickEvent--An optional onClick callback handler.(index: number) => voidundefined
connectorTypeconnector-typeAn optional prop for the connector type on the component"arrow" \| "empty" \| "line"DHL_PROGRESS_INDICATOR.CONNECTOR_TYPE.EMPTY
dataClassNamedata-class-nameAn optional prop for the class of the root element.stringundefined
dataIddata-idAn optional prop. Gives a valid HTML ID attribute value for the component.stringdhl-progress-indicator-${getRandomString()}
dataTestiddata-testidAn optional prop. The test id attached to the component as a data-testid attribute.string"IndicatorStep"
items (required)--An REQUIRED prop for the items. Items Example: [ { number: "1", text: "Finished", state?: ProgressIndicator.STEP_STATES.FINISHED }, ] number and text are required too.StepItem[]undefined
sizesizeAn optional size prop for the component."md" \| "sm"DHL_PROGRESS_INDICATOR.SIZE.MD
typetypeAn optional type prop used to set the type"horizontal" \| "vertical"DHL_PROGRESS_INDICATOR.TYPE.HORIZONTAL

Slots​

SlotDescription
"unnamed"unnamed slot for the main content of the progressIndicator.

Dependencies​

Depends on​

Graph​

Built by DHL User Interface Library Team!