dile-steps

Web Component that displays the progress of a process divided into steps, like a checkout, an onboarding or a multi-step form.

It shows a numbered bubble and a label for every step, marks the current one, and lets the user go back to the steps already reached. It can also be used as a read-only status indicator, for example to display the stage of an order.

If you need a multi-step form that saves every step through Ajax, take a look at dile-steps-form in @dile/crud, which uses this component.

Installation

npm i @dile/ui

Usage

Import the component.

import '@dile/ui/components/steps/steps.js';

Use the component. The steps property is an array with the label of every step, so it is usually set with a property binding.

<dile-steps current="1" reached="2"></dile-steps>
<script>
  document.querySelector('dile-steps').steps = ['Cart', 'Shipping', 'Payment'];
</script>

The component does not change the current step by itself: listen to dile-steps-select and update current (and reached, if needed).

steps.addEventListener('dile-steps-select', (e) => {
  steps.current = e.detail.index;
});

Properties

Custom Events

• dile-steps-select: Dispatched when the user clicks on a step that can be selected. The detail has the index of the step and its label. The event bubbles and is composed.

Accessibility

• The steps are rendered as a list, and the current step has aria-current="step".
• In navigable mode each bubble is a native button, labelled with the step label and disabled while the step can not be selected.

CSS Custom Properties

dile-steps demos

Navigable steps

<script type="module">
import '@dile/ui/components/steps/steps.js';
</script>
<dile-steps id="demosteps"></dile-steps>
<script>
  const demoSteps = document.getElementById('demosteps');
  demoSteps.steps = ['Cart', 'Shipping', 'Payment', 'Confirmation'];
  demoSteps.reached = 2;
  demoSteps.addEventListener('dile-steps-select', (e) => {
    demoSteps.current = e.detail.index;
  });
</script>

Vertical layout

<dile-steps id="demovertical" vertical current="1" reached="1"></dile-steps>
<script>
  const demoVertical = document.getElementById('demovertical');
  demoVertical.steps = ['Account', 'Profile', 'Preferences'];
  demoVertical.addEventListener('dile-steps-select', (e) => {
    demoVertical.current = e.detail.index;
  });
</script>

Read-only status

<dile-steps id="demoreadonly" readonly current="2" reached="2"></dile-steps>
<script>
  document.getElementById('demoreadonly').steps = ['Received', 'Preparing', 'Shipped', 'Delivered'];
</script>