Builder
Examples
Case Studies
News
Resources
Ecosystem
Appearance
Star
Menu
On this page

FormSteps ​

Renders form steps using FormStep components.

Basic Usage ​

<FormSteps> component can be used in <Vueform> component's #empty slot:

vue
<template>
  <Vueform>
    <template #empty>
      <FormSteps>
        <FormStep
          name="account"
          :elements="['email', 'password']"
        >Account</FormStep>
        <FormStep
          name="personal"
          :elements="['name', 'bio']"
        >Personal</FormStep>
        <FormStep
          name="social"
          :elements="['facebook', 'twitter']"
        >Social</FormStep>
      </FormSteps>

      <FormElements>
        <TextElement
          name="email"
          label="Email"
        />
        <TextElement
          input-type="password"
          name="password"
          label="Password"
        />
        <TextElement
          name="name"
          label="Name"
        />
        <TextareaElement
          name="bio"
          label="bio"
        />
        <TextElement
          name="facebook"
          label="Facebook"
        />
        <TextElement
          name="twitter"
          label="Twitter"
        />
      </FormElements>

      <FormStepsControls />
    </template>
  </Vueform>
</template>

Options ​

Find below the list of options that can use to configure FormSteps component. Options can be passed to the component via props.

view ​

  • Type: string
vue
<FormSteps view="alt" ... />

The name of the view to be used for the component and child components (FormStep). If undefined the default view will be used.

Learn more about views here.

Properties ​

All the data, computed and inject properties of the component. They can be used via Vueform component's steps$ property.

steps ​

  • Type: object
  • Group: computed

The object containing steps defined in Vueform.

steps$Array ​

  • Type: array
  • Default: []
  • Group: data

The child FormStep components.

elements$ ​

  • Type: object
  • Group: computed

The form elements' components.

steps$ ​

  • Type: object
  • Group: computed

The child FormStep components with indexed keys.

visible$ ​

  • Type: object
  • Group: computed

All the visible FormStep components.

first$ ​

  • Type: FormStep|undefined
  • Group: computed

The first visible FormStep component.

last$ ​

  • Type: FormStep|undefined
  • Group: computed

The last visible FormStep component.

current$ ​

  • Type: FormStep|undefined
  • Group: computed

The current FormStep component.

next$ ​

  • Type: FormStep|undefined
  • Group: computed

The next visible FormStep component.

previous$ ​

  • Type: FormStep|undefined
  • Group: computed

The previous visible FormStep component.

firstInvalid$ ​

  • Type: FormStep|undefined
  • Group: computed

The first invalid & visible FormStep component.

firstNonDone$ ​

  • Type: FormStep|undefined
  • Group: computed

The first visible FormStep component which is not done yet.

lastEnabled$ ​

  • Type: FormStep|undefined
  • Group: computed

The last enabled & visible FormStep component.

isAtLastStep ​

  • Type: boolean
  • Group: computed

Whether is at the last step.

isAtFirstStep ​

  • Type: boolean
  • Group: computed

Whether is at the first step.

done ​

  • Type: boolean
  • Group: computed

Whether all the steps are done.

invalid ​

  • Type: boolean
  • Group: computed

Whether there are any steps in invalid state.

pending ​

  • Type: boolean
  • Group: computed

Whether there are any steps in pending state.

debouncing ​

  • Type: boolean
  • Group: computed

Whether there are any steps in debouncing state.

busy ​

  • Type: boolean
  • Group: computed

Whether there are any steps in busys state.

Size ​

  • Type: string
  • Group: inject

The size of the component.

View ​

  • Type: string
  • Group: computed

The name of the resolved view for the component. This one should be used to determine the component's view in class functions.

template ​

  • Type: object
  • Group: computed

The component's template.

classes ​

  • Type: object
  • Group: computed

The component's classes.

theme ​

  • Type: object
  • Group: inject

The global theme object, which contains all the default templates and classes.

form$ ​

  • Type: Vueform
  • Group: inject

The root form's component.

Methods ​

The methods of the component. They can be used via Vueform component's steps$ property.

step$ ​

  • Arguments:
    • {string} name* - name of the step
  • Returns: FormStep|undefined

Returns a specific FormStep component by index.

next ​

  • Returns: void

Move to next step and enable it.

previous ​

  • Returns: void

Move to previous step.

goTo ​

  • Arguments:
    • {string} name* - name of step to go to
    • {boolean} enableUntil - whether steps should be enabled up to the selected step (default: false)
  • Returns: void

Go to a step and enable it. Optionally enable all steps up to it.

enableAllSteps ​

  • Returns: void

Enables all steps.

enableUntil ​

  • Arguments:
    • {number} index* - index of the step
  • Returns: void

Enable steps until a certain index.

enableUntilCurrent ​

  • Returns: void

Enable all steps up to the current step.

enableUntilLastEnabled ​

  • Returns: void

Enable all steps up to the last enabled.

complete ​

  • Returns: void

Mark each FormStep as complete.

submit ​

  • Returns: Promise

Invokes the form's submit event. If the form has any validation errors it will jump to the first step with error.

reset ​

  • Returns: void

Jump back to first visible step and disable all others.

on ​

  • Arguments:
    • {string} event* - name of the event to listen for
    • {function} callback* - callback to run when the event is triggered
  • Returns: void

Adds a listener for an event.

off ​

  • Arguments:
    • {string} event* - name of the event to remove
  • Returns: void

Removes all listeners for an event.

fire ​

  • Arguments:
    • {any} args - list of arguments to pass over to the event callback
  • Returns: void

Fires and emits an event.

Events ​

Events emitted by the component. You can subscribe to them using regular @{eventName} listener in inline components or by using on(event, callback) method.

select ​

  • Params:
    • {component} activeStep$ - the active step
    • {component} previousStep$ - the previously active step

Triggered when a step becomes active.

next ​

  • Params:
    • {component} step$ - the next FormStep component

Triggered before moves to the next step.

previous ​

  • Params:
    • {component} step$ - the previous FormStep component

Triggered before moves to the previous step.

finish ​

Triggered when finish button is clicked, before validating and submitting the form.

VueformFormStep
👋 Hire Vueform team for form customizations and developmentLearn more