FormStepsControl

Renders a form step control button in FormStepsControls component.

Basic Usage

<FormStepsControl> component can be used in <FormStepsControls> component after setting its labels option to false:

vue
<template>
  <Vueform>
    <template #empty>
      <FormSteps>
        <!-- ... -->
      </FormSteps>

      <FormStepsControls :labels="false">
        <slot #next>
          Next »
        </slot>
      </FormStepsControls>
    </template>
  </Vueform>
</template>

Configuration options can be passed over as regular component props. Check out Options section for available configuration options.

Options

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

type

  • Type: string
  • Required: true
vue
<FormStepsControl type="previous" ... />
<FormStepsControl type="next" ... />
<FormStepsControl type="finish" ... />

The type of the step control. Possible values are 'previous', 'next' and 'finish'.

view

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

The name of the view to be used for the component. If undefined the default view will be used.

Learn more about views here.

Properties

All the data, computed and inject properties of the component.

label

  • Type: string|Component
  • Group: computed

The label of the component.

visible

  • Type: boolean
  • Group: computed

Whether the control should be visible.

isDisabled

  • Type: boolean
  • Group: computed

Whether the control should be disabled.

isLoading

  • Type: boolean
  • Group: computed

Whether the control is in loading state (except for previous).

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.

finish

  • Returns: Promise

Complete the final step and submit the form (async).

next

  • Returns: Promise

Complete the current step and go to the next one (async). If the form's validateOn prop or config.validateOn contains 'step' also validates the elements within the step before moving forward (and stay if there's any error).

previous

  • Returns: void

Go to the previous form step.

Slots

The slots of the component.

default

Renders the text of the control button.

👋 Hire Vueform team for form customizations and developmentLearn more