Navigation

Stepper

Guides people through a flow in steps. tx-stepper holds the steps together with their panels — in a row or as vertical items; tx-steps only shows where they are, from an array of steps.

Features10

API

Theming

Basic

tx-step-list holds the numbered steps and tx-step-panels their content; a step and a panel with the same value belong together. [(value)] is the active step. Panel content in an ng-template txStepPanelContent is rendered when the step is first opened and gets activate(value) for the panel's own buttons.

Workspace name

49 lines

<tx-stepper [(value)]="step">  <tx-step-list>    <tx-step [value]="1">Workspace</tx-step>    <tx-step [value]="2">Members</tx-step>    <tx-step [value]="3">Review</tx-step>  </tx-step-list>  <tx-step-panels>    <tx-step-panel [value]="1">      <ng-template txStepPanelContent let-activate>        <tx-field label="Workspace name">          <input txInput id="stepper-basic-name" [fluid]="true" [(ngModel)]="name" />        </tx-field>        <div class="actions">          <button txButton icon="arrow-right" iconPos="right" (click)="activate(2)">            Next          </button>        </div>      </ng-template>    </tx-step-panel>    <tx-step-panel [value]="2">      <ng-template txStepPanelContent let-activate>        <tx-field label="Invite by email">          <input txInput id="stepper-basic-email" [fluid]="true" [(ngModel)]="email" />        </tx-field>        <div class="actions">          <button txButton severity="secondary" icon="arrow-left" (click)="activate(1)">            Back          </button>          <button txButton icon="arrow-right" iconPos="right" (click)="activate(3)">            Next          </button>        </div>      </ng-template>    </tx-step-panel>    <tx-step-panel [value]="3">      <ng-template txStepPanelContent let-activate>        <p class="summary">          Create <b>{{ name() || 'Untitled' }}</b> and invite {{ email() || 'nobody yet' }}.        </p>        <div class="actions">          <button txButton severity="secondary" icon="arrow-left" (click)="activate(2)">            Back          </button>          <button txButton icon="check" (click)="step.set(1)">Create</button>        </div>      </ng-template>    </tx-step-panel>  </tx-step-panels></tx-stepper>

Linear

With linear the steps in the header cannot be picked: people move on only with the buttons of each panel, so a step cannot be skipped.

I accept the terms of service

39 lines

<tx-stepper [linear]="true" [(value)]="step">  <tx-step-list>    <tx-step value="terms">Terms</tx-step>    <tx-step value="plan">Plan</tx-step>    <tx-step value="done">Done</tx-step>  </tx-step-list>  <tx-step-panels>    <tx-step-panel value="terms">      <ng-template txStepPanelContent let-activate>        <tx-checkbox          inputId="stepper-linear-terms"          label="I accept the terms of service"          [binary]="true"          [(ngModel)]="accepted"        />        <div class="actions">          <button txButton [disabled]="!accepted()" (click)="activate('plan')">Continue</button>        </div>      </ng-template>    </tx-step-panel>    <tx-step-panel value="plan">      <ng-template txStepPanelContent let-activate>        <p class="text">The free plan includes three projects.</p>        <div class="actions">          <button txButton severity="secondary" (click)="activate('terms')">Back</button>          <button txButton (click)="activate('done')">Choose plan</button>        </div>      </ng-template>    </tx-step-panel>    <tx-step-panel value="done">      <ng-template txStepPanelContent let-activate>        <p class="text">You are all set.</p>        <div class="actions">          <button txButton severity="secondary" (click)="activate('terms')">Start over</button>        </div>      </ng-template>    </tx-step-panel>  </tx-step-panels></tx-stepper>

Vertical

tx-step-item puts a step and its panel together; the step and the panel take the item's value. Panels open under their step with an animation, and a line joins the steps — coloured up to the active one.

Enter the domain you own, without www.

36 lines

<tx-stepper [(value)]="step">  <tx-step-item value="domain">    <tx-step>Add the domain</tx-step>    <tx-step-panel>      <ng-template txStepPanelContent let-activate>        <p class="text">Enter the domain you own, without www.</p>        <button txButton size="small" (click)="activate('dns')">Next</button>      </ng-template>    </tx-step-panel>  </tx-step-item>  <tx-step-item value="dns">    <tx-step>Update DNS records</tx-step>    <tx-step-panel>      <ng-template txStepPanelContent let-activate>        <p class="text">Point the A record to 203.0.113.10 at your registrar.</p>        <div class="actions">          <button txButton size="small" severity="secondary" (click)="activate('domain')">            Back          </button>          <button txButton size="small" (click)="activate('verify')">Next</button>        </div>      </ng-template>    </tx-step-panel>  </tx-step-item>  <tx-step-item value="verify">    <tx-step>Verify</tx-step>    <tx-step-panel>      <ng-template txStepPanelContent let-activate>        <p class="text">Checks usually pass within a few minutes.</p>        <button txButton size="small" severity="secondary" (click)="activate('dns')">          Back        </button>      </ng-template>    </tx-step-panel>  </tx-step-item></tx-stepper>

Disabled step

A disabled step cannot be picked and the arrow keys skip it. Panels without a template are plain content and stay rendered.

