Steps - Keep React

Steps Component is a user interface element used to guide users through a multi-step process or workflow. It presents a visual representation of the various stages or steps a user needs to complete in a sequential order. Each step is typically accompanied by a title, description, and an indicator of completion status, helping users track their progress.

Table of Contents#

Default Step#

The Default Step refers to the fundamental and default configuration of a Steps Component within a user interface. It provides a clear visual representation of each step in a multi-step process.

 

Visit Keep Design Site

Lorem ipsum dolor sit amet consectetur adipisicing elit.

 

Visit Keep Design Site

Lorem ipsum dolor sit amet consectetur adipisicing elit.

 

Visit Keep Design Site

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Step With Number#

To change the step style use the stepType="number" prop.

1

Visit Keep Design Site

Lorem ipsum dolor sit amet consectetur adipisicing elit.

2

Visit Keep Design Site

Lorem ipsum dolor sit amet consectetur adipisicing elit.

3

Visit Keep Design Site

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Step With Icon#

To change the step style use the stepType="icon" prop and use the icon props in steps items.

Visit Keep Design Site

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Visit Keep Design Site

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Visit Keep Design Site

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Step With Dashed Border#

To change the border style between two steps and apply a dashed line, use the borderType="dashed" prop.

Visit Keep Design Site

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Visit Keep Design Site

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Visit Keep Design Site

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Interactive Step#

Visit Keep Design Site

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Visit Keep Design Site

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Visit Keep Design Site

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Step API Reference#

Explore the available props for the <Step/> component

PropertyDescriptionTypeDefault
stepTypeType of step item to display.
point
icon
number
point
childrenOptional children elements.ReactNodeReactNode
borderTypeType of border for the step item.
solid
dashed
none
solid

Step Item API Reference#

Explore the available props for the <Step.Item/> component

PropertyDescriptionTypeDefault
titleTitle for the step item.stringtext
descriptionDescription for the step item.stringtext
numberOfStepsThe step number for this item.number1
completedIndicates if the step is completed.booleanfalse
iconAn optional icon element to display.ReactNodeIcon
activeIndicates if the step is active.booleanfalse