Steps
teps, or progress steps, visually represent a multi-stage process like a checkout or registration flow. Each step indicates a part of the process, often with a number and a title.
This component guides users through sequential tasks, providing clarity on the current stage and what's next. It's crucial for complex processes, enhancing user experience by breaking down tasks into manageable steps.
Examples
Various examples showcasing different configurations of the component
Step 1
Subtitle 1
Step 2
Subtitle 2
Step 3
Subtitle 3
Property
Value
Value
2
Steps
[{"title":"Step 1","subtitle":"Subtitle 1"},{"title":"Step 2","subtitle":"Subtitle 2"},{"title":"Step 3","subtitle":"Subtitle 3"}]
Properties
Each component can be customized and configured based on product requirements. You can modify the component on Canonic by clicking on the component and opening the configuration panel.
Property
Description
Default Value
Type
Value
The current value of the step.
1
Number
Steps
The steps to be displayed.
Array
Orientation
The orientation of the steps.
Horizontal
String