FormSteps

Renders form steps using FormStep components.

Basic Usage

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

<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
<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: component
  • Group: computed

The first visible FormStep component.

current$

  • Type: component
  • Group: computed

The current FormStep component.

next$

  • Type: component
  • Group: computed

The next visible FormStep component.

previous$

  • Type: component
  • Group: computed

The previous visible FormStep component.

firstInvalid$

  • Type: component
  • Group: computed

The first invalid & visible FormStep component.

firstNonDone$

  • Type: component
  • Group: computed

The first visible FormStep component which is not done yet.

lastEnabled$

  • Type: component
  • 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: component
  • 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: component
  • Group: inject

The root form's component.

Methods

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

.step$(name)

  • Arguments:
    • {string} name* - name of the step
  • Returns: component

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(name, enableUntil)

  • 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(index)

  • Arguments:
    • {integer} 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.

.enableUntilLastEnabled()

  • Returns: void

Enable all steps up to the last enabled.

.complete()

  • Returns: void

Mark each FormStep as complete.

.submit()

  • Returns: void

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(event, callback)

  • 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(event)

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

Removes all listeners for an event.

.fire(args)

  • 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 development Learn more