Default Gray Amethyst

Wizard Step

<mo-wizard-step> | MOWizardStep
Since 2.2 stable

Wizard steps are the individual steps in a wizard.

<mo-wizard>
  <mo-wizard-step label="step"></mo-wizard-step>
</mo-wizard>

import { MOWizard, MOWizardStep } from '@modes-web-components/dist/react';

const App = () => {
  return (
    <MOWizard>
      <MOWizardStep label="step"></MOWizardStep>
    </MOWizard>
  );
};

Examples

Horizontal

When used inside a vertically aligned mo-wizard, contents of the step will align horizontally. 

<mo-wizard orientation="vertical">
  <mo-wizard-step label="horizontal step"></mo-wizard-step>
</mo-wizard>

import { MOWizard, MOWizardStep } from '@modes-web-components/dist/react';

const App = () => {
  return (
    <MOWizard orientation="vertical">
      <MOWizardStep label="horizontal step"></MOWizardStep>
    </MOWizard>
  );
};

Custom label

Use the label slot to have label customization beyond simple strings.

Incomplete 
<mo-wizard>
  <mo-wizard-step>
    <span
      slot="label"
      style="display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--mo-color-status-alert);"
    >
      Incomplete
      <mo-icon name="exclamation-mark-circle"></mo-icon>
    </span>
  </mo-wizard-step>
</mo-wizard>

import { MOWizard, MOWizardStep } from '@modes-web-components/dist/react';

const App = () => {
  return (
    <MOWizard orientation="vertical">
      <MOWizardStep>
        <span
          slot="label"
          style={{ display: "flex"; flexDirection: "column"; alignItems: "center"; gap: "4px"; color: "var(--mo-color-status-alert)" }}
        >
          Incomplete
          <mo-icon name="exclamation-mark-circle"></mo-icon>
        </span>
      </MOWizardStep>
    </MOWizard>
  );
};

States

The mo-wizard-step can either be completed, active or incomplete (default). The mo-wizard component controls these states. 

<mo-wizard activeStep="2">
  <mo-wizard-step completed label="completed"></mo-wizard-step>
</mo-wizard>
<mo-wizard>
  <mo-wizard-step active label="active"></mo-wizard-step>
</mo-wizard>
<mo-wizard activeStep="2">
  <mo-wizard-step label="incomplete"></mo-wizard-step>
</mo-wizard>

import { MOWizard, MOWizardStep } from '@modes-web-components/dist/react';

const App = () => {
  return (
    <>
      <MOWizard activeStep={2}>
        <MOWizardStep completed label="completed"></MOWizardStep>
      </MOWizard>
      <MOWizard>
        <MOWizardStep active label="active"></MOWizardStep>
      </MOWizard>
      <MOWizard activeStep={2}>
        <MOWizardStep label="incomplete"></MOWizardStep>
      </MOWizard>
    </>
  );
};

Chips

You can populate the chips slot to add mo-chips to categorize and organize the steps further.

Chip Chip 
<mo-wizard orientation="vertical">
  <mo-wizard-step orientation="horizontal" label="With chip">
    <mo-chip slot="chips" pill variant="neutral" size="small">Chip</mo-chip>
  </mo-wizard-step>
</mo-wizard>
<mo-wizard>
  <mo-wizard-step label="With chip">
    <mo-chip slot="chips" pill variant="neutral" size="small">Chip</mo-chip>
  </mo-wizard-step>
</mo-wizard>

import { MOWizard, MOWizardStep } from '@modes-web-components/dist/react';

const App = () => {
  return (
    <>
      <MOWizard orientation="vertical">
        <MOWizardStep orientation="horizontal" label="With chip">
          <MOChip slot="chips" pill variant="neutral" size="small"></MOChip>
        </MOWizardStep>
      </MOWizard>
      <MOWizard>
        <MOWizardStep label="With chip">
          <MOChip slot="chips" pill variant="neutral" size="small"></MOChip>
        </MOWizardStep>
      </MOWizard>
    </>
  );
};

Importing

If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free to use any of the following snippets to cherry pick this component.

Bundler React Script

To import this component using a bundler:

import '@metsooutotec/modes-web-components/dist/components/wizard-step/wizard-step.js';

To import this component as a React component:

import MOWizardStep from '@metsooutotec/modes-web-components/dist/react/wizard-step/';

To import this component using a script tag:

<script type="module" src="https://modes-web.metso.com/dist/components/cdn/components/wizard-step/wizard-step.js"></script>

Slots

Name Description
(default) The default slot. Put mo-wizard-sub-step elements here.
chips Use this to slot in chips under the label.

Learn more about using slots.

Properties

Name Description Reflects Type Default
label The label for the wizard step. string ''
index The position of the step. number 0
completed Mark the step as completed. boolean false
active Sets the step as active. boolean false
disabled Sets the step as disabled. boolean false
orientation The component orientation (layout flow direction). Should be opposite to that of the parent Wizard’s. Automatically supplied by the parent mo-wizard. 'horizontal' | 'vertical' 'vertical'
expanded Expands the step. boolean false
first First step will not have line on left, set by parent. boolean false
last Last step will not have line on right, set by parent. boolean false
updateComplete A read-only promise that resolves when the component has finished updating.

Learn more about attributes and properties.

Events

Name React Event Description Event Detail
mo-change onMoChange Emitted when the step is selected by clicking or keyboard navigation. -

Learn more about events.

Methods

Name Description Arguments
handleClick() emit mo-select event when a step is clicked to propagate information to parent mo-wizard -

Learn more about methods.

Parts

Name Description
base The component’s internal wrapper.
chips The chips container.

Learn more about customizing CSS parts.