Porsche Design System

Stepper Horizontal
Framework Implementation#
Below you can find an interactive example of an outlined registration process.
Enter personal details
Confirm e-mail
Set password
A form with personal details could be displayed here.
Previous Step
Next Step
Open in Stackblitz
<!doctype html>
<html lang="en" class="auto">
<head>
  <title></title>
</head>
<body class="bg-base">

<p-stepper-horizontal>
  <p-stepper-horizontal-item state="current">Enter personal details</p-stepper-horizontal-item>
  <p-stepper-horizontal-item>Confirm e-mail</p-stepper-horizontal-item>
  <p-stepper-horizontal-item>Set password</p-stepper-horizontal-item>
</p-stepper-horizontal>

<div id="step-content-0">
  <p-text>A form with personal details could be displayed here.</p-text>
</div>
<div id="step-content-1" hidden>
  <p-text>A form with a verification code input field could be displayed here.</p-text>
</div>
<div id="step-content-2" hidden>
  <p-text>A form with a password input field could be displayed here.</p-text>
</div>

<p-button-group>
  <p-button type="button" id="prev-button" icon="arrow-head-left" variant="tertiary" disabled="true"
    >Previous Step</p-button
  >
  <p-button type="button" id="next-button" variant="primary">Next Step</p-button>
</p-button-group>
<script>
  const stepper = document.querySelector('p-stepper-horizontal');
  const stepElements = Array.from(document.querySelectorAll('p-stepper-horizontal-item'));
  const prevButton = document.querySelector('#prev-button');
  const nextButton = document.querySelector('#next-button');
  const panels = document.querySelectorAll('[id^="step-content"]');

  function getActiveStepIndex(steps) {
    return steps.findIndex((step) => step.state === 'current');
  }

  function manageContent(activeStepIndex) {
    if (activeStepIndex === 0) {
      prevButton.setAttribute('disabled', 'true');
    } else {
      prevButton.removeAttribute('disabled');
    }

    if (activeStepIndex === stepElements.length - 1) {
      nextButton.setAttribute('disabled', 'true');
    } else {
      nextButton.removeAttribute('disabled');
    }

    panels.forEach((panel, i) => {
      if (i === activeStepIndex) {
        panel.removeAttribute('hidden');
      } else {
        panel.setAttribute('hidden', '');
      }
    });
  }

  function onNextPrevStep(direction) {
    const activeStepIndex = getActiveStepIndex(stepElements);

    if (direction === 'next') {
      stepElements[activeStepIndex].state = 'complete';
      stepElements[activeStepIndex + 1].state = 'current';
      manageContent(activeStepIndex + 1);
    } else {
      stepElements[activeStepIndex].state = undefined;
      stepElements[activeStepIndex - 1].state = 'current';
      manageContent(activeStepIndex - 1);
    }
  }

  prevButton.addEventListener('click', () => onNextPrevStep('prev'));
  nextButton.addEventListener('click', () => onNextPrevStep('next'));

  stepper.addEventListener('update', (e) => {
    const { activeStepIndex } = e.detail;

    for (let i = activeStepIndex + 1; i < stepElements.length; i++) {
      // reset step state when going back via stepper horizontal item click
      stepElements[i].state = undefined;
    }
    stepElements[activeStepIndex].state = 'current';

    manageContent(activeStepIndex);
  });
</script>
</body>
</html>