Stepper
Shows progress through a multi-step flow.
<mm-stepper label="New pipeline" value="configure" navigable>
<mm-step value="plugin" label="Choose plugin" description="PostgreSQL"></mm-step>
<mm-step value="basics" label="Basic info"></mm-step>
<mm-step value="configure" label="Configure"></mm-step>
<mm-step value="schedule" label="Schedule and filters"></mm-step>
</mm-stepper>
Guidance
Steppers show where someone is in a multi-step flow, such as creating a pipeline (Choose plugin,
Basic info, Configure, Schedule and filters) or an asset. It is an ordered list: each step has its
number (tabular figures), a label and an optional description. Completed steps show an ink check, the
current step has aria-current="step", ink text and the burnt-sienna marker (the one place a
stepper spends the accent, as the current selection), upcoming steps are muted, and a step with
error shows a crimson glyph with the words "Has errors". Every state is also given as a word to
assistive technology.
With navigable, completed steps become buttons (or links, with href) so people can go back;
the current and upcoming steps never are, because the flow validates each step before the next.
Tab moves between them and Enter or Space activates. Activating one fires mm-step-change and
makes it current unless the event is cancelled.
orientation="vertical" stacks the steps with the connector running down the markers, for side
panels and narrow dialogs.
Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
value | value | string | '' | The current step's value. Steps before it are complete; steps after it are upcoming. |
orientation | orientation | 'horizontal' | 'vertical' | 'horizontal' | |
navigable | navigable | boolean | false | Completed steps become buttons (or links) that go back to them. |
label | label | string | '' | Accessible name of the list, such as "New pipeline steps". |
steps | MmStep[] | The steps, in order. |
Events
| Event | Detail | Description |
|---|---|---|
mm-step-change | CustomEvent<MmStepChangeDetail> | A completed step was chosen. Cancel it to stay on the current step. |
Slots
| Slot | Description |
|---|---|
| Default | mm-step elements. |
CSS parts
| Part | Description |
|---|---|
list | The list. |
Examples
Every state of mm-stepper in Storybook, with keyboard and screen reader tests.