Props

Form Wizard props (Schema mode) v1

When using Schema mode:

Prop	Type	Description
schema	FormWizardSchema	Declarative step config with initialData and steps
schemaComponents	Record<string, Component>	Map of step component keys to Vue components
modelValue / v-model	WizardData	Shared wizard data; binds to schema.initialData

Form Wizard props

props: {
  title: {
    type: String,
    default: 'Awesome Wizard'
  },
  subtitle: {
    type: String,
    default: 'Split a complicated flow in multiple steps'
  },
  nextButtonText: {
    type: String,
    default: 'Next'
  },
  backButtonText: {
    type: String,
    default: 'Back'
  },
  finishButtonText: {
    type: String,
    default: 'Finish'
  },
  stepSize: {
    type: String,
    default: 'md',
    validator: (value) => {
      let acceptedValues = ['xs', 'sm', 'md', 'lg']
      return acceptedValues.indexOf(value) !== -1
    }
  },
  /***
  *  Sets validation (on/off) for back button. By default back button ignores validation
  */
  validateOnBack: Boolean,
  /***
  * Applies to text, border and circle
  */
  color: {
    type: String,
    default: '#e74c3c' //circle, border and text color
  },
  /***
  *  Is set to current step and text when beforeChange function fails
  */
  errorColor: {
    type: String,
    default: '#8b0000'
  },
  /**
  * Can take one of the following values: 'circle|square|tab`
  */
  shape: {
    type: String,
    default: 'circle'
  },
  /**
  * name of the transition when transition between steps
  */
  transition: {
    type: String,
    default: '' //name of the transition when transition between steps
  },
  /***
  * Index of the initial tab to display
  */
  startIndex: {
    type: Number,
    default: 0
  }
}

Form Wizard props 🆕

    /*
     * If true, the wizard not back step on click wizard step
     */
    disableBackOnClickStep: {
      type: Boolean,
      default: false,
    },
    /*
     * If true, the wizard not back step on click wizard step and back button
     */
    disableBack: {
      type: Boolean,
      default: false,
    },
    /*
     * Enable RTL layout for wizard content (v1.1.1)
     */
    rtl: {
      type: Boolean,
      default: false,
    },
    /*
     * When true (and rtl is enabled), also reverses
     * horizontal steps, progress bar, and footer buttons (v1.1.1)
     */
    reverseHorizontal: {
      type: Boolean,
      default: false,
    },

Tab content props

props: {
  title: {
    type: String,
    default: ''
  },
  /***
   * Icon name for the upper circle corresponding to the tab
   * Supports themify icons only for now.
   */
  icon: {
    type: String,
    default: ''
  },
  /***
   * Only render the content when the tab is active
   */
  lazy: {
    type: Boolean,
    default: false
  },
  /***
   * Function to execute before tab switch. Return value must be boolean
   * If the return result is false, tab switch is restricted
   */
  beforeChange: {
    type: Function
  },
  /***
   * Route navigation to next step with vue-router.
   * Supports string paths (e.g. route="/step1") and route objects (e.g. route="{ name: 'step1', params: { id: 1 } }").
   * @param {String|Object} route
   * https://codesandbox.io/p/sandbox/7ly4dx
   */
  route: {
    type: [String, Object],
  }

}