Wizard

Introduction

The Wizard component is a component for creating step-by-step forms with the ability to transition between steps. The component allows you to validate nested components in each step. It is also possible to validate all steps when the Wizard is completed.

This component is based on Steps. This component is included within the following NPM package: @react-form-builder/components-rsuite.

Main properties

The following general properties are available within the Main tab:

Name	Type	Description
Active index	number	Active step index starting from 0
Steps navigation	choice	The type of navigation by steps (i.e., disable, only visited, or any)
Steps	array	Allows you to edit step labels, essentially editing the labels of nested Wizard steps
Previous button label	string	Label for the step back button
Next button label	string	Label for the step forward button
Finish button label	string	Label for the finish button
Show steps	boolean	If set to true, step navigation will be displayed
Show steps labels	boolean	If set to true, the step label will be displayed next to the step number
Vertical steps	boolean	If set to true, the step navigation will be vertical instead of horizontal
Validate on next	boolean	If set to true, the components of the current step will be validated before moving to the next step. It is possible to move to the next step only after successful validation
Validate on finish	boolean	If set to true, all steps will be validated before the Wizard is finished

At the bottom of the Main properties menu, you can find additional options:

• Render When: Provides conditional rendering for your calendar as described in the corresponding chapter.
• HTML attributes: Allows you to provide custom HTML attributes for your form.

Style properties

These are properties that allow to customize the size, color and other style properties of your component:

• For Device: You can provide component's style customization for all devices or specific devices by using this dropdown list. Refer to Adaptive Layout for more details.

• Component > Class Name: Add a class name for your component for the subsequent styling if necessary.

• Wrapper: The options below enable you to tailor the appearance of your component and customize it for a specific device type, as selected in the For Device property:

  Name	Type	Description
  Width	number	Specifies the width for your component
  Height	number	Specifies the height for your component
  Margin top/right/bottom/left	number	Margin values for you component
  Color	string	Allows customizing the text color
  Background color	string	Enables customizing the background color