Skip to main content

Sequence Map

Sequence Map is a sequence of steps and sub-steps.

Example

Live Editor
function MySequenceMap() {
  const items = [
    { step: 1, label: 'Step 1', disabled: true },
    {
      step: 2,
      label: 'Step 2',
      invalid: true,
      optional: true,
      subSteps: [
        { step: 1, label: 'Sub Step 1' },
        { step: 2, label: 'Sub Step 2' },
        { step: 3, label: 'Sub Step 3', optional: true }
      ]
    },
    { step: 3, label: 'Step 3' },
    {
      step: 4,
      label: 'Step 4',
      subSteps: [
        { step: 1, label: 'Sub Step 1' },
        { step: 2, label: 'Sub Step 2' },
        { step: 3, label: 'Sub Step 3', optional: true }
      ]
    },
    { step: 5, label: 'Step 5', optional: true },
    { step: 6, label: 'Step 6', optional: true }
  ];
  return (
    <SequenceMap
      items={items}
      current={3}
      active={5}
      optionalText="optional"
      onSelect={(step) => console.log(step)}
    />
  );
}
Result
Loading...

Variants

Active Step

Sequence Map is able to navigate from the first step to active step. The default value is the first step.

Live Editor
function MySequenceMap() {
  const items = [
    { step: 1, label: 'Step 1' },
    { step: 2, label: 'Step 2' },
    {
      step: 3,
      label: 'Step 3',
      subSteps: [
        { step: 1, label: 'Sub Step 1' },
        { step: 2, label: 'Sub Step 2' },
        { step: 3, label: 'Sub Step 3', optional: true }
      ]
    },
    { step: 4, label: 'Step 4', optional: true }
  ];
  return <SequenceMap items={items} optionalText="optional" />;
}
Result
Loading...

Using active to set active step.

Live Editor
function MySequenceMap() {
  const items = [
    { step: 1, label: 'Step 1' },
    { step: 2, label: 'Step 2' },
    {
      step: 3,
      label: 'Step 3',
      subSteps: [
        { step: 1, label: 'Sub Step 1' },
        { step: 2, label: 'Sub Step 2' },
        { step: 3, label: 'Sub Step 3', optional: true }
      ]
    },
    { step: 4, label: 'Step 4', optional: true }
  ];
  return <SequenceMap items={items} active={3} optionalText="optional" />;
}
Result
Loading...

Current Step

You can set the selected step by current prop. The default value for current step is the active step.

Live Editor
function MySequenceMap() {
  const items = [
    { step: 1, label: 'Step 1' },
    { step: 2, label: 'Step 2' },
    {
      step: 3,
      label: 'Step 3',
      subSteps: [
        { step: 1, label: 'Sub Step 1' },
        { step: 2, label: 'Sub Step 2' },
        { step: 3, label: 'Sub Step 3', optional: true }
      ]
    },
    { step: 4, label: 'Step 4', optional: true }
  ];
  return <SequenceMap items={items} active={2} optionalText="optional" />;
}
Result
Loading...

Using current to set current step, the current must be less than or equal active

Live Editor
function MySequenceMap() {
  const items = [
    { step: 1, label: 'Step 1' },
    { step: 2, label: 'Step 2' },
    {
      step: 3,
      label: 'Step 3',
      subSteps: [
        { step: 1, label: 'Sub Step 1' },
        { step: 2, label: 'Sub Step 2' },
        { step: 3, label: 'Sub Step 3', optional: true }
      ]
    },
    { step: 4, label: 'Step 4', optional: true }
  ];
  return (
    <SequenceMap items={items} active={3} current={2} optionalText="optional" />
  );
}
Result
Loading...

Edit Optional Text

Using optionalText to edit optional text or translate to another language.

Live Editor
function MySequenceMap() {
  const items = [
    { step: 1, label: 'Step 1' },
    { step: 2, label: 'Step 2', optional: true },
    {
      step: 3,
      label: 'Step 3',
      subSteps: [
        { step: 1, label: 'Sub Step 1' },
        { step: 2, label: 'Sub Step 2' },
        { step: 3, label: 'Sub Step 3', optional: true }
      ]
    },
    { step: 4, label: 'Step 4', optional: true }
  ];
  return <SequenceMap items={items} active={3} optionalText="not compulsory" />;
}
Result
Loading...

