The steps component displays a user's progress along a series of steps to complete a task.
Example
⌘ Cmd + ⌥ Option + 1
Properties
| property | propType | required | default | description |
|---|---|---|---|---|
| userCanEdit | bool | - | true | Determines whether to show editable styling, and whether to call passed click handler. |
| currentStep | string | number | yes | - | The currently selected step, maps to a value in items. |
| items | [<button>{</button><button>...</button> value: string | number, label: node, <button>}</button>] | yes | - | Dropdown items that can be selected from the select dropdown. |
| onClick | func | yes | - | Function that is called when user clicks on a step. |
| testSection | string | - | - | Identifier used to create data-test-section attributes for testing. |
Usage
Use steps when the user needs to be guided along a series of actions in a process. Indicate how many steps are in the process and where the user is currently within the process.
Best Practices
Do
Always show the current step to the user
Don't
Change the order or number of steps