Appearance

VfSteps ​

Basic ​

VfSteps renders the progress indicator in a stepped form. Override the steps slot on VfForm to render VfSteps with custom props or alongside additional content.

vue
<VfForm stepped hide-errors>
  <template #steps="{ pager }">
    <VfSteps :pager="pager" />
  </template>
  <VfGroup name="personal" page="Personal">
    <VfText name="name" label="Name" />
  </VfGroup>
  <VfGroup name="contact" page="Contact">
    <VfText name="email" label="Email" />
  </VfGroup>
  <VfGroup name="address" page="Address">
    <VfText name="city" label="City" />
  </VfGroup>
</VfForm>
vue
<template>
  <VfForm stepped hide-errors>
    <template #steps="{ pager }">
      <VfSteps :pager="pager" />
    </template>
    <VfGroup name="personal" page="Personal">
      <VfText name="name" label="Name" />
    </VfGroup>
    <VfGroup name="contact" page="Contact">
      <VfText name="email" label="Email" />
    </VfGroup>
    <VfGroup name="address" page="Address">
      <VfText name="city" label="City" />
    </VfGroup>
  </VfForm>
</template>
vue
<script setup lang="ts">
import { defineSchema, defineSlot, useForm } from '@vueform/ui'
import { h, resolveComponent } from 'vue'

const schema = defineSchema({
  personal: {
    type: 'group',
    page: 'Personal',
    schema: {
      name: { type: 'text', label: 'Name' },
    },
  },
  contact: {
    type: 'group',
    page: 'Contact',
    schema: {
      email: { type: 'text', label: 'Email' },
    },
  },
  address: {
    type: 'group',
    page: 'Address',
    schema: {
      city: { type: 'text', label: 'City' },
    },
  },
})

const [MyForm] = useForm({
  schema,
  stepped: true,
  hideErrors: true,
  slots: {
    steps: defineSlot('VfForm.steps', {
      props: ['pager'],
      setup: (props) => () => {
        const VfSteps = resolveComponent('VfSteps')

        return h(VfSteps, { pager: props.pager })
      },
    }),
  },
})
</script>

<template>
  <MyForm />
</template>
Released under the MIT License.
Copyright © 2022-present Adam Berecz