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.
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 }.
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) a 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.
on_click(optional) event function that gets invoked once the users clicks on the active item.

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