Wizard and multi-step flows

A wizard walks users through a form one step at a time. Previous and Next buttons control movement; the last step shows a Finish button (here labeled Submit onboarding).

For the same Employee onboarding example built with horizontal tabs instead, see Tabs and multi-step layouts.

When to use a wizard

• Users should complete sections in order
• Each step should validate before moving on
• You want built-in Previous / Next / Finish controls
• A progress indicator (step numbers) helps orientation

Example: employee onboarding

This walkthrough builds the same Employee onboarding form as the tabs guide, but with three wizard steps: Profile, Job details, and Documents. A single Wizard component holds the step navigation. Each step is a Wizard step container with fields.

How wizard steps combine components

Build each step the same way: select the step in Wizard properties → drag fields into the active Wizard step on the canvas.

Step 1: Select the RSuite component library

1. Open the Component library menu in the top toolbar.
2. Choose RSuite UI inject (or RSuite UI).
3. The palette and canvas now show RSuite components.

Step 2: Add a Wizard component

1. Open Components.
2. Search for Wizard.
3. Drag Wizard onto the canvas below the form title.
4. The wizard starts with three default steps you can rename.

Step 3: Configure steps and add fields to Profile

1. Select the Wizard on the canvas.
2. In Main properties, rename Steps to Profile, Job details, and Documents.
3. Set Finish button label to Submit onboarding.
4. Click circle 1 in the Wizard step indicator to open Profile.
5. Drag Input fields into the Profile step (Full name, Work email, Phone).
6. Open Tree → Expand all to confirm nesting: onboardingWizard → profileStep → fields.

Step 4: Repeat for other steps

1. Click circle 2 in the Wizard step indicator to open Job details.
2. Add Department, Start date, and Manager fields inside the Job details step.
3. Click circle 3 in the Wizard step indicator to open Documents directly on the canvas.
4. Add ID document number and Employment contract signed checkbox inside the Documents step.

Step 5: Add field rules and enable wizard validation

1. Select Full name, open Main, and enable Required. The same required rule is now listed on Rules.
2. Repeat for Department and ID document number so every step has a rule to validate.
3. Select Onboarding wizard and return to Main.
4. Enable Validate on next so an invalid current step cannot advance.
5. Enable Validate on finish so the whole wizard is checked before Submit onboarding runs.

The two Wizard settings do not make fields required by themselves. They run the rules that you add to fields inside the Wizard.

Step 6: Check the canvas

1. Stay on Components or switch to the canvas.
2. Confirm the step indicator shows Profile, Job details, and Documents.
3. Click the numbered step circles in Designer to check each step’s fields.
4. Confirm Next appears on early steps and Submit onboarding on the last step.

Step 7: Verify the component tree

1. Open Tree → Expand all.
2. The tree should list formTitle, then onboardingWizard with profileStep, jobDetailsStep, and documentsStep branches and their child fields indented underneath.

Test the flow

1. Click Preview.
2. Leave Full name empty and click Next.
3. Confirm that Required appears under Full name and the Wizard stays on Profile.
4. Enter a full name and click Next. The Wizard can now open Job details.
5. Leave Department empty and click Next. Confirm that Required appears and the Wizard stays on Job details.
6. Enter a department and continue to Documents.
7. Leave ID document number empty and click Submit onboarding.
8. Confirm that Required appears and the Wizard stays on Documents. Enter an ID document number to clear the error.

Summary

Select RSuite UI in the component library, then guide users through long forms with the Wizard component. Add field rules, enable Validate on next and Validate on finish, and test that invalid steps cannot advance or finish. Use Tree to verify the hierarchy before you preview.

See also

• Tabs and multi-step layouts
• Form structure and containers