Stepper
Material Design 3-styled stepper / wizard-progress web components (lit-material-stepper, lit-material-step).
- 3.4 KB gzipped
- @lit-material/stepper 0.1.0
- Renders on the server
Example
Stepper
A wizard-progress indicator — numbered/checkmark/error steps, horizontal or vertical, linear or free navigation.
<lit-material-stepper orientation="horizontal">
<lit-material-step completed>
<span slot="label">Account</span>
</lit-material-step>
...
</lit-material-stepper>
Linear wizard, with content
Step content is out of scope for lit-material-stepper — this page owns it, listening for
change and driving a "Next"/"Back" pair.
Sign in or create an account to continue.
Install
npm install @lit-material/stepper @lit-material/tokensimport "@lit-material/stepper";Link @lit-material/tokens/css/index.css once per page for the colour, type and shape tokens. Install guide
API
<lit-material-step>
A single step in a lit-material-stepper — a numbered (or checkmark/error)
circle, a connector line to the next step, and a label/description. Purely
presentational: it has no click handler of its own — the parent stepper
listens for the bubbling click (the same event.composedPath() delegation
lit-material-select and lit-material-tab's parent use) and drives
active/stepNumber/orientation/roving tabindex from there.
Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
active | active | boolean | false | Managed by the parent stepper: whether this is the currently selected step. |
completed | completed | boolean | false | Yours to set — not inferred from active/position. Shows a checkmark instead of the step number. |
error | error | boolean | false | Yours to set. Shows an error indicator instead of the step number, and colors the label. |
disabled | disabled | boolean | false | |
stepNumber | step-number | number | 1 | 1-based number shown in the circle. Managed by the parent stepper; defaults to 1 standalone. |
orientation | orientation | StepOrientation | "horizontal" | Managed by the parent stepper to match its own orientation. |
Slots
| Slot | Description |
|---|---|
label | The step's label. |
description | Optional supporting text shown below the label. |
CSS parts
| Part | Description |
|---|---|
step | The button (background/padding). |
ripple | The state-layer element the hover/press feedback is drawn on. |
focus-ring | The focus indicator element. |
circle | The numbered/checkmark/error indicator circle. |
connector | The line connecting this step to the next one. |
<lit-material-stepper>
Groups lit-material-step elements into a wizard-progress indicator,
driving each step's active/step-number/orientation and roving-focus
keyboard navigation (Left/Right for horizontal, Up/Down for vertical, plus
Home/End), marked with aria-current="step" on the active step — the ARIA
token defined specifically for step-by-step processes.
Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
selected | selected | number | 0 | Index of the active step. |
orientation | orientation | StepOrientation | "horizontal" | |
linear | linear | boolean | false | When set, a step is only reachable once every step before it is completed (going back is always allowed). |
Events
| Event | Description |
|---|---|
change | Fires when selected changes via user interaction. |
Slots
| Slot | Description |
|---|---|
| default | lit-material-step elements. |
CSS parts
| Part | Description |
|---|---|
stepper | The container. |