Paid plan

Your name and photo.

13 lines

<tx-toggle-switch class="option" label="Paid plan" [(ngModel)]="paid" /><tx-stepper [value]="1">  <tx-step-list>    <tx-step [value]="1">Profile</tx-step>    <tx-step [value]="2">Team</tx-step>    <tx-step [value]="3" [disabled]="!paid()">Billing</tx-step>  </tx-step-list>  <tx-step-panels>    <tx-step-panel [value]="1">Your name and photo.</tx-step-panel>    <tx-step-panel [value]="2">People who can open the projects.</tx-step-panel>    <tx-step-panel [value]="3">Card and invoices.</tx-step-panel>  </tx-step-panels></tx-stepper>

Step template

ng-template txStepContent replaces the step header with your own; it gets the step value, index, active, completed, disabled and activate(value). The separators stay. Inside a tx-step-list give the own button role="tab" and aria-selected.

Account: email and password.

33 lines

<tx-stepper [(value)]="step">  <tx-step-list>    @for (item of steps; track item.value) {      <tx-step [value]="item.value">        <ng-template          txStepContent          let-value          let-active="active"          let-completed="completed"          let-activate="activate"        >          <button            type="button"            class="own-step"            [class.own-step--on]="active || completed"            role="tab"            [attr.aria-selected]="active"            [attr.aria-current]="active ? 'step' : null"            [attr.aria-label]="item.label"            (click)="activate(value)"          >            <tx-icon [name]="item.icon" />          </button>        </ng-template>      </tx-step>    }  </tx-step-list>  <tx-step-panels>    @for (item of steps; track item.value) {      <tx-step-panel [value]="item.value">{{ item.label }}: {{ item.text }}</tx-step-panel>    }  </tx-step-panels></tx-stepper>

Steps

tx-steps shows where people are in a flow from an items array, without panels. [(activeIndex)] is the current step; by default the steps are readonly, so the page moves them on.

Cart, completed
Shipping
Payment
Confirmation

20 lines

<tx-steps ariaLabel="Checkout" [items]="items" [(activeIndex)]="active" /><div class="actions">  <button    txButton    severity="secondary"    size="small"    [disabled]="active() === 0"    (click)="active.set(active() - 1)"  >    Back  </button>  <button    txButton    size="small"    [disabled]="active() === items.length - 1"    (click)="active.set(active() + 1)"  >    Next  </button></div>

Clickable steps

With [readonly]="false" every enabled step with a command is a button: a click makes it current and runs the command with { originalEvent, item, index }. Steps without a command stay plain. Arrow keys, Home and End move between the clickable steps; disabled ones are skipped.

Payment

Click a step

Track

variant="track" is a compact row of markers with a label and a description: done steps get a check, the current one is filled, and an icon replaces the number. Narrower than 560px it stacks in a column. Setting activeIndex to items.length marks every step done.

DomainName and zone, completed
RecordsImport from the registrar
SecurityCertificate and firewall
LaunchGo live

20 lines

<tx-steps variant="track" ariaLabel="Domain setup" [items]="items" [(activeIndex)]="active" /><div class="actions">  <button    txButton    severity="secondary"    size="small"    [disabled]="active() === 0"    (click)="active.set(active() - 1)"  >    Back  </button>  <button    txButton    size="small"    [disabled]="active() === items.length"    (click)="active.set(active() + 1)"  >    {{ active() === items.length - 1 ? 'Finish' : 'Next' }}  </button></div>

Steps template

ng-template txStepsItem draws the content of each step; it gets the item, index, active and done. Done steps still announce "completed" to screen readers.

Ordered , completed
Packed , completed
Shipped
Delivered

10 lines

<tx-steps ariaLabel="Order status" [items]="items" [activeIndex]="2">  <ng-template txStepsItem let-item let-done="done" let-active="active">    <span class="own" [class.own--done]="done" [class.own--active]="active">      <span class="own__marker"        ><tx-icon [name]="done ? 'check' : active ? 'clock' : 'circle'"      /></span>      {{ item.label }}    </span>  </ng-template></tx-steps>

Design tokens

dt changes the tokens of one instance: stepper tokens on tx-stepper (numbers, titles, separators, panels), steps tokens on tx-steps (the track group for the track look).

BuildCompile and test, completed
DeployRoll out to staging
ReleaseShip to everyone

27 lines

<tx-stepper  [value]="2"  [dt]="{    stepNumber: {      size: '32px',      activeBackground: 'var(--tx-green-700)',      activeBorderColor: 'var(--tx-green-700)',      activeColor: 'var(--tx-surface-0)',    },    stepTitle: { activeColor: 'var(--tx-green-700)' },    separator: { activeBackground: 'var(--tx-green-700)' },  }">  <tx-step-list>    <tx-step [value]="1">Upload</tx-step>    <tx-step [value]="2">Review</tx-step>    <tx-step [value]="3">Publish</tx-step>  </tx-step-list></tx-stepper><tx-steps  class="track"  variant="track"  ariaLabel="Release"  [items]="items"  [activeIndex]="1"  [dt]="{ track: { markerSize: '28px', activeMarkerBackground: 'var(--tx-green-700)' } }"/>