gog-stepper

Stepper 21.18.0

Where a reader is in a multi-step task — an indicator, not a wizard. It shows the steps, says each one's state in words a screen reader hears, and works out which steps can be reached; the app renders each step's content and decides when a step is complete.

Overview

import { StepperComponent, type GogStep } from '@guildofgleks/ui';

@Component({
  // ...
  imports: [StepperComponent],
})

Give it the steps as data and bind the active one. A press on a reachable step moves it:

Payment
Review

<gog-stepper [steps]="steps" [(activeIndex)]="active" />

Examples

Every state at once

Complete (the check), error (the danger glyph), current (the accent ring), optional (the word under the label), disabled, and pending. Each step's state, optional and disabled live in your GogStep data.

AddressCurrent
Gift wrap

<gog-stepper [steps]="steps" [activeIndex]="2" [linear]="false" />

orientation="vertical"

The same steps stacked, the connector running down between indicators. A description sits under each label.

AddressCurrent
Gift wrap

<gog-stepper orientation="vertical" [steps]="steps" [activeIndex]="2" [linear]="false" />

Sizes

Five text steps; the indicator is a ratio of the label's size, so nothing else needs a value per size.

xsm

Address
Review

Address
Review

Address
Review

Address
Review

slg

Address
Review

@for (size of sizes; track size) {
  <div>
    <span>{{ size }}</span>
    <gog-stepper [size]="size" [steps]="steps" [activeIndex]="1" />
  </div>
}

Reachability

In a linear flow, which steps are buttons follows from the steps’ states — getting that wrong in markup either traps a reader or lets them skip a required step.

A flow you can walk

The stepper reacts to your data. Marking a step complete opens the way forward when linear is on: a reader may go back to any step and forward only as far as the steps before are complete or optional. Switch linear off and every step that is not disabled can be reached.

Account
Address
Payment
Review

linear

<gog-stepper [steps]="steps()" [linear]="linear()" [(activeIndex)]="active" />
<div>
  <gog-button variant="secondary" [disabled]="active() === 0" (gogClick)="active.set(active() - 1)">
    Back
  </gog-button>
  <gog-button (gogClick)="complete()">Mark "{{ steps()[active()].label }}" complete</gog-button>
  <gog-button variant="ghost" (gogClick)="reset()">Start over</gog-button>
  <gog-toggle label="linear" [(checked)]="linear" />
</div>

Layout

Direction and width. The row mirrors under RTL by itself; and a horizontal row has a minimum width, which is a decision rather than a bug — past it, stack the steps.

Right to left

The row runs from the right under dir="rtl", connectors included.

Address
Review

<div dir="rtl">
  <gog-stepper [steps]="steps" [activeIndex]="1" />
</div>

A narrow container

A label wraps only at its spaces and a step is never narrower than its longest word; the connectors give way first. Past that a horizontal row overflows its container — six steps do not fit 14rem side by side. orientation="vertical" fits any width.

Address
Shipping
Payment
Confirmation
Review

<div style="max-width: 14rem">
  <gog-stepper orientation="vertical" [steps]="steps" [activeIndex]="1" />
</div>

Accessibility

A stepper's whole message is visual — filled, ringed, red, grey — and the component says it.

List — an ordered list named "Progress" (ariaLabel, or GOG_CONFIG.labels.stepper).
Current step — aria-current="step".
State in words — visually hidden text after the label: "Account, completed", "Card, has an error" (stepCompleted, stepError). The number or glyph in the indicator is aria-hidden; it is drawn, not read.
Unreachable steps are text, not disabled buttons — a keyboard reader would still have to Tab past a disabled button. Reachable steps are buttons.

API Reference

gog-stepper inputs

Name	Type	Default	Description
`steps`	`readonly GogStep[]`	`[]`	The steps, as data: label, description, state, optional, disabled.
`activeIndex`	`number (model)`	`0`	Two-way; a press on a reachable step sets it.
`linear`	`boolean`	`true`	Forward only as far as the steps before are complete or optional.
`orientation`	`GogOrientation`	`'horizontal'`	'vertical' stacks the steps; it is also the answer for a narrow container.
`size`	`GogSize`	`'md'`	'xsm' \| 'sm' \| 'md' \| 'lg' \| 'slg'.
`ariaLabel`	`string \| undefined`	`undefined`	Names the list. Unset, GOG_CONFIG.labels.stepper, then "Progress".

GogStep

Name	Type	Default	Description
`label`	`string`	`—`	The step’s name.
`description`	`string`	`undefined`	A line under the label.
`state`	`'complete' \| 'error'`	`undefined (not started)`	What the indicator draws, and the hidden words a screen reader hears.
`optional`	`boolean`	`false`	Shows "Optional" under the label; a linear stepper does not wait for it.
`disabled`	`boolean`	`false`	Never reachable from the stepper, whatever linear says.

Global Configuration

Set any of these once with provideGogConfig() instead of repeating them on every instance — an instance's own input still wins when it sets one itself. See Global Configuration for the full reference.

GOG_CONFIG.labels.stepper — the list’s name, unless ariaLabel is set
GOG_CONFIG.labels.stepCompleted — the hidden words after a complete step’s label
GOG_CONFIG.labels.stepError
GOG_CONFIG.labels.stepOptional — shown under an optional step’s label

Styling Tokens

Every CSS custom property the stepper paints with. Override any of them — on a single instance, a subtree, or a theme — to restyle it. See the Theming guide for the full token-layering model, or the Theme Generator to tweak these live.

Token	Description
`--gog-stepper-font-family / -line-height / -gap`	The step’s typeface, its leading, and the space between indicator, label and connector.
`--gog-stepper-xsm-font-size / -sm-font-size / -md-font-size / -lg-font-size / -slg-font-size`	The label at each size; the indicator is a ratio of it, so the five sizes are five text steps.
`--gog-stepper-trigger-padding-y / -trigger-padding-x / -trigger-radius / -trigger-hover-bg / -trigger-press-bg`	A reachable step is a button: its padding, corner, hover and press.
`--gog-stepper-focus-ring-width / -focus-ring-offset / -focus-ring-color`	The keyboard focus ring on a reachable step.
`--gog-stepper-indicator-ratio`	The indicator’s diameter as a multiple of the label’s font size (2: the number with half an em clear).
`--gog-stepper-indicator-border-width / -indicator-border-color / -indicator-bg / -indicator-color / -indicator-font-weight`	A pending step’s indicator: the ring, its fill, and the number.
`--gog-stepper-label-color / -description-color / -description-font-size / -description-line-height`	The label, and the description under it (a step down the type scale, as a ratio).
`--gog-stepper-current-color / -current-label-color / -current-font-weight`	The current step: the accent ring and number, and its label.
`--gog-stepper-complete-bg / -complete-color`	A complete step’s filled indicator and the check on it.
`--gog-stepper-error-bg / -error-color / -error-label-color`	A step with an error: the filled indicator, its glyph, and the label.
`--gog-stepper-unreachable-color`	The label of a step a linear stepper cannot reach yet.
`--gog-stepper-connector-thickness / -connector-min-length / -connector-color / -connector-done-color`	The line between indicators: its weight, the shortest it gets before the row overflows, and its colour pending and after a complete step.