Navigationnew
Stepper
A multi-step wizard for complex processes. Supports linear and non-linear navigation.
LlmStepper + LlmStepDemo
Live PreviewReact
Interactive demo coming soon. See the code example above.
jsx
<LlmStepper activeStep={0}>
<LlmStep label="Basic Info">Step 1 content</LlmStep>
<LlmStep label="Verification">Step 2 content</LlmStep>
<LlmStep label="Complete">Step 3 content</LlmStep>
</LlmStepper>API (Angular)
| Prop | Type | Default | Description |
|---|---|---|---|
activeStep | number | 0 | Currently active step index |
linear | boolean | false | Forces user to complete steps in order |
orientation | 'horizontal' | 'vertical' | 'horizontal' | Stepper layout direction |
Composition parts
Stepper is composed from the parts below. Each part is its own component — drop the ones you don't need.
LlmStep
A single step in the wizard. Children render when the step is active.
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | — | Short title shown in the stepper header (required). |
description | string | — | Optional secondary line under the label. |
completed | boolean | false | Marks the step as completed (shows a checkmark). |
error | boolean | false | Marks the step as errored (shows an error glyph). |
optional | boolean | false | Tags the step as optional in the UI. |
disabled | boolean | false | Prevents the step from being activated. |
Import
ts
import { LlmStepper, LlmStep } from '@atelier-ui/angular';