HelixOverviewDocsComponentsSandboxTheme builderCortexDocsEngramBuildingTraceBuildingRecallDeclaredServicesInsightsGet in touchSource on GitHub
Loading the reference
StepsView SourceEdit in SandboxView MarkdownCopy MarkdownOpen in ClaudeOpen in CursorA sequence of stages, and where the reader is in it.ExperimentalSince 0.1.0NavigationUsageimport'@fusion.dev/helix/steps'import'@fusion.dev/helix-headless/steps'Preview
API ReferenceStephelix-stepOne stage in a sequence.
PropTypeDefaultDescriptioncompletebooleanfalseWhether the reader has finished this stage.currentbooleanfalseWhether this is the stage the reader is in.disabledbooleanfalseWhether the reader may go to this stage.valuestring""What this stage is called when it announces itself.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The step's name.contentWhat the stage holds, shown while it is the current one.descriptionA line under the name, for what the stage is for.markerReplaces the number, or the check a complete step shows.
EventTypeDescriptionhelix-selectHelixSelectEventFired when the step is pressed. Cancelable: refusing it takes the decision and nothing moves.
MethodTypeDescriptionselect() => voidAnnounces the step, unless it is refusing.
PartDescriptionbodyThe name and its description.contentWhat the stage holds, while it is open.descriptionThe line under it.labelThe step's name, which is a `helix-button`.label-buttonThe inner control.leadThe half line arriving from the step before.markThe glyph inside the marker: a tick, a dot, or an empty ring.markerThe shape carrying the number or the check.trailThe half line running on to the next.
Roothelix-stepsA sequence of stages, and where the reader is in it.
PropTypeDefaultDescriptionactivestringWhich item is current, by its `value`.defaultActivestring""Initial item for uncontrolled use.labelstring"Steps"Accessible name for the sequence.orientation"vertical"Which way the steps run.variant"numeric"What each step is marked with.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The steps, which are `helix-step` elements.
EventTypeDescriptionhelix-activateHelixActivateEventFired once the current one has moved, so the element already holds it.helix-before-activateHelixBeforeActivateEventFired before the active step changes. Cancelable: refusing it takes the decision and nothing moves.
MethodTypeDescriptionrequestActive(next: string) => booleanRequests a new current item, and reports whether the request stood.
CSS PropertyDescription--steps-complete-colorThe mark on a finished step.--steps-connector-colorThe rule running through the steps.--steps-connector-insetAir either side of a mark, before the rail.--steps-current-colorThe mark on the current step.--steps-gapSpace between one step and the next.--steps-marker-sizeSize of the mark, glyph or digit.
Stephelix-headless-stepOne stage in a sequence.
PropTypeDefaultDescriptioncompletebooleanfalseWhether the reader has finished this stage.currentbooleanfalseWhether this is the stage the reader is in.disabledbooleanfalseWhether the reader may go to this stage.valuestring""What this stage is called when it announces itself.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The step's name.contentWhat the stage holds, shown while it is the current one.descriptionA line under the name, for what the stage is for.markerReplaces the number, or the check a complete step shows.
EventTypeDescriptionhelix-selectHelixSelectEventFired when the step is pressed. Cancelable: refusing it takes the decision and nothing moves.
MethodTypeDescriptionselect() => voidAnnounces the step, unless it is refusing.
PartDescriptionbodyThe name and its description.contentWhat the stage holds, while it is open.descriptionThe line under it.labelThe step's name, which is a `helix-button`.label-buttonThe inner control.leadThe half line arriving from the step before.markThe glyph inside the marker: a tick, a dot, or an empty ring.markerThe shape carrying the number or the check.trailThe half line running on to the next.
Roothelix-headless-stepsA sequence of stages, and where the reader is in it.
PropTypeDefaultDescriptionactivestringWhich item is current, by its `value`.defaultActivestring""Initial item for uncontrolled use.labelstring"Steps"Accessible name for the sequence.orientation"vertical"Which way the steps run.variant"numeric"What each step is marked with.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The steps, which are `helix-step` elements.
EventTypeDescriptionhelix-activateHelixActivateEventFired once the current one has moved, so the element already holds it.helix-before-activateHelixBeforeActivateEventFired before the active step changes. Cancelable: refusing it takes the decision and nothing moves.
MethodTypeDescriptionrequestActive(next: string) => booleanRequests a new current item, and reports whether the request stood.
ExamplesNameDescriptionActiveA sequence with the third step current, so before and after both show.CollapsibleSteps that fold to the current one where there is no room for all of them.ControlledA sequence the page owns, so a step only advances once the work behind it is done.EventsA step asks to be the current one, and the sequence decides.NumericNumbered steps rather than marked ones.PreviewA sequence with each step named and its state shown.PreviewA sequence with each step named and its state shown.VerticalThe sequence running down rather than across.