eds-steps

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 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.

In React

In Vue

Properties

Property	Attribute	Description	Type	Default
`backLabel`	`back-label`		`string`	`'Back'`
`collapsibleTitles`	`collapsible-titles`	Allow collapsing the active title (accordion-like) in non-linear vertical mode. Ignored in linear mode to prevent content hiding.	`boolean`	`false`
`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 step titles.	`"h3" \| "h4" \| "h5"`	`'h4'`
`nextLabel`	`next-label`	Labels	`string`	`'Next'`
`orientation`	`orientation`	Orientation (applies to linear mode visuals).	`"horizontal" \| "vertical"`	`'vertical'`
`showFinish`	`show-finish`	Show or hide the finish button on the last step	`boolean`	`true`
`steps`	`steps`	Steps data as array or JSON string.	`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`		`CustomEvent<number>`
`finished`		`CustomEvent<void>`
`next`		`CustomEvent<number>`
`step`		`CustomEvent<number>`

Dependencies

Used by

components-section

Depends on

eds-button

Graph

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

Built with StencilJS