e8-form-steps
Updated on Sep 18, 2025 11 minutes to readA visual step indicator that displays progress through a sequence of steps.
Each step can be interactive, showing the current position, completed steps, and upcoming ones.
Overview
e8-form-steps renders a horizontal stepper for multi-stage workflows.
It supports both static and dynamic data, optional highlighting of the next step, and read-only or interactive modes.
The component automatically scrolls to keep the active step centered.
<e8-form-steps
v-model="vars.currentStep"
label="Process Steps"
tooltip="Follow the steps to complete the process"
:options="[
{ step1: 'Details' },
{ step2: 'Verification' },
{ step3: 'Confirmation' }
]"
:highlight-next-step="true"
></e8-form-steps>
🔽 Show more
Properties
| Property | Description | Type | Default |
|---|---|---|---|
| highlight-next-step | Highlights the step following the active one. | boolean | false |
| label | Field label text; set to false to hide label. | string | boolean | — |
| options | List of step options (array or object). | E8FormInputOptionsType | — |
| readonly | Makes the steps non-interactive. | boolean | false |
| size | Size of the control. | E8ElementSizes | 'default' |
| tooltip | Tooltip text displayed below the component. | string | — |
| v-model | Two-way bound value representing the active step. | string | number | null | — |
| visible | Controls visibility of the component. | boolean | true |
Slots
| Slot | Description |
|---|---|
| label | Custom label slot. Provides { label, value } as slot props. |
Events
| Event | Description |
|---|---|
| on-change | Emitted when the active step changes. |