Stepper

import { Stepper } from '@enmovil/ui-design-system';

Shows progress through a series of steps, horizontally or vertically. Set the current step with selected; with isClickable, users can click a step and onChange reports its index. Also exported as StepsVertical.

Properties

Property	Type	Required	Default	Allowed values	Description
items	StepProps[] | undefined	Yes	—	—	The steps, in order. Each step can have a title, description, icon and disabled.
direction	string	No	'horizontal'	'horizontal', 'vertical'	Lays the steps out in a row (horizontal, the default) or a column (vertical).
isClickable	boolean	No	true	—	Lets users click a step to make it the current one, firing onChange. On by default; set it to false for a read-only stepper.
selected	number	No	0	—	Index of the current step, starting at 0; steps before it are shown as finished. Defaults to 0, and the stepper follows it when it changes.

Events

Name	Signature	When it fires
onChange	((current: number) => void)	Fires with the clicked step's index. Only when isClickable.

Children

Stepper does not accept children.

Variants

Loading examples…

Playground

Change the controls to see how the properties affect the component. Values the controls don't cover come from the Horizontal Steps example.

Loading playground…

Storybook

Open Stepper in Storybook to try every story with the full set of controls.