e8-form-steps
Updated on Sep 18, 2025 4 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 | — |
| modify-data | Determines whether changes to this field mark the object as modified and require saving. | boolean | true |
| 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 | Arguments (in order) |
|---|---|---|
| on-change | Called when a step option is selected. Receives its value and the previous value, not step indexes. | value: string | number | null, oldValue: string | number | null |