StepIndicator

Properties

Property	Type	Description
`mode`	`'static'` `'strict'` `'loose'`	(required) 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.
`data`	`Step Item[]` `string[]`	(required) Defines the data/steps showing up in a JavaScript Array or JSON format like `[{title,is_current}]`. See below for properties of `STEP_DATA`.
`current_step`	`number`	(optional) 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`.
`overview_title`	`string`	(optional) The title shown inside the `<StepIndicatorModal />` supplemental screen reader text for the `<StepIndicatorTriggerButton />`. Defaults to `Steps Overview`.
`step_title`	`string`	(optional) Label for `<StepIndicatorTriggerButton />` and screen reader text for `<StepIndicatorItem />`. Must contain `%step` and `%count` to interpolate `current_step` and `stepCount` into the text. Defaults to `Step %step of %count`.
`hide_numbers`	`boolean`	(optional) Define whether to show automatically counted numbers or not. Defaults to `false`.
`no_animation`	`boolean`	(optional) If set to `true`, the height animation on step change and list expansion will be omitted. Defaults to `false`.
`expandedInitially`	`boolean`	(optional) Set to `true` to have the list be expanded initially. Defaults to `false`.
`outset`	`boolean`	(optional) Same as `outset` in Card. Defaults to `false`
`status`	`string`	(optional) Text for status shown below the step indicator when it is not expanded. Defaults to `undefined`
`status_state`	`['warn', 'info', 'error']`	(optional) The type of status shown when the `status` prop is set. Defaults to `warn`.
`skeleton`	`boolean`	(optional) If set to `true`, an overlaying skeleton with animation will be shown.
`Space`	`string` `object`	(optional) Spacing properties like `top` or `bottom` are supported.
`sidebar_id`	`string`	(deprecated) A unique string-based ID in order to bind together the main component and the sidebar (`<StepIndicator.Sidebar />`). Both have to get the same ID.
`step_title_extended`	`string`	(deprecated) Descriptive label for `<StepIndicatorModal />`. Must contain `%step` and `%count` to interpolate `current_step` and `stepCount` into the text. Defaults to `You are on step %step of %count`.
`on_item_render`	`function`	(deprecated) 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 `<StepItem>` is a component that can be used to wrap your returned content.

Step Item Properties

Property	Type	Description
`title`	`string` `React.ReactNode`	(required) The title of the step.
`is_current`	`boolean`	(optional) 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.
`inactive`	`boolean`	(optional) If set to `true`, this item step will be handled as an inactive step and will not be clickable. Defaults to `false`.
`disabled`	`boolean`	(optional) 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`.
`status`	`string` `React.ReactNode`	(optional) Is used to set the status text.
`status_state`	`'warn'` `'info'` `'error'`	(optional) In case the status state should be `info` or `error`. Defaults to `warn`.
`on_render`	`function`	(deprecated) 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. <br/> Receives parameter `{ StepItem, element, attributes, props, context }`, where `props` also includes all props in the step object (like `title` or `status`) and the `<StepItem>` is a component that can be used to wrap your returned content.

Step Items example

const steps = [
  { title: 'Active' },
  { title: 'Active and marked as current', is_current: true },
  { title: 'Not active', inactive: true },
  { title: 'Disabled', disabled: true },
  {
    title: 'Active item with status text',
    status: 'Status text',
    status_state: 'warn', // defaults to warning
  },
]

Translations

More info about translations can be found in the general localization and Eufemia Forms localization docs.

Key	nb-NO	en-GB	sv-SE (beta)
`StepIndicator.overview_title`	Stegoversikt	Steps Overview	Stegöversikt
`StepIndicator.step_title`	Steg %step av %count:	Step %step of %count:	Steg %step av %count

#StepIndicator

#Properties

#Step Item Properties

#Step Items example

#Translations

StepIndicator

Properties

Step Item Properties

Step Items example

Translations