Angular Stepper Component | ng-hub-ui-stepper
Angular stepper component with validation, orientation modes, custom controls, i18n and CSS-variable theming.
API reference
Here's the full contract for stepper: everything you can bind, listen to, project and theme, gathered in one place. Wire up what you need and style what you want — it's standalone and signal-friendly.
Inputs
Dial stepper in with 6 inputs. Bind them like any Angular @Input.
| Name | Type | Default | Description |
|---|---|---|---|
options (hub-stepper) | StepperOptions | {} | Stepper configuration object: `layout` (`vertical` | `sidebar`) and `rtl` (boolean). |
backLabel (hub-stepper) | string | null | null | Overrides the "Back" control label. Falls back to the built-in i18n label when null. |
continueLabel (hub-stepper) | string | null | null | Overrides the "Continue" control label. |
submitLabel (hub-stepper) | string | null | null | Overrides the final-step "Submit" control label. |
title (hub-step) | string | — | The step title shown in the stepper navigation. |
disabled (hub-step) | boolean | false | Disables navigation to this step. |
Outputs
React to what stepper does — 3 events to hook your logic onto.
| Name | Type | Description |
|---|---|---|
completed (hub-stepper) | EventEmitter<void> | Emitted when the user submits the final step. |
nextStep (hub-stepper) | EventEmitter<number> | Emitted when advancing to a step, with the new step index. |
previousStep (hub-stepper) | EventEmitter<number> | Emitted when going back to a step, with the new step index. |
Templates
No templates documented yet.
CSS variables
Theme every pixel with 14 CSS variables. Override them at :root or scope them to a wrapper.
Stepper theme
Runtime theming tokens for the stepper surface, navigation and controls. Override at `:root` or scope them to a wrapper.
| Variable | Default | Type | Description |
|---|---|---|---|
--hub-stepper-primary-color | #009ef7 | color | Primary accent (active state, progress). |
--hub-stepper-background-color | #f3f6f9 | color | Back-button / secondary surface background. |
--hub-stepper-text-color | #181c32 | color | Base text color. |
--hub-stepper-border-color | #d8dde6 | color | Border color of the stepper surface. |
--hub-stepper-surface-color | #ffffff | color | Step content background. |
--hub-stepper-nav-link-color | #495057 | color | Navigation step label color. |
--hub-stepper-nav-link-active-bg | #0d6efd | color | Active step indicator background. |
--hub-stepper-nav-link-active-color | #ffffff | color | Active step indicator text color. |
--hub-stepper-nav-link-disabled-color | #adb5bd | color | Disabled step label color. |
--hub-stepper-gap | 1rem | length | Gap between stepper layout regions. |
--hub-stepper-controls-gap | 0.5rem | length | Gap between the navigation controls. |
--hub-stepper-disabled-opacity | 0.5 | number | Opacity applied to disabled steps. |
--hub-stepper-sidebar-width | clamp(160px, 20vw, 240px) | length | Sidebar width in the `sidebar` layout. |
--hub-stepper-animation-duration | 260ms | transition | Step transition duration. |
Styling and theming
No styling examples are documented yet. This section will include customization recipes and theming examples.