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,isCurrent}]`. See below for properties of `STEP_DATA`.
`currentStep`	`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 `onChange` event). Defaults to `0`.
`overviewTitle`	`string`	(optional) The title shown inside the `<StepIndicatorModal />` supplemental screen reader text for the `<StepIndicatorTriggerButton />`. Defaults to `Steps Overview`.
`stepTitle`	`string`	(optional) Label for `<StepIndicatorTriggerButton />` and screen reader text for `<StepIndicatorItem />`. Must contain `%step` and `%count` to interpolate `currentStep` and `stepCount` into the text. Defaults to `Step %step of %count`.
`hideNumbers`	`boolean`	(optional) Define whether to show automatically counted numbers or not. Defaults to `false`.
`noAnimation`	`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) Whether or not to break out (using negative margins) on larger screens. Defaults to `false`. Same as `outset` in Card.
`status`	`string`	(optional) Text for status shown below the step indicator when it is not expanded. Defaults to `undefined`.
`statusState`	`['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.

Step Item Properties

Property	Type	Description
`title`	`string` `React.ReactNode`	(required) The title of the step.
`isCurrent`	`boolean`	(optional) If set to `true`, this item step will be set as the current selected step. This can be used instead of `currentStep` 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.
`statusState`	`'warn'` `'info'` `'error'`	(optional) In case the status state should be `info` or `error`. Defaults to `warn`.

Step Items example

const steps = [
  { title: 'Active' },
  { title: 'Active and marked as current', isCurrent: true },
  { title: 'Not active', inactive: true },
  { title: 'Disabled', disabled: true },
  {
    title: 'Active item with status text',
    status: 'Status text',
    statusState: '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	da-DK
`StepIndicator.overviewTitle`	Stegoversikt	Steps Overview	Stegöversikt	Trinoverblik
`StepIndicator.stepTitle`	Steg %step av %count:	Step %step of %count:	Steg %step av %count	Trin %step af %count:

#StepIndicator

#Properties

#Step Item Properties

#Step Items example

#Translations

StepIndicator

Properties

Step Item Properties

Step Items example

Translations