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.