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.
In linear mode, users must complete the previous step before moving to the next. (Note: Interaction logic can be customized via the [linear] input).
Run the following command to add this component to your project:
npx base-ui-cli add stepper
For AI agents
Copy a prompt with the registry name, CLI install, and import — or add the Base UI MCP server.
npx -y base-ui-mcp
Base UI provides standalone components. Import the exact elements you want to use into your component.
// Install: npx base-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 |
|---|---|---|---|---|
base-step | label | string | '' | The primary title text for this step. |
base-step | icon | string | '' | Optional SVG icon name to display instead of a number. |
base-step | description | string | '' | Optional secondary subtitle text for this step. |
base-step | isValid | boolean | true | If false, prevents advancing past this step if the stepper uses internal navigation. |
base-stepper | activeStepIndex | number | 0 | The zero-based index of the currently active step. |
base-stepper | linear | boolean | false | If true, the user is restricted from jumping ahead to uncompleted steps. |
base-stepper | hideNavigation | boolean | false | If true, hides the internal 'Next', 'Back', and 'Submit' buttons. Accepts a bare attribute (`hideNavigation`). |
base-stepper | (stepChange) | number | — | Emitted whenever the active step index changes. |
base-stepper | (stepperSubmit) | void | — | Emitted when the stepper is submitted on the final step. |
base-stepper | successTitle | unknown | 'All done!' | The title displayed on the success screen after submission. |
base-stepper | successMessage | unknown | 'Your request has been successfully submitted.' | The message displayed on the success screen after submission. |
Content