Stepper
Multi-step progress and navigation for guided flows.
Stepper composes a container and projected step components.
import { KuiStepComponent, KuiStepperComponent } from '@kikita-labs/ui';Bind currentIndex with a signal and describe each step with labels.
<div class="basic-stepper-example">
<kui-stepper [(currentIndex)]="currentIndex">
<kui-step label="Details" description="Project basics" />
<kui-step label="Team" description="Invite collaborators" />
<kui-step label="Review" description="Confirm settings" />
</kui-stepper>
</div>Inputs verified against @kikita-labs/ui v1.6.1 public typings.
| Name | Type | Default | Description |
|---|---|---|---|
| [(currentIndex)] | number | 0 | Zero-based active step index. |
| orientation | 'horizontal' | 'vertical' | 'horizontal' | Step list layout direction. |
| size | 'sm' | 'md' | 'lg' | 'md' | Circle size and label scale. |
| linear | boolean | true | Prevents jumping forward to upcoming steps when true. |
| compact | boolean | false | Shows step circles without labels or descriptions. |
| kui-step.label | string | '' | Primary step label. |
| kui-step.description | string | '' | Optional secondary line below the label. |
| kui-step.hasError | boolean | false | Marks the step as errored and disables later steps. |
| kui-step.disabled | boolean | false | Forces a step to render disabled. |
Stepper exposes progress state through native buttons and clear labels.
- Use descriptive labels and optional descriptions for each step.
- Linear mode prevents activating upcoming steps.
- Error steps disable later steps until the flow recovers.
- Use vertical orientation when labels need more horizontal space.