Lion Logo Lion Fundamentals Guides Components Blog Toggle darkmode

Steps: Overview

A web component that can be used to break a single goal down into dependable sub-tasks.

export const main = () => html`
  <lion-steps>
    <lion-step initial-step>
      Step 1
      <button type="button" @click=${ev => ev.target.parentElement.controller.next()}>Next</button>
    </lion-step>
    <lion-step>
      <button type="button" @click=${ev => ev.target.parentElement.controller.previous()}>
        Previous
      </button>
      Step 2
      <button type="button" @click=${ev => ev.target.parentElement.controller.next()}>Next</button>
    </lion-step>
    <lion-step>
      <button type="button" @click=${ev => ev.target.parentElement.controller.previous()}>
        Previous
      </button>
      Step 3
    </lion-step>
  </lion-steps>
`;

Features

  • navigate between different steps with 'previous' and 'next' functions.
  • keeps status of each step
    • untouched
    • entered
    • left
    • skipped
  • options
    • initial-step: Set to the first step of the flow, blocks calling previous function.
    • condition: Dynamic condition, when true the step is added to the flow.
    • invert-condition: Inverts the condition set.

In many application you build multi-step workflows like multi-step forms where you want to split a long process into smaller steps making the user's perception of it and filling in data easier. The idea of this component is to provide a simple way to define such steps and transition from one step to another while saving data between them and to conditionally skip some steps based on the data.

Installation

npm i --save @lion/ui
import { LionSteps, LionStep } from '@lion/ui/steps.js';
// or
import '@lion/ui/define/lion-steps.js';
import '@lion/ui/define/lion-step.js';