Tabs and multi-step layouts

Long forms can be easier to complete when split into tabs or steps. Each tab holds a group of fields, and users can move between sections before submitting.

For the same Employee onboarding example built as a step-by-step wizard, see Wizard and multi-step flows.

When to use tabs or steps

• More than one logical section (profile / job details / documents)
• Optional advanced sections that users may skip
• Wizards where each step validates before the next

Example: employee onboarding

This walkthrough builds an Employee onboarding form with three tabs: Profile, Job details, and Documents. A single Tab component holds the navigation. Each tab pane is a Container with fields.

How tabs combine components

Build each tab the same way: select the tab in Tab properties → drag a Container into the pane → add fields.

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 Tab component

1. Open Components.
2. Search for Tab.
3. Drag Tab onto the canvas below the form title.

Step 3: Add fields to the first tab pane

1. Select the Tab on the canvas.
2. In Main properties, set Items to Profile, Job details, and Documents.
3. Make sure Profile is the active tab.
4. Drag Container from Components into the tab pane.
5. Drag Input fields into the Container (Full name, Work email, Phone).
6. Open Tree → Expand all to confirm nesting: onboardingTabs → profilePane → fields.

Step 4: Repeat for other tabs

1. Select the Tab and switch the active tab to Job details.
2. Add Container → Department, Start date, and Manager fields.
3. Switch to Documents and add Container → ID document number, Employment contract signed checkbox, and Submit onboarding button.

Step 5: Check the canvas

1. Stay on Components or switch to the canvas.
2. Click each tab label and confirm the matching fields appear in the pane.

Step 6: Verify the component tree

1. Open Tree → Expand all.
2. The tree should list formTitle, then onboardingTabs with profilePane, jobPane, and documentsPane branches and their child fields indented underneath.

Test the flow

1. Click Preview.
2. Switch tabs and fill required fields in each section.
3. Run Validate from Preview mode tools.

Developers: Tab slots, conditions, and JSON structure are covered in Using tabs.

Summary

Select RSuite UI in the component library, then split long forms with the Tab component. Nest Container → fields inside each tab pane. Use Tree to verify the full hierarchy before you preview.

See also

• Wizard and multi-step flows
• Using tabs (developers)
• Form structure and containers