eds-steps-v2

Explore the Interactive Component

Use the playground below to experiment with the component. Click the button to view the full Storybook deployment for additional examples and configurations.

See It in Use with Code

Check out this practical implementation of component.

Plain HTML

Steps - Slot Content

The eds-steps-v2 component lets you override the content for each step and provide your own custom content—whether that’s another UI component or just plain text.

Another example eds-steps in eds-steps-v2

Properties

Property	Attribute	Description	Type	Default
`backLabel`	`back-label`		`string`	`'Back'`
`disableNext`	`disable-next`	Disable Next/Finish (boolean or per-step boolean[]). Also accepts a JSON array string.	`boolean \| boolean[] \| string`	`false`
`finishLabel`	`finish-label`		`string`	`'Finish'`
`headingLevel`	`heading-level`	Heading level for titles	`"h3" \| "h4" \| "h5"`	`'h4'`
`imageSrc`	`image-src`	Optional illustration	`string`	`undefined`
`imageWidth`	`image-width`		`number`	`undefined`
`message`	`message`		`string`	`undefined`
`nextLabel`	`next-label`	Labels	`string`	`'Next'`
`orientation`	`orientation`	Orientation (applies to linear visuals)	`"horizontal" \| "vertical"`	`'vertical'`
`showFinish`	`show-finish`	Show or hide the finish button on the last step	`boolean`	`true`
`steps`	`steps`	JSON string or array of steps: { title, content? }	`Step[] \| string`	`[]`
`theme`	`theme`	Visual theme for the steps component. - ‘default’: Grey step circles with white text - ‘brand’: Brand green step circles with black text (CTA style)	`"brand" \| "default"`	`'default'`
`type`	`type`	Stepper mode	`"linear" \| "static"`	`'static'`

Events

Event	Description	Type
`back`	Fired before going back, with the target step index.	`CustomEvent<number>`
`finished`	Fired when user clicks Finish on the last step.	`CustomEvent<void>`
`next`	Fired before advancing, with the target step index.	`CustomEvent<number>`
`step`	Fired whenever the active step changes. Payload: current step index.	`CustomEvent<number>`

Dependencies

Depends on

Graph

graph TD;
  eds-steps-v2 --> eds-icon-wrapper
  eds-steps-v2 --> eds-img
  eds-steps-v2 --> eds-button
  eds-button --> eds-icon-wrapper
  style eds-steps-v2 fill:#f9f,stroke:#333,stroke-width:4px

Built with StencilJS