Expand Sub-steps

As default, the sub-steps are expanded if the step is active.

Live Editor
function MySequenceMap() {
  const items = [
    { step: 1, label: 'Step 1' },
    { step: 2, label: 'Step 2' },
    {
      step: 3,
      label: 'Step 3',
      subSteps: [
        { step: 1, label: 'Sub Step 1' },
        { step: 2, label: 'Sub Step 2' },
        { step: 3, label: 'Sub Step 3', optional: true }
      ]
    },
    {
      step: 4,
      label: 'Step 4',
      optional: true,
      subSteps: [
        { step: 1, label: 'Sub Step 1' },
        { step: 2, label: 'Sub Step 2', optional: true }
      ]
    }
  ];
  return <SequenceMap items={items} active={3} optionalText="optional" />;
}
Result
Loading...

Using expand to make the sub-steps are always expanded.

Live Editor
function MySequenceMap() {
  const items = [
    { step: 1, label: 'Step 1' },
    { step: 2, label: 'Step 2', optional: true },
    {
      step: 3,
      label: 'Step 3',
      subSteps: [
        { step: 1, label: 'Sub Step 1' },
        { step: 2, label: 'Sub Step 2' },
        { step: 3, label: 'Sub Step 3', optional: true }
      ]
    },
    {
      step: 4,
      label: 'Step 4',
      optional: true,
      subSteps: [
        { step: 1, label: 'Sub Step 1' },
        { step: 2, label: 'Sub Step 2', optional: true }
      ]
    }
  ];
  return (
    <SequenceMap items={items} active={3} optionalText="optional" expand />
  );
}
Result
Loading...

Hide Step Number

Using hideStepNumber to hide the label of step number.

Live Editor
function MySequenceMap() {
  const items = [
    { step: 1, label: 'Step 1' },
    { step: 2, label: 'Step 2', optional: true },
    {
      step: 3,
      label: 'Step 3',
      subSteps: [
        { step: 1, label: 'Sub Step 1' },
        { step: 2, label: 'Sub Step 2' },
        { step: 3, label: 'Sub Step 3', optional: true }
      ]
    },
    { step: 4, label: 'Step 4', optional: true }
  ];
  return (
    <SequenceMap
      items={items}
      active={3}
      optionalText="optional"
      hideStepNumber
      onSelect={(step) => console.log(step)}
    />
  );
}
Result
Loading...

Step Selection

Using onSelect as a callback function and it returns the selected step.

Live Editor
function MySequenceMap() {
  const items = [
    { step: 1, label: 'Step 1' },
    { step: 2, label: 'Step 2', optional: true },
    {
      step: 3,
      label: 'Step 3',
      subSteps: [
        { step: 1, label: 'Sub Step 1' },
        { step: 2, label: 'Sub Step 2' },
        { step: 3, label: 'Sub Step 3', optional: true }
      ]
    },
    { step: 4, label: 'Step 4', optional: true },
    { step: 5, label: 'Step 5', optional: true }
  ];

  return (
    <SequenceMap
      items={items}
      active={4}
      optionalText="optional"
      expand
      onSelect={(step) => alert(`selected step is ${JSON.stringify(step)}`)}
    />
  );
}
Result
Loading...

Props

NameTypeDefault
items *
The array of steps
Item[]
active
Sequence Map is able to navigate from the first step to active step, the default is the first step.
number
1
current
The number of selected step, the default is the active step.
number
0
expand
The sub-steps are always expanded. If false, the sub steps are expanded when the step is reached.
boolean
false
optionalText
The text of optional label
string
hideStepNumber
The label of step numbers are hidden.
boolean
false
onSelect
Click action with the selected step data. The steps which are larger than active step are not allowed to click
((step: Item) => void)
dataTestId
A test id to be used by testing libraries. It will be added as a "data-testid" attribute on every step
string
"sequence-step"
data-{foo}
Data attributes can be used by testing libraries to retrieve components or assert their existence
string
* - the prop is required.