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.

๐Ÿ‘‹ Hire Vueform team for form customizations and developmentLearn more