@mozaic-ds/vue
Version:
Mozaic-Vue is the Vue.js implementation of ADEO Design system
28 lines (18 loc) • 1.03 kB
Markdown
# MStepperCompact
A stepper is a navigation component that guides users through a sequence of steps in a structured process. It visually represents progress, completed steps, and upcoming steps, helping users understand their position within a workflow. Steppers are commonly used in multi-step forms, onboarding flows, checkout processes, and task completion sequences to improve clarity and reduce cognitive load.
## Props
| Name | Description | Type | Default |
| --- | --- | --- | --- |
| `value` | Current step of the stepper compact. | `number` | `1` |
| `maxSteps` | Maximum number of steps for the stepper compact. | `number` | `4` |
| `label*` | Label of the stepper compact. | `string` | - |
| `description` | Description displayed below the label of the stepper compact. | `string` | - |
## Dependencies
### Depends on
- [MCircularProgressbar](../circularprogressbar)
### Graph
```mermaid
graph TD;
MStepperCompact --> MCircularProgressbar
style MStepperCompact fill:#008240,stroke:#333,stroke-width:4px
```