Skip to content
Home

StepIndicator

Info
Demos
Properties
Events

Component Properties

PropertiesDescription
mode(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(required) defines the data/steps showing up in a JavaScript Array or JSON format like [{title,is_current}]. See parameters and the example above.
sidebar_id(required) 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.
current_step(optional) defines the active number marked step starting by 0. Defaults to 0.
overview_title(optional) The title shown inside the <StepIndicatorModal /> supplemental screen reader text for the <StepIndicatorTriggerButton />. Defaults to Steps Overview
step_title(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
step_title_extended(optional) Descriptive label for <StepIndicatorModal />. Must contain %step and %count to interpolate current_step and stepCount into the text. Defaults toYou are on step %step of %count
hide_numbers(optional) define whether to show automatically counted numbers or not. Defaults to false.
no_animation(optional) if set to true, the height animation on the step items and the drawer button will be omitted. Defaults to false.
on_item_render(optional) callback function to manipulate or wrap every item. Has to return a React Node. You receive an object you can use in your custom HOC { StepItem, element, attributes, props, context }.
on_click(optional) Will be called once the user clicks on the current or another step. Will be emitted on every click. Returns an object { event, item, current_step, currentStep }.
on_change(optional) Will be called once the user visits actively a new step. Will be emitted only once. Returns an object { event, item, current_step, currentStep }.
Space(optional) spacing properties like top or bottom are supported.

Steps Parameters

ParametersDescription
title(required) the title as a string or React element.
is_current(optional) if set to true, this item step will be set as the current current selected step. This can be used instead of current_step on the component itself.
inactive(optional) if set to true, this item step will be handled as an inactive step and will not be clickable. Defaults to false.
disabled(optional) if set to true, this item step will be visible as an disabled button and will not be clickable. Defaults to false.
status(optional) Is used to set the status text.
status_state(optional) In case the status state should be info or error. Defaults to warn.
on_render(optional) callback function to manipulate or wrap a certain item. Has to return a React Node. Receives parameters { StepItem, element, attributes, props, context }
on_click(optional) event function that gets invoked once the users clicks on the active item. Receives parameters { event, item, current_step, currentStep }

Steps 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
  },
]