Step Separator

The Step Separator is a visual divider component that displays a numbered or labelled step indicator inline within page content. Unlike the Stepper block, it does not manage navigation or track a current step — it is purely presentational, used to divide long-form sections or multi-part documents into visually distinct labelled regions.

Overview

Drop a Step Separator between content sections when you want to visually indicate progression without building a full wizard or stepped container. It renders as a horizontal rule with an optional number badge and label centred or aligned on the line — similar to a section heading but with a step-number affordance that implies sequence.

Note: Use the Step Separator for static, decorative section labelling on a single page. Use the Stepper Block (Tabs & Stepped Container) when you need user-navigable steps with a progress indicator and next/back controls.

Properties

Content Properties

Appearance Properties

Auto-Numbering

When stepNumber is not set manually, Step Separator blocks are automatically numbered in document order — the first Step Separator on the page gets 1, the second gets 2, and so on. This means:

• You can add or reorder separators without manually updating numbers.

• If separators appear inside repeatable blocks or conditional containers, auto-numbering may produce unexpected results. Use stepNumber explicitly in those cases.

• Separators with showNumber: false are skipped in the auto-number sequence.

Use Cases

Long-Form Page Sections

Use Step Separators to divide a long single-page form or content layout into labelled sections — "Step 1: Fill in your details", "Step 2: Review and confirm", "Step 3: Payment". This gives users a sense of progress without a full stepped container.

Article and Document Subsections

Inside a document view or rich text area, Step Separators visually partition multi-part content: "Part 1: Background", "Part 2: Methodology", "Part 3: Results". They are visually lighter than an H2 heading but more prominent than a plain horizontal rule.

Multi-Part Intake Forms

When a single Form block contains many fields spanning several logical sections (personal info, address, employment details, emergency contacts), Step Separators break the form into scannable sections without requiring a full wizard.

Example: Long Form with Step Separators

Step Separator configuration for a multi-section form

// Separator 1 — before personal details fields label: "Personal Information" showNumber: true // auto-numbers to 1 orientation: left lineStyle: solid labelSize: md // Separator 2 — before address fields label: "Address Details" showNumber: true // auto-numbers to 2 orientation: left // Separator 3 — before document upload fields label: "Documents" showNumber: true // auto-numbers to 3 icon: "upload" // icon replaces number showNumber: false // Binding label to a dynamic value (e.g. department name from URL param) label: {{ "Section: " + pageParams.section }}

Tip: When the Step Separator is placed inside a left-aligned form, use orientation: left to keep the label anchored to the left edge of the content area. Centred labels work better for full-width page dividers where equal whitespace on both sides is intentional.

Related Components