Stepper

Displays the current step and completion states in a multi-step flow.

Component behaviorCopy link

Stepper displays flow steps and the current position. Navigation is optional and defaults to backward navigation when enabled.

WizardNav renders a Stepper using wizard state. Use Wizard when the flow also requires content panes, validation, and footer actions.

PropsCopy link

StepCopy link

StepStateCopy link

Both render callbacks receive index, status, done, active, error, clickable, and select. select invokes onStepClick for the step.

import { Stepper } from "@solarius/onset";
import type {
  Step,
  StepStatus,
  StepState,
  StepperProps,
} from "@solarius/onset";

VariantsCopy link

variant selects circles, bars, dots, or panels. Variants share status values, connectors, navigation rules, and markup.

Labels under the markersCopy link

labelPlacement="below" centers labels below markers and connects the markers horizontally. Labels wrap in this placement; other placements truncate labels.

labelPlacement="none" keeps the label in the accessibility tree and drops it from the layout, for a strip that has to fit a toolbar. It is the default for dots.

VerticalCopy link

orientation="vertical" renders a rail with connectors in the marker column. Consecutive steps sharing a group receive a group heading. Wizard uses the panels variant for vertical navigation.

const steps: Step[] = [
  {
    key: "account",
    label: "Account",
    description: "Owner and billing",
    group: "Tenant",
  },
  {
    key: "region",
    label: "Region",
    description: "Where data lives",
    group: "Tenant",
  },
  { key: "database", label: "Database", group: "Infrastructure" },
  { key: "tls", label: "TLS", optional: true, group: "Infrastructure" },
  { key: "review", label: "Review", badge: "12", group: "Finish" },
];

<Stepper
  steps={steps}
  activeIndex={2}
  orientation="vertical"
  variant="panels"
/>;

Step statesCopy link

activeIndex marks the current position. Earlier steps are complete and later steps are upcoming. Set activeIndex={steps.length} to mark the flow complete.

Skipped and failedCopy link

A skipped optional step uses a dashed marker. An error state takes precedence over other statuses so failed steps remain identifiable.

Set skipped, error, and completed using step keys, or assign status on individual steps. error={true} marks the current step as failed.

Size and toneCopy link

size sets marker dimensions, font size, and spacing. tone sets the accent for completed markers, the current marker, and completed connectors. Failed steps use err regardless of tone.

Custom propertiesCopy link

Everything the component measures with is a custom property on the root, so density is tunable without restating a rule. Set them in style, or on any ancestor.

NavigationCopy link

onStepClick enables step buttons according to interactive. The default, "completed", permits selecting completed and skipped steps. Other steps remain noninteractive. The application handles advancement.

interactive="all" permits clicks on every step except those marked disabled. The application controls reachability.

Custom step renderingCopy link

renderMarker replaces the marker while retaining the label, truncation, and state colors. renderStep replaces marker and label content while retaining connectors, button/span semantics, click handling, focus styling, and data-state.