The Stepper component conveys progress through numbered steps. It provides a wizard-like workflow and guides users through a multi-step process.
A simple horizontal stepper with labels and descriptions.
<ply-stepper>
<ply-step label="Step 1" description="Details 1" icon="user">
<!-- Content for Step 1 -->
</ply-step>
<ply-step label="Step 2" description="Details 2" icon="lock">
<!-- Content for Step 2 -->
</ply-step>
</ply-stepper>
TypeScript
import { Component } from '@angular/core';
// Install: npx ply-ui-cli add stepper
// Paths are relative to aliases.components (default: src/app/components)
import { StepComponent } from './stepper/step/step.component';
import { StepperComponent } from './stepper/stepper.component';
@Component({
selector: 'app-stepper-example',
imports: [
StepComponent,
StepperComponent
],
template: `...`
})
export class StepperExampleComponent {}Install
npx ply-ui-cli add stepper
In linear mode, users must complete the previous step before moving to the next. (Note: Interaction logic can be customized via the [linear] input).
TypeScript
import { Component } from '@angular/core';
// Install: npx ply-ui-cli add stepper
// Paths are relative to aliases.components (default: src/app/components)
import { StepComponent } from './stepper/step/step.component';
import { StepperComponent } from './stepper/stepper.component';
@Component({
selector: 'app-stepper-example',
imports: [
StepComponent,
StepperComponent
],
template: `...`
})
export class StepperExampleComponent {}Install
npx ply-ui-cli add stepper
Run the following command to add this component to your project:
npx ply-ui-cli add stepper
For AI agents
Copy a prompt with the registry name, CLI install, and import — or add the Ply MCP server.
npx -y ply-ui-mcp
Ply provides standalone components. Import the exact elements you want to use into your component.
// Install: npx ply-ui-cli add stepper
// Paths are relative to aliases.components (default: src/app/components)
import { StepComponent } from './stepper/step/step.component';
import { StepperComponent } from './stepper/stepper.component';
@Component({
selector: 'app-your-component',
imports: [
StepComponent,
StepperComponent
],
template: `...`
})
export class YourComponent {} API for stepper — generated from JSDoc in the library source.
| API | Member | Type | Default | Description |
|---|---|---|---|---|
ply-step | label | string | '' | The primary title text for this step. |
ply-step | icon | string | '' | Optional SVG icon name to display instead of a number. |
ply-step | description | string | '' | Optional secondary subtitle text for this step. |
ply-step | isValid | boolean | true | If false, prevents advancing past this step if the stepper uses internal navigation. |
ply-stepper | activeStepIndex | number | 0 | The zero-based index of the currently active step. |
ply-stepper | linear | boolean | false | If true, the user is restricted from jumping ahead to uncompleted steps. |
ply-stepper | hideNavigation | boolean | false | If true, hides the internal 'Next', 'Back', and 'Submit' buttons. Accepts a bare attribute (`hideNavigation`). |
ply-stepper | (stepChange) | number | — | Emitted whenever the active step index changes. |
ply-stepper | (stepperSubmit) | void | — | Emitted when the stepper is submitted on the final step. |
ply-stepper | successTitle | unknown | 'All done!' | The title displayed on the success screen after submission. |
ply-stepper | successMessage | unknown | 'Your request has been successfully submitted.' | The message displayed on the success screen after submission. |
Content