{
"id": "uilib/components/step-indicator",
"name": "StepIndicator",
"description": "The StepIndicator (progress indicator) is a visual representation of a users progress through a set of steps or series of actions.",
"group": "components",
"slug": "/uilib/components/step-indicator/",
"props": [
{
"name": "mode",
"doc": "Defines how the StepIndicator should work. Use `static` for non-interactive steps. Use `strict` for a chronological step order, also, the user can navigate between visited steps. Use `loose` if the user should be able to navigate freely.",
"type": [
"'static'",
"'strict'",
"'loose'"
],
"status": "required",
"defaultValue": null
},
{
"name": "data",
"doc": "Defines the data/steps showing up in a JavaScript Array or JSON format like `[{title,is_current}]`. See below for properties of `STEP_DATA`.",
"type": [
"[Step Item](#step-item-properties)[]",
"string[]"
],
"status": "required",
"defaultValue": null
},
{
"name": "current_step",
"doc": "Defines the initial step starting from 0. Also defines the furthest step visited when `mode=\"strict\"`. Will update to the new step if changed (but will not trigger the `on_change` event). Defaults to `0`.",
"type": "number",
"status": "optional",
"defaultValue": null
},
{
"name": "overview_title",
"doc": "The title shown inside the `` supplemental screen reader text for the ``. Defaults to `Steps Overview`.",
"type": "string",
"status": "optional",
"defaultValue": null
},
{
"name": "step_title",
"doc": "Label for `` and screen reader text for ``. Must contain `%step` and `%count` to interpolate `current_step` and `stepCount` into the text. Defaults to `Step %step of %count`.",
"type": "string",
"status": "optional",
"defaultValue": null
},
{
"name": "hide_numbers",
"doc": "Define whether to show automatically counted numbers or not. Defaults to `false`.",
"type": "boolean",
"status": "optional",
"defaultValue": null
},
{
"name": "no_animation",
"doc": "If set to `true`, the height animation on step change and list expansion will be omitted. Defaults to `false`.",
"type": "boolean",
"status": "optional",
"defaultValue": null
},
{
"name": "expandedInitially",
"doc": "Set to `true` to have the list be expanded initially. Defaults to `false`.",
"type": "boolean",
"status": "optional",
"defaultValue": null
},
{
"name": "outset",
"doc": "Whether or not to break out (using negative margins) on larger screens. Defaults to `false`. Same as `outset` in [Card](/uilib/components/card/properties).",
"type": "boolean",
"status": "optional",
"defaultValue": null
},
{
"name": "status",
"doc": "Is used to set the status text.",
"type": [
"string",
"React.ReactNode"
],
"status": "optional",
"defaultValue": null
},
{
"name": "status_state",
"doc": "In case the status state should be `info` or `error`. Defaults to `warn`.",
"type": [
"'warn'",
"'info'",
"'error'"
],
"status": "optional",
"defaultValue": null
},
{
"name": "skeleton",
"doc": "If set to `true`, an overlaying skeleton with animation will be shown.",
"type": "boolean",
"status": "optional",
"defaultValue": null
},
{
"name": "sidebar_id",
"doc": "A unique string-based ID in order to bind together the main component and the sidebar (``). Both have to get the same ID.",
"type": "string",
"status": "deprecated",
"defaultValue": null
},
{
"name": "step_title_extended",
"doc": "Descriptive label for ``. Must contain `%step` and `%count` to interpolate `current_step` and `stepCount` into the text. Defaults to `You are on step %step of %count`.",
"type": "string",
"status": "deprecated",
"defaultValue": null
},
{
"name": "on_item_render",
"doc": "Deprecated, just use step item `title`. Callback function whose return is rendered inside each step instead of the default render. Has to return a React Node. Receives parameter `{ StepItem, element, attributes, props, context }`, where `props` also includes all props from the step object (like `title` or `status`) and the `` is a component that can be used to wrap your returned content.",
"type": "function",
"status": "deprecated",
"defaultValue": null
},
{
"name": "title",
"doc": "The title of the step.",
"type": [
"string",
"React.ReactNode"
],
"status": "required",
"defaultValue": null
},
{
"name": "is_current",
"doc": "If set to `true`, this item step will be set as the current selected step. This can be used instead of `current_step` on the main component.",
"type": "boolean",
"status": "optional",
"defaultValue": null
},
{
"name": "inactive",
"doc": "If set to `true`, this item step will be handled as an inactive step and will not be clickable. Defaults to `false`.",
"type": "boolean",
"status": "optional",
"defaultValue": null
},
{
"name": "disabled",
"doc": "If set to `true`, this step will be handled the same as `inactive` as well as getting a disabled mouseover and `aria-disabled=\"true`. Defaults to `false`.",
"type": "boolean",
"status": "optional",
"defaultValue": null
},
{
"name": "on_render",
"doc": "Deprecated, just use `title`. Callback function whose return is rendered inside the step instead of the default render (or `on_item_render`). Has to return a React Node.
Receives parameter `{ StepItem, element, attributes, props, context }`, where `props` also includes all props in the step object (like `title` or `status`) and the `` is a component that can be used to wrap your returned content.",
"type": "function",
"status": "deprecated",
"defaultValue": null
}
],
"events": [
{
"name": "on_click",
"doc": "Called when user clicks the step. Is called right before the main component's `on_click`. Receives parameter `{ event, item, current_step, currentStep }`",
"type": "function",
"status": "optional",
"defaultValue": null
},
{
"name": "on_change",
"doc": "Will be called when the user changes step by clicking in the steps list (changing the `current_step` prop does not trigger the event). Receives parameter `{ event, item, current_step, currentStep }`.",
"type": "function",
"status": "optional",
"defaultValue": null
}
],
"related": [
"Space"
],
"checksum": "deafd1d9d0e0ce46e15638bd4d3a60378f7d93d9f61f8143fbb1ceac1321e021",
"source": {
"repo": "https://github.com/dnbexperience/eufemia",
"file": "packages/dnb-eufemia/src/components/step-indicator/StepIndicator.tsx",
"permalink": "https://github.com/dnbexperience/eufemia/blob/main/packages/dnb-eufemia/src/components/step-indicator/StepIndicator.tsx"
},
"sources": {
"entry": {
"local": "src/docs/uilib/components/step-indicator.mdx",
"public": "https://c301bb6f.eufemia-e25.pages.dev/uilib/components/step-indicator/"
},
"props": {
"local": "src/docs/uilib/components/step-indicator/properties.mdx",
"public": "https://c301bb6f.eufemia-e25.pages.dev/uilib/components/step-indicator/properties/"
},
"events": {
"local": "src/docs/uilib/components/step-indicator/events.mdx",
"public": "https://c301bb6f.eufemia-e25.pages.dev/uilib/components/step-indicator/events/"
},
"demos": {
"local": "src/docs/uilib/components/step-indicator/demos.mdx",
"public": "https://c301bb6f.eufemia-e25.pages.dev/uilib/components/step-indicator/demos/"
}
},
"version": "0.0.0-development",
"generatedAt": "2025-12-18T11:12:44.344Z",
"schemaVersion": 1
}