# Stepper

Use to guide a user through a linear process with defined steps (e.g., Onboarding). Indicates current, completed, and upcoming steps.

import Anatomy from "../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../components/StubFooter.astro";
import DoDont from "../../../../../components/DoDont.astro";
import Callout from "../../../../../components/Callout.astro";
import TermList from "../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.stepper.content"
  source="components/dist/registries/dskit.json#stepper"
  schema={1}
  updated="2026-05-14"
/>

<ComponentTabs component={"stepper"} activeTab={"content"} />

## Content guidelines

A stepper guides users through a multi-step process in a defined sequence. Each step represents a discrete task that must be completed before moving to the next. Steppers are used in onboarding flows, connection setup, and wizards.

### When to use

- When a process has three or more distinct steps that must be completed in order.
- When it is important for users to understand their progress through a workflow.
- Do not use a stepper for simple two-step confirmations - use a [modal](/components/overlays/modal/) instead.

### Step titles

- Use short imperative verb phrases. For example, `Choose a data source`, `Configure settings`, `Review and create`.
- Do not include the step number in the title text - the stepper component displays that.
- Keep titles parallel in structure across all steps.

### Navigation buttons

- Use **Back** for the previous step button. Do not use **Previous**.
- Use **Next** for all intermediate steps.
- Use **Create** (or the appropriate object-specific verb) for the final step - not **Finish**, **Done**, or **Submit**.
- See the [Buttons](/components/action/button/) section for full stepper button terminology.

### Do / Don't

<DoDont pairs={[{ do: "Choose a data source", dont: "Step 1: Data source selection" }, { do: "Create (final step)", dont: "Finish / Done / Submit" }, { do: "Back", dont: "Previous" }]} />

Wizards are guided multi-step flows that walk users through complex setup or configuration tasks. They combine steppers, forms, and confirmation screens into a linear sequence with clear progression.

### When to use

- For complex setup tasks that cannot be completed on a single form - for example, creating a connection, configuring a pipeline, or onboarding a new dataset.
- When the steps have a natural sequence and later steps depend on earlier choices.
- Do not use a wizard for simple tasks that can be completed in a single form or modal.

### Step titles

- Short imperative verb phrases. For example, `Choose a connector`, `Set connection details`, `Test and save`.
- Parallel structure across all steps.
- Do not repeat the wizard title in each step title.

### In-step content

- Use a short paragraph at the top of each step to explain what the user is about to do and why.
- Keep explanatory text to two sentences maximum.
- Use inline help (popovers or helper text) for field-level guidance rather than long step-level explanations.

### Confirmation and summary step

- The final step before submission should present a summary of the user's choices.
- Label the summary step `Review` or `Review and create`.
- Use the same attribute labels as the preceding form fields - do not rephrase.
- Show an edit link next to each section so the user can go back and change specific settings.

### Navigation buttons

Follow the [stepper button terminology guidelines](/components/navigation/stepper/). Use **Back**, **Next**, and the appropriate object-specific verb for the final step (for example, **Create connection**).

### Do / Don't

<DoDont pairs={[{ do: "Choose a connector", dont: "Connector selection step" }, { do: "Review and create", dont: "Confirmation" }, { do: "Create connection", dont: "Finish / Submit / Done" }, { do: "Connect to your data source. This will allow the platform to read and write data on your behalf.", dont: "Please complete all required fields in this step before proceeding." }]} />