Examples
See below a list of examples of how to use chakra-ui-steps in your app.
Basic
This is the simplest example of how to use the Steps component.
Step 1
Clickable
If onClickStep is defined, the steps will become clickable.
Step 1
Custom Check Icon
You are also able to customise the check icon by using the checkIcon prop.
The checkIcon prop can also be used on the individual Step components. This will override the global checkIcon prop.
Note: icons are only visible when using the circles or circles-alt variants.
Step 1
Custom Icons
Note: icons are only visible when using the circles or circles-alt variants.
Step 1
Descriptions
The Step component also accepts a description prop which can be used to provide some extra information about the step.
Step 1
Dynamic Steps
The Steps component also supports dynamic steps. This means that you can add and remove steps from the component at any time.
Step 1
Sizes
By using the size prop you are able to quickly and easily adjust the general sizing of the component.
Step 1
Vertical
By using the orientation prop you are able to switch between horizontal (default) and vertical orientations. By default, when in mobile view the Steps component will switch to vertical orientation. You are also able to customize the breakpoint at which the component switches to vertical orientation by using the responsiveBreakpoint prop.
