The CDK stepper from @angular/cdk/stepper is an unstyled primitive: the cdkStepper directive owns selection state, each cdk-step declares a label (and optionally a stepControl form), and the consumer renders the headers + body manually. [linear]="true" gates progress on each step's form validity; cdkStepperNext / cdkStepperPrevious advance the selection programmatically.
The four cells of the demo all use the same cdkStepper wiring — only [linear] and orientation change. Header / body layout is consumer-owned; switch between the two by templating the headers in a row (horizontal) vs. interleaving each header with its body (vertical).
@angular/cdk/stepper is an unstyled primitive. See the Angular CDK stepper documentation for the full API. The four examples below cover the cross of linear (forms gate Next) and orientation (horizontal vs. vertical). Reactive-form wizard. Next stays disabled until the current step's form is valid.
Reactive-form checkout flow. Same gating, vertical layout — headers stack and the active step's body renders below its header.
Free navigation — click any header to jump to that step. No form validation gates progress.
Welcome to the demo. This stepper is non-linear: click any of the headers above to skip ahead.
Settings-style panel: click any section header to expand its content; no required order.
Avatar, display name, bio.