FormStepsControls

Renders form step controls for FormSteps.

Basic Usage

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

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

      <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 FormStepsControls component. Options can be passed to the component via props.

labels

  • Type: boolean
  • Default: true
vue
<FormStepsControls :labels="false" ... />

Whether the default labels or labels provided by FormStep should be used.

If you are using previous, next or finish slot to render the control this needs to be set to false.

view

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

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

Learn more about views here.

Properties

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

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.

Slots

The slots of the component.

previous

Renders the text of the previous button in FormStepsControl component if the current FormStep's labels does not contain previous. FormStepsControls need to have labels: false in order to use this slot.

next

Renders the text of the next button in FormStepsControl component if the current FormStep's labels does not contain next. FormStepsControls need to have labels: false in order to use this slot.

finish

Renders the text of the previous button in FormStepsControl component if the current FormStep's labels does not contain finish. FormStepsControls need to have labels: false in order to use this slot.

👋 Hire Vueform team for form customizations and developmentLearn more