Stepper | astryx-vue

Usage

Stepper lists the steps of a flow. activeStep is the zero-based current step. A step before it is completed, the current step is in progress, and the rest have not started.

Pass @step-click when a step can be chosen out of order. The handler receives the zero-based index, and only then do the steps render as buttons. The default separated layout draws a track above each horizontal step, with the indicator and the label on one row. indicatorPosition="on-track" sets the indicator into the connector and centers the label under it. indicator defaults to auto: a check when the step is done, a ring on the current step, and a number after that.

horizontalOptions.minimumStepWidth defaults to 112. A horizontal stepper collapses once it is narrower than that width times the step count, and shows the current step with Previous and Next. The track stays. collapsedVariant defaults to withLabelAndControls and skips disabled steps. withLabel drops the controls, and hiddenLabel leaves only the track.

vue

<script setup lang="ts">
import { Step, Stepper } from '@astryx-vue/core/Stepper'
import { ref } from 'vue'

const active = ref(2)
</script>

<template>
  <Stepper
    :active-step="active"
    :horizontal-options="{ minimumStepWidth: 112 }"
    @step-click="active = $event"
  >
    <Step label="Cart" :step="0" />
    <Step label="Shipping" :step="1" />
    <Step label="Payment" :step="2" />
    <Step label="Review" :step="3" />
    <Step label="Confirm" :step="4" />
  </Stepper>
</template>

Anatomy

Element	Description
Stepper	The ordered list holding the steps. Owns the orientation and the indicator placement the whole flow is laid out on.
Frame	The layout frame that groups the ordered steps with the optional compact summary shown at narrow widths.
Compact summary	The optional row a horizontal Stepper adds directly beneath the track once it is too narrow to label every step. horizontalOptions.collapsedVariant chooses a label with Previous/Next controls, the label alone, or no row for a bare progress track. The on-track layout keeps its indicators on the rail instead of repeating the active indicator beside the label. Every step keeps its name in the accessible sequence at any width.
Step	One step in the flow, and the element carrying its status. Wraps the indicator, label, description, and the track segments belonging to it.
Progress bar	A 4px segmented bar per step. Filled for completed and active steps. Advancing one step grows the fill along the track it just covered, so the movement reads as progress rather than a bar changing color. Every other change applies at once: going back, jumping forward by more than one step, mounting mid-flow, and any change at all under prefers-reduced-motion. Where a span is drawn by more than one segment (the on-track layouts split it between two steps, three when a content slot sits between them), the segments run in track order at one constant speed, so the fill reads as a single line growing rather than pieces lighting in turn.
Connector	The track drawn between indicators in the on-track layouts. Each connector paints an unfilled line and, over it, the accent fill covering the progress made. How many pieces a connector is drawn from is an implementation detail of the layout, not a themeable part; use --step-connector-gap to hold the track off the indicator.
Indicator	A numbered badge, a check, or any custom icon. Controlled via the indicator prop.
Label	Text identifying the step.
Description	Supporting text below the label with additional context.

Examples

Custom content

Project name
Repository URL

Each vertical step owns a slice of the page. The content slot can be fields, a summary, or a banner, and only the active step renders it.

Indicator modes

None

Auto

Number

Custom icon

None leaves progress to the bar and the label. Auto uses a check, a ring, or a number. Number always shows the step. A custom icon can replace the glyph.

On-track horizontal

On a horizontal track, each indicator sits in the connector so the numbers read as beads on one line. Labels center under their node.

On-track vertical

On a vertical rail, the indicator sits on the connector, with the label and description beside the node.

Validation status

Success, error, and accent recolor the indicator in a verification flow. Status never recolors the connector.

Horizontal narrow collapsed

At 320px, four steps fall below the 112px minimum width and collapse to the current step, with Previous and Next.

Usage ​