Stepper

Fission

Product

▾

Setup

›

›

Stepper is the visual progress guide for staged flows.

Use it when the user moves through a known sequence such as onboarding, checkout, or setup. The important thing to understand is that the checked-in Stepper is informational. It shows step state, but it does not handle clicks or navigation on its own.

Example

use fission::prelude::*;

let widget: Widget = Stepper {
    steps: vec!["Account".into(), "Profile".into(), "Confirm".into()],
    active_index: view.state().current_step,
}
.into();

Field table

Field	Type	Meaning	Notes / default behavior
steps	Vec<String>	Labels for each step in order.	Required. Empty input renders a spacer.
active_index	usize	Current step position.	Steps before this index render as completed.

State ownership

Stepper reads step state from active_index every build. It does not decide when the user is allowed to advance, go backward, or skip steps. Those rules belong in your reducers and surrounding controls.

Production checklist

For Stepper, review the fields that change behavior before treating the widget as finished: steps, active_index. The goal is to make the product rule visible in state and actions, not hidden inside ad-hoc construction code.

•

If this widget appears inside an interactive flow, keep the surrounding action binding in the parent component and test that the flow still has one clear reducer path.

•

Check the semantics tree for the user-facing label or role that makes this widget understandable without relying only on pixels.

•

Add at least one component or harness test that confirms the visible text, semantic role, action dispatch, and layout constraint that matter for this widget in context.

If a screen starts repeating the same Stepper setup, extract a named component around this widget. That keeps the reference API small while making product code easier to read and safer for generated code to copy.

Tabs, Pagination, Alert, and ProgressBar.