Import
import { StepperModule } from '@backbase/ui-ang/stepper'
Usage
Use the bb-stepper-ui component with bb-stepper-step-ui child components to create a stepper. Each step can be configured with labels, states, and data for interaction.
<!-- Basic stepper usage -->
<bb-stepper-ui>
<bb-stepper-step-ui
label="Fill out your Name"
[isCurrent]="false"
[isChecked]="true"
[isActive]="true">
</bb-stepper-step-ui>
<bb-stepper-step-ui
label="Fill out your Address"
[isCurrent]="true"
[isChecked]="false"
[isActive]="true">
</bb-stepper-step-ui>
<bb-stepper-step-ui
label="Fill out your Date of Birth"
[isCurrent]="false"
[isChecked]="false"
[isActive]="false">
</bb-stepper-step-ui>
</bb-stepper-ui>
Inputs
The bb-stepper-ui component does not have any direct inputs. All configuration is done through the child bb-stepper-step-ui components.
Stepper Step inputs
|
Input |
Type |
Default |
|---|---|---|
|
data |
any |
undefined |
|
isActive |
boolean |
false |
|
isChecked |
boolean |
false |
|
isCurrent |
boolean |
false |
|
label |
string |
undefined |
|
stateLabel |
string |
undefined |
data
The data input sets the data associated with the step. When provided, the step becomes clickable and emits this data when clicked.
<!-- Step with data for click handling -->
<bb-stepper-step-ui
[data]="'step-1-data'"
label="Personal Information">
</bb-stepper-step-ui>
isActive
The isActive input marks the step as active, applying active styling to both the icon and label.
<!-- Active step -->
<bb-stepper-step-ui
[isActive]="true"
label="Personal Information">
</bb-stepper-step-ui>
isChecked
The isChecked input marks the step as completed, displaying a check icon instead of the step number.
<!-- Completed step with check icon -->
<bb-stepper-step-ui
[isChecked]="true"
label="Personal Information">
</bb-stepper-step-ui>
isCurrent
The isCurrent input marks the step as the currently active step in the process.
<!-- Current step -->
<bb-stepper-step-ui
[isCurrent]="true"
label="Personal Information">
</bb-stepper-step-ui>
label
The label input sets the text label displayed for the step.
<!-- Step with label -->
<bb-stepper-step-ui label="Personal Information"></bb-stepper-step-ui>
stateLabel
The stateLabel input sets additional state information displayed below the main label, typically used in vertical steppers.
<!-- Step with state label -->
<bb-stepper-step-ui
label="Personal Information"
stateLabel="Completed">
</bb-stepper-step-ui>
Outputs
|
Output |
Type |
Description |
|---|---|---|
|
select |
EventEmitter<any> |
Emits when a step with data is clicked |
CSS classes
The following CSS classes can be used to customize the stepper appearance:
Vertical layout
Apply the bb-stepper--vertical class to display the stepper in vertical orientation.
<!-- Vertical stepper -->
<bb-stepper-ui class="bb-stepper--vertical">
<bb-stepper-step-ui label="Step 1"></bb-stepper-step-ui>
<bb-stepper-step-ui label="Step 2"></bb-stepper-step-ui>
</bb-stepper-ui>
Reset padding
Apply the bb-stepper--reset-padding class to remove default padding from the stepper container.
<!-- Stepper with reset padding -->
<bb-stepper-ui class="bb-stepper--reset-padding">
<bb-stepper-step-ui label="Step 1"></bb-stepper-step-ui>
<bb-stepper-step-ui label="Step 2"></bb-stepper-step-ui>
</bb-stepper-ui>
Accessibility
This component is built with accessibility in mind. See the information below for supported behaviors and configuration options to ensure a fully accessible experience for all users.
The stepper uses proper ARIA roles and attributes:
- The stepper container has role="list" to indicate it contains a list of steps
- Each step has role="listitem" to identify it as a list item
- Current steps are marked with aria-current="true"
- Separators are marked with aria-hidden="true" to hide them from screen readers
ARIA
These inputs support WAI-ARIA compliance and are intended to improve accessibility for users relying on assistive technologies. Use them to provide meaningful semantic information for the component when additional context is needed to convey its purpose, state, or behavior.
|
Input |
Description |
Type |
|---|---|---|
|
aria-label |
Sets the accessible label for the step when different from the visible label |
string |
Custom templates
You can customize the step rendering by providing a custom template using the bbCustomStepperStep directive:
<!-- Stepper with custom step template -->
<bb-stepper-ui>
<ng-template bbCustomStepperStep let-step let-number="number" let-isLast="isLast" let-isChild="isChild">
<!-- Your custom step template -->
<div class="custom-step">
<span>{{ number }}. {{ step.label }}</span>
</div>
</ng-template>
<bb-stepper-step-ui label="Step 1"></bb-stepper-step-ui>
<bb-stepper-step-ui label="Step 2"></bb-stepper-step-ui>
</bb-stepper-ui>
Nested steps
The stepper supports nested sub-steps by placing bb-stepper-step-ui components inside other step components:
<!-- Stepper with nested steps -->
<bb-stepper-ui class="bb-stepper--vertical">
<bb-stepper-step-ui
label="Personal Information"
[isActive]="true"
[isChecked]="true">
<bb-stepper-step-ui
label="Full Name"
[isActive]="true"
[isChecked]="true">
</bb-stepper-step-ui>
<bb-stepper-step-ui
label="Date of Birth"
[isCurrent]="true"
[isActive]="true">
</bb-stepper-step-ui>
</bb-stepper-step-ui>
<bb-stepper-step-ui
label="Address Information"
[isActive]="false">
</bb-stepper-step-ui>
</bb-stepper-ui>