Stepper

Basic

• The Stepper can be controlled by passing the current step index (zero-based) as the activeStep prop.

Direction

• You can control Stepper’s direction state with orientation props.
• Stepper supports 2 directions vertical and horizontal.
• Default orientation is horizontal.

Sizes

• Stepper supports 4 sizes sm, md, lg and responsive and can be changed by passing the size prop.
• Default size is lg.

• With size responsive, the component will be responsive to the viewport.

Screen prefix	Screen width	Component size
xs → xl	0px → 1279px	sm
xl → 3xl	1280px → 1919px	md
3xl → ∞	1920px → ∞	lg

Full width

• Stepper can fully fill the available width by setting the fullWidth prop to true.
• Default fullWidth is false.
• Max width of stepper is 100% of parent element content space.

Stepper icon types

• Stepper supports 2 icon types number and icon and can be changed by passing the iconType prop.
• Default iconType is icon.

Custom step icon

• Step supports icons from the @ocean-network-express/magenta-ui/icons package.
• You can pass the icon to the icon prop of step.

Step status

• Step supports 5 status error, complete, in-progress, in-complete and in-active and can be changed by passing the status prop.
• Default status is defined by Stepper mode and current activeStep.

Step interaction

• Stepper can be directly interacted with by setting the allowStepSelect prop to true.
• You can also pass a callback function to the onStepClick prop to handle the step click event.

Linear Stepper

• A linear stepper allows the user to complete the steps in sequence.
• Linear stepper is the default mode.
• Current active step has status in-progress.
• All steps before active step have status complete.
• All steps after active step have status in-active.

Non-linear Stepper

• Non-linear steppers allow the user to enter a multi-step flow at any point.
• Non-linear stepper can be enabled by setting the nonLinear prop to true.
• Current active step has status in-progress.
• Other steps have status in-complete.
• It’s up to your own implementation to determine when all steps are completed.

• You can also specify which step you are not allowed to select by passing the status prop is in-active.

Disabled Stepper

• All steps in a stepper can be disabled by setting the disabled prop to true.

• A single step in the stepper can also be disabled by setting the disabled prop to true.