Multi-Step / Wizard Forms
Pro & EnterpriseA tab set can be displayed as a multi-step (wizard) form with Previous / Next buttons and step indicators. This guide covers the newest options: wizard navigation behavior, the overall progress bar (all tiers), and full step-indicator customization (Professional & Enterprise).
1. Turning a tab set into a wizard
In the Pivot / Tabs configuration panel, enable “Show as multi-step form with previous and next buttons”. The tabs then render as sequential steps. Additional options:
| Option | What it does | Tier |
|---|---|---|
| Linear mode | Locks forward navigation — users must complete steps in order. Future steps are grayed out and non-clickable; backward navigation is always allowed. | Professional & Enterprise |
| Validate required fields before proceeding | Blocks Next if required fields in the current step are empty. Failing fields are highlighted and the step’s indicator turns red. Skipped when navigating backwards. | Professional & Enterprise |
| Save form when Finish is clicked | Automatically saves on the final step’s Finish button. | Professional & Enterprise |
| Fixed content height | Sets a fixed height for the step content area (e.g. 400px or 50vh). Content scrolls inside; the Previous/Next buttons stay fixed below. | Professional & Enterprise |
| Per-step button label override | Each step can override the global Next / Finish label (e.g. “Next: Review”, “Submit”). | Professional & Enterprise |
2. Overall progress bar (all tiers)
Enable “Show overall progress bar” in the Pivot / Tabs panel to render a thin horizontal bar with a label (“3 of 5 tabs complete”) above the tab strip.
- A tab counts as complete once all its required fields have a value. Tabs with no required fields are complete immediately.
- The bar fills green and updates in real time as field values change.
- It’s independent of the per-tab completion icons — enable either, both, or neither.
3. Step-indicator customization (Professional & Enterprise)
The indicator dots (“bulls”) at the bottom of the wizard are fully customizable from the tab-set configuration panel:
| Option | Description | Default |
|---|---|---|
| Step indicator size (px) | Diameter of each circle. Leave blank for default. | 20 px |
| Step indicator color | Background fill for all step circles. | Neutral gray |
| Completed step color | Color for completed steps (ring and optional checkmark). | SharePoint green #107c10 |
| Completed step style | How a completed step is shown: Fill (circle fills with the color) or Border — thin / medium / thick (1 / 2 / 4 px ring, fill unchanged). | Medium border |
| Show checkmark on completed steps | Renders an Accept icon inside completed circles. Sized to ⅓ of the diameter (min 15 px); turns white when using the Fill style so it stays readable. | Off |
| Show tab label below each step indicator | Shows the tab name under each circle. Labels wrap to the circle width, keeping all columns equal width. | Off |
| Show arrows between step indicators | Inserts a directional icon between circles. Defaults to ChevronRight; change it via the Fluent UI icon picker (type a name or use the picker button). | Off |
4. Worked example — a 3-step onboarding form
Goal: A clean, guided onboarding wizard that enforces completion order and gives clear progress feedback.
- Create a tab set with three tabs: Personal, Role, Review.
- Enable Show as multi-step form.
- Turn on Linear mode and Validate required fields before proceeding so users can’t skip ahead with empty required fields.
- Turn on Save form when Finish is clicked.
- Turn on Show overall progress bar.
- Step-indicator styling:
- Completed step style: Fill
- Completed step color: your brand color
- Show checkmark on completed steps: on
- Show tab label below each step indicator: on
- Show arrows between step indicators: on (ChevronRight)
- On the Review tab, set a per-step button label override of
Submitfor the Finish button.
Result: users move Personal → Role → Review in order, see a green progress bar and ticked steps as they go, and finish with a clearly labeled Submit that saves the form.