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