The React Stepper component helps you build intuitive, multi-step form experiences (Form Wizards) for your React applications. It supports horizontal and vertical layouts, built-in form validation, custom indicators, and seamless integration with any React form library.
In this example, the step indicators are displayed vertically above the labels using the stepButtonLayout="vertical"
prop, while the form content remains laid out horizontally. This option is useful when you want a more compact and visually balanced look for the step navigation, especially in narrower layouts. Use stepButtonLayout="vertical"
when you want a clear visual separation of steps without changing the main content flow.
This example shows a fully vertical multi-step form wizard created with the React Stepper component. By using the layout="vertical"
prop, both the step indicators and the step content are stacked vertically. This layout is ideal for mobile devices or designs where vertical flow is preferred. Choose layout="vertical"
if you want the entire wizard to guide users in a top-to-bottom progression.