{ "tag": "ed-stepper", "kind": "component", "summary": "Steppers guide users through a process step by step, breaking it into clear stages. Use them for\ncheckout flows, multi-step setup, onboarding, or to show the status of a process.", "status": "experimental", "level": "molecule", "since": "1.0", "docs": "https://test-apps.eurodata.de/a/eurodata-ui/docs/components/stepper/", "usage": "https://test-apps.eurodata.de/a/eurodata-ui/docs/components/stepper/usage/", "playwright": "getByTestId('…')", "dependencies": [ "ed-step" ], "use": [ "A visual of a multi-stage process, such as a payroll run, showing which stages are done, current and still ahead", "A progress indicator for a linear process where later stages unlock only after earlier ones are completed", "Letting users click back to a finished stage of a process to check what was entered", "Showing the status of a long-running business process, such as a tax filing, from preparation to submission, horizontally or vertically" ], "notFor": [ { "when": "A guided task that needs step content and Back/Next/Finish buttons in one element", "instead": "a [Wizard](https://test-apps.eurodata.de/a/eurodata-ui/docs/components/wizard)" }, { "when": "Parallel sections of one record, switched freely", "instead": "a [Tab Group](https://test-apps.eurodata.de/a/eurodata-ui/docs/components/tab-group)" }, { "when": "The status of a list of records, such as paid or overdue", "instead": "a [Badge](https://test-apps.eurodata.de/a/eurodata-ui/docs/components/badge)" } ], "rules": [], "api": { "attributes": [ { "name": "active", "property": "active", "type": "string", "default": "''", "description": "The name of the active step. Falls back to the first step if unset, or if it doesn't match any step's name." }, { "name": "orientation", "property": "orientation", "type": "'auto' | 'horizontal' | 'vertical'", "default": "'horizontal'", "description": "The stepper's layout direction. `auto` lays steps out in a row and stacks them when the stepper is too narrow\nto give each step about 6em of width, so labels stay legible on small screens. It relies on measuring the\nstepper, so a server-rendered `auto` stepper starts as a row and stacks once it hydrates, which is why\n`horizontal` is the default." }, { "name": "linear", "property": "linear", "type": "boolean", "default": "false", "description": "Requires steps to be completed in order. When set, `next()`/`goTo()`/a `data-stepper` invoker and, if\n`clickable` is also set, clicking or activating a step can't reach a step until every step before it is\ncompleted, a disabled one included.\nEvery step past that point renders as locked, except the active one." }, { "name": "clickable", "property": "clickable", "type": "boolean", "default": "false", "description": "Allows clicking a step, or focusing it and pressing Enter/Space, to jump straight to it. When unset, only\n`next()`/`previous()`/`goTo()` change the active step, e.g. from your own Next/Back buttons or a\n`data-stepper` invoker." }, { "name": "label", "property": "label", "type": "string", "default": "''", "description": "A label that describes the stepper to assistive devices. Especially useful when more than one is on the page." }, { "name": "dir", "property": "dir", "type": "string" }, { "name": "lang", "property": "lang", "type": "string" } ], "properties": [], "methods": [ { "name": "goTo", "parameters": [ { "name": "name", "type": "string" } ], "description": "Requests a change to the named step. Emits a cancelable `ed-stepper-before-change`; if not canceled, updates\n`active`, emits `ed-stepper-change` and announces the new position to assistive technology. Does nothing if the\nstep doesn't exist, is already active, is disabled, or (in `linear` mode) can't be reached yet." }, { "name": "next", "description": "Advances to the next step after the active one that is not disabled, if any. In `linear` mode that step still has\nto be reachable, so a disabled step that is not completed stops it." }, { "name": "previous", "description": "Goes back to the nearest step before the active one that is not disabled, if any." } ], "events": [ { "name": "ed-stepper-before-change", "react": "onEdStepperBeforeChange", "type": "{ name: string, previousName: string | null, step: EdStep, previousStep: EdStep | null }", "description": "Emitted before the active step changes through a click or `goTo()`/`next()`/`previous()`. Calling `event.preventDefault()` keeps the current step, e.g. to guard against invalid or unsaved data. Assigning `active` does not emit it." }, { "name": "ed-stepper-change", "react": "onEdStepperChange", "type": "{ name: string, previousName: string | null, step: EdStep, previousStep: EdStep | null }", "description": "Emitted after the active step changed through a click or `goTo()`/`next()`/`previous()`. Assigning `active` does not emit it." } ], "slots": [ { "name": "", "description": "One or more `` elements." } ], "cssProperties": [ { "name": "--ed-stepper-gap", "default": "var(--ed-space-6)", "description": "The space between steps." }, { "name": "--ed-stepper-marker-size", "default": "2em", "description": "The size of each step's marker." }, { "name": "--ed-stepper-connector-color", "default": "var(--ed-color-neutral-border-light)", "description": "The color of the connector line after a step that isn't completed." }, { "name": "--ed-stepper-connector-color-active", "description": "The color of the connector line after a completed step. Unset by default, so the line takes the light border color of the completed step's `variant`." }, { "name": "--ed-stepper-connector-width", "default": "var(--ed-border-width-2)", "description": "The thickness of the connector line, in either orientation." }, { "name": "--ed-stepper-connector-gap", "default": "0.35em", "description": "The gap between a marker's edge and the connector line, on both sides. Kept clear of the marker geometrically, so it holds even if a marker's background is transparent." } ], "parts": [ { "name": "stepper", "description": "The component's outer wrapper. A `