Angular Stepper CoreUI

On this page

Introduced in Pro ~5.5.2+

Build multi-step forms and wizards easily with the Angular Stepper component. Create advanced form flows with custom indicators, validation, and flexible layouts for your Angular applications. The Angular Stepper component helps you build intuitive, multi-step form experiences (Form Wizards) for your Angular applications. It supports horizontal and vertical layouts, built-in form validation, custom indicators, and seamless integration with Angular forms. If you need a Form Wizard in Angular, or a fully customizable Angular Stepper, this component is a go to solution. ## Examples This example shows a simple multi-step form wizard built using the Angular Stepper component. Each step defines its content. Internal step navigation can be managed through provided stepper methods. Use this setup when you need a basic horizontal stepper without advanced customizations.

### Vertical indicator The step indicators are displayed vertically above the labels using the `stepButtonLayout="vertical"` prop, while the form content remains laid out horizontally. This option is useful when you want a more compact and visually balanced look for the step navigation, especially in narrower layouts. Use `stepButtonLayout="vertical"` when you want a clear visual separation of steps without changing the main content flow.

### Vertical layout This example shows a fully vertical multi-step form wizard created with the Angular Stepper component. By using the `layout="vertical"` prop, both the step indicators and the step content are stacked vertically. This layout is ideal for mobile devices or designs where vertical flow is preferred. Choose `layout="vertical"` if you want the entire wizard to guide users in a top-to-bottom progression.

### Linear Form Wizard By default, the Angular Component behaves as a linear wizard: users must complete each step sequentially before moving to the next one. Linear mode is enabled by default `[linear]="true"`, users cannot skip steps. They must finish the current step to unlock the next. Use a Linear Angular Stepper when you need a guided and controlled experience, such as: - Checkout process - Registration wizard - Multistep forms with validation This ensures data integrity and improves the user experience by keeping the flow focused.

### Non-linear Stepper You can configure the Angular Stepper Component to behave as non-linear, allowing users to jump freely between steps without validation restrictions. Set `[linear]="false"` property to allow non-sequential navigation. Use a Non-linear Angular Stepper when users should have full control over navigation, for example: - Survey forms - Onboarding flows where some steps are optional - Complex multi-section forms where order doesn't matter In non-linear mode, all steps are accessible unless explicitly disabled.

## Form Validation The Angular Stepper component natively supports step-by-step form validation. Use this feature to ensure required fields are filled and basic data integrity is maintained throughout the multi-step process without needing any additional code. The following example demonstrates how to use the Angular Stepper with HTML5 validation and template-driven form. Each step contains a form, and when the `validation` prop is enabled, users must complete each form before proceeding to the next step. If a form is invalid, the stepper prevents navigation until the form is valid. ### Browser Validation

### Custom Validation Beyond default HTML5 validation, you can define custom validation rules for each step. This allows you to implement complex form validation logic per step. In the example below using Angular reactive forms, custom validation triggers additional UI feedback.

### Skip validation To completely skip form validation and allow free navigation between steps, add `[validation]="false"` to the Angular Stepper component:

## Accessibility (a11y) The CoreUI Stepper Component is built with accessibility in mind: - Each step button is assigned proper ARIA roles (`role="tab"`) and attributes like `aria-selected`, `aria-controls`, and `tabindex`. - Step contents (stepper-pane) use `role="tabpanel"` and are properly linked to their trigger buttons. - Live updates are announced to screen readers with `aria-live="polite"`. - Keyboard navigation is fully supported. Thanks to these features, your form wizard will be fully compliant with WCAG and modern accessibility standards without additional work. ### Keyboard Support The Stepper component supports comprehensive keyboard navigation out of the box:

Key	Function	Note
`ArrowLeft`	Moves focus to previous step	`layout="horizontal"`
`ArrowRight`	Moves focus to next step	`layout="horizontal"`
`ArrowUp`	Moves focus to previous step	`layout="vertical"`
`ArrowDown`	Moves focus to next step	`layout="vertical"`
`Home`	Moves focus to the first step	`[linear]="false"`
`End`	Moves focus to the last step	`[linear]="false"`

## Customizing ### CSS variables Angular CoreUI Stepper use local CSS variables for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.

#### How to use CSS variables

### SASS variables

### Button Templates The Angular Stepper component allows you to customize step buttons using templates. This enables you to create unique step indicators, labels, and even add icons or custom HTML content.

--- ## API reference ### Stepper Module

### Stepper Standalone

### c-stepper _component_
##### Inputs

| name | description | type | default | | ---- | ----------- | ---- | ------- | | `activeStepIndex` | Currently active step index. | `number` | `0` | | `defaultActiveStepIndex` | Initial active step index. | `number` | `0` | | `id` | Unique HTML `id` for the component. If not provided, a default id will be generated. | `string` | `stepper-0` | | `layout` | Layout orientation. Choose `vertical` for narrow designs. | `horizontal \| vertical` | `horizontal` | | `linear` | Enforces linear progression (cannot skip steps). | `boolean` | `true` | | `stepButtonLayout` | Layout of the step indicator (icon and label). | `horizontal \| vertical` | `horizontal` | | `validation` | Enforces validation of steps. | `boolean` | `false` |

##### Outputs

| name | description | type | | ---- | ----------- | ---- | | `finished` | Emits when all steps are completed | `boolean` | | `onReset` | Emits when the user triggers the reset() action. | `void` | | `activeStepIndexChange` | Emits when the active step index changes | `number` |

##### Methods

| name | description | type | | ---- | ----------- | ---- | | `finish` | Triggers the finish action, marking the stepper as completed. | `void` | | `reset` | Resets the stepper to its initial state, clearing all steps and active index. | `void` | | `next` | Moves to the next step, if available and valid. | `void` | | `prev` | Moves to the previous step, if available. | `void` |

### c-stepper-step _component_
##### Inputs

| name | description | type | default | notes | | ---- | ----------- | ---- | ------- | ----- | | `label` | The label for the step | `string \| TemplateRef` | `''` | _required_ | | `id` | The unique identifier for the step | `string` | `''` | | `indicator` | The step indicator content | `string \| TemplateRef` | `''` | | `valid` | Indicates if the step is valid | `boolean` \| `undefined` | | `disabled` | Disables the step | `boolean` | `false` |