Appearance

VfForm ​

Basic ​

A form with a few elements and a submit button.

vue
<VfForm>
  <VfText name="name" label="Name" />
  <VfText name="email" label="Email" />
  <VfButton name="submit" text="Submit" action="submit" />
</VfForm>
vue
<template>
  <VfForm>
    <VfText name="name" label="Name" />
    <VfText name="email" label="Email" />
    <VfButton name="submit" text="Submit" action="submit" />
  </VfForm>
</template>
vue
<script setup lang="ts">
import { defineSchema, useForm } from '@vueform/ui'

const schema = defineSchema({
  name: { type: 'text', label: 'Name' },
  email: { type: 'text', label: 'Email' },
  submit: { type: 'button', text: 'Submit', action: 'submit' },
})

const [Form] = useForm({ schema })
</script>

<template>
  <Form />
</template>
Stepped ​
The stepped prop turns the form into a multi-step wizard with a progress indicator and navigation buttons. Each direct child with a page prop becomes a step. The progress, nav, and back props control the visibility of the progress bar, navigation buttons, and back button respectively. Use nextLabel, backLabel, and finishLabel to customize button text. See Multi-Page Forms for details.
vue
<VfForm stepped hide-errors>
  <VfGroup name="personal" page="Personal">
    <VfText name="first_name" label="First name" />
    <VfText name="last_name" label="Last name" />
  </VfGroup>
  <VfGroup name="contact" page="Contact">
    <VfText name="email" label="Email" />
    <VfText name="phone" label="Phone" />
  </VfGroup>
  <VfGroup name="review" page="Review">
    <VfCheckbox name="terms" text="I accept the terms" />
  </VfGroup>
</VfForm>
vue
<template>
  <VfForm stepped hide-errors>
    <VfGroup name="personal" page="Personal">
      <VfText name="first_name" label="First name" />
      <VfText name="last_name" label="Last name" />
    </VfGroup>
    <VfGroup name="contact" page="Contact">
      <VfText name="email" label="Email" />
      <VfText name="phone" label="Phone" />
    </VfGroup>
    <VfGroup name="review" page="Review">
      <VfCheckbox name="terms" text="I accept the terms" />
    </VfGroup>
  </VfForm>
</template>
vue
<script setup lang="ts">
import { defineSchema, useForm } from '@vueform/ui'

const schema = defineSchema({
  personal: {
    type: 'group',
    page: 'Personal',
    schema: {
      first_name: { type: 'text', label: 'First name' },
      last_name: { type: 'text', label: 'Last name' },
    },
  },
  contact: {
    type: 'group',
    page: 'Contact',
    schema: {
      email: { type: 'text', label: 'Email' },
      phone: { type: 'text', label: 'Phone' },
    },
  },
  review: {
    type: 'group',
    page: 'Review',
    schema: {
      terms: {
        type: 'checkbox',
        text: 'I accept the terms',
      },
    },
  },
})

const [MyForm] = useForm({
  schema,
  stepped: true,
  hideErrors: true,
})
</script>

<template>
  <MyForm />
</template>
Tabbed ​
The tabbed prop renders direct children as freely navigable tabs. Each child's page prop sets the tab label. Unlike stepped forms, any tab can be selected at any time. See Multi-Page Forms for details.
vue
<VfForm tabbed>
  <VfGroup name="general" page="General">
    <VfText name="name" label="Name" />
    <VfText name="email" label="Email" />
  </VfGroup>
  <VfGroup name="profile" page="Profile">
    <VfText name="bio" label="Bio" />
    <VfText name="website" label="Website" />
  </VfGroup>
</VfForm>
vue
<template>
  <VfForm tabbed>
    <VfGroup name="general" page="General">
      <VfText name="name" label="Name" />
      <VfText name="email" label="Email" />
    </VfGroup>
    <VfGroup name="profile" page="Profile">
      <VfText name="bio" label="Bio" />
      <VfText name="website" label="Website" />
    </VfGroup>
  </VfForm>
</template>
vue
<script setup lang="ts">
import { defineSchema, useForm } from '@vueform/ui'

const schema = defineSchema({
  general: {
    type: 'group',
    page: 'General',
    schema: {
      name: { type: 'text', label: 'Name' },
      email: { type: 'text', label: 'Email' },
    },
  },
  profile: {
    type: 'group',
    page: 'Profile',
    schema: {
      bio: { type: 'text', label: 'Bio' },
      website: { type: 'text', label: 'Website' },
    },
  },
})

const [MyForm] = useForm({ schema, tabbed: true })
</script>

<template>
  <MyForm />
</template>
Custom Tabs ​
The #tab slot customizes each tab's content while keeping the default tab bar, buttons, and accessibility wiring. It receives the resolved page's state — label, index, selected, invalid, loading, and meta from the page prop's tuple form.
vue
<VfForm tabbed>
  <template #tab="{ label, index }">
    {{ index + 1 }}. {{ label }}
  </template>
  <VfGroup name="general" page="General">
    <VfText name="name" label="Name" />
  </VfGroup>
  <VfGroup name="profile" page="Profile">
    <VfText name="bio" label="Bio" />
  </VfGroup>
</VfForm>
vue
<template>
  <VfForm tabbed>
    <template #tab="{ label, index }">
      {{ index + 1 }}. {{ label }}
    </template>
    <VfGroup name="general" page="General">
      <VfText name="name" label="Name" />
    </VfGroup>
    <VfGroup name="profile" page="Profile">
      <VfText name="bio" label="Bio" />
    </VfGroup>
  </VfForm>
</template>
vue
<script setup lang="ts">
import { h } from 'vue'
import { defineSchema, defineSlot, useForm } from '@vueform/ui'

const schema = defineSchema({
  general: {
    type: 'group',
    page: 'General',
    schema: {
      name: { type: 'text', label: 'Name' },
    },
  },
  profile: {
    type: 'group',
    page: 'Profile',
    schema: {
      bio: { type: 'text', label: 'Bio' },
    },
  },
})

const [MyForm] = useForm({
  schema,
  tabbed: true,
  slots: {
    tab: defineSlot('VfForm.tab', {
      props: ['label', 'index'],
      setup: (props) => () => `${props.index + 1}. ${props.label}`,
    }),
  },
})
</script>

<template>
  <MyForm />
</template>
To replace the entire tab bar, use the #tabs slot instead. It receives the pager — render anything and drive navigation through its pages:
vue
<VfForm tabbed>
  <template #tabs="{ pager }">
    <div class="custom-tabs">
      <button
        v-for="page in pager.pages"
        :key="page.name"
        :class="{ active: page.selected }"
        @click="page.select()"
      >
        {{ page.label }}
      </button>
    </div>
  </template>
  <VfGroup name="general" page="General">
    <VfText name="name" label="Name" />
  </VfGroup>
  <VfGroup name="profile" page="Profile">
    <VfText name="bio" label="Bio" />
  </VfGroup>
</VfForm>
vue
<template>
  <VfForm tabbed>
    <template #tabs="{ pager }">
      <div class="custom-tabs">
        <button
          v-for="page in pager.pages"
          :key="page.name"
          :class="{ active: page.selected }"
          @click="page.select()"
        >
          {{ page.label }}
        </button>
      </div>
    </template>
    <VfGroup name="general" page="General">
      <VfText name="name" label="Name" />
    </VfGroup>
    <VfGroup name="profile" page="Profile">
      <VfText name="bio" label="Bio" />
    </VfGroup>
  </VfForm>
</template>
vue
<script setup lang="ts">
import { h } from 'vue'
import { defineSchema, defineSlot, useForm } from '@vueform/ui'

const schema = defineSchema({
  general: {
    type: 'group',
    page: 'General',
    schema: {
      name: { type: 'text', label: 'Name' },
    },
  },
  profile: {
    type: 'group',
    page: 'Profile',
    schema: {
      bio: { type: 'text', label: 'Bio' },
    },
  },
})

const [MyForm] = useForm({
  schema,
  tabbed: true,
  slots: {
    tabs: defineSlot('VfForm.tabs', {
      props: ['pager'],
      setup: (props) => () =>
        h('div', { class: 'custom-tabs' },
          props.pager.pages.map((page) =>
            h('button', {
              key: page.name,
              class: { active: page.selected },
              onClick: () => page.select(),
            }, page.label)
          )
        ),
    }),
  },
})
</script>

<template>
  <MyForm />
</template>
Custom Steps ​
The stepped counterparts work the same way: #step customizes each indicator inside the default VfSteps wrapper, #steps replaces the whole progress bar (receiving the pager). On top of the tab slot props, #step also receives enabled and completed — here numbering the steps and checking off completed ones:
vue
<VfForm stepped hide-errors>
  <template #step="{ label, index, completed }">
    {{ completed ? '✓' : index + 1 }}. {{ label }}
  </template>
  <VfGroup name="personal" page="Personal">
    <VfText name="first_name" label="First name" />
  </VfGroup>
  <VfGroup name="contact" page="Contact">
    <VfText name="email" label="Email" />
  </VfGroup>
  <VfGroup name="review" page="Review">
    <VfCheckbox name="terms" text="I accept the terms" />
  </VfGroup>
</VfForm>
vue
<template>
  <VfForm stepped hide-errors>
    <template #step="{ label, index, completed }">
      {{ completed ? '✓' : index + 1 }}. {{ label }}
    </template>
    <VfGroup name="personal" page="Personal">
      <VfText name="first_name" label="First name" />
    </VfGroup>
    <VfGroup name="contact" page="Contact">
      <VfText name="email" label="Email" />
    </VfGroup>
    <VfGroup name="review" page="Review">
      <VfCheckbox name="terms" text="I accept the terms" />
    </VfGroup>
  </VfForm>
</template>
vue
<script setup lang="ts">
import { defineSchema, defineSlot, useForm } from '@vueform/ui'

const schema = defineSchema({
  personal: {
    type: 'group',
    page: 'Personal',
    schema: {
      first_name: { type: 'text', label: 'First name' },
    },
  },
  contact: {
    type: 'group',
    page: 'Contact',
    schema: {
      email: { type: 'text', label: 'Email' },
    },
  },
  review: {
    type: 'group',
    page: 'Review',
    schema: {
      terms: { type: 'checkbox', text: 'I accept the terms' },
    },
  },
})

const [MyForm] = useForm({
  schema,
  stepped: true,
  hideErrors: true,
  slots: {
    step: defineSlot('VfForm.step', {
      props: ['label', 'index', 'completed'],
      setup: (props) => () =>
        `${props.completed ? '✓' : props.index + 1}. ${props.label}`,
    }),
  },
})
</script>

<template>
  <MyForm />
</template>
Custom Navigation ​
Each navigation button has a pair of slots: #back / #next / #finish replace the whole button, while #back-text / #next-text / #finish-text swap only the label inside the default button — keeping its styling, disabled, and loading behavior:
vue
<VfForm stepped hide-errors>
  <template #next-text="{ pager }">
    Continue ({{ pager.index + 1 }}/{{ pager.pages.length }})
  </template>
  <template #finish-text>
    Complete
  </template>
  <VfGroup name="personal" page="Personal">
    <VfText name="first_name" label="First name" />
  </VfGroup>
  <VfGroup name="contact" page="Contact">
    <VfText name="email" label="Email" />
  </VfGroup>
  <VfGroup name="review" page="Review">
    <VfCheckbox name="terms" text="I accept the terms" />
  </VfGroup>
</VfForm>
vue
<template>
  <VfForm stepped hide-errors>
    <template #next-text="{ pager }">
      Continue ({{ pager.index + 1 }}/{{ pager.pages.length }})
    </template>
    <template #finish-text>
      Complete
    </template>
    <VfGroup name="personal" page="Personal">
      <VfText name="first_name" label="First name" />
    </VfGroup>
    <VfGroup name="contact" page="Contact">
      <VfText name="email" label="Email" />
    </VfGroup>
    <VfGroup name="review" page="Review">
      <VfCheckbox name="terms" text="I accept the terms" />
    </VfGroup>
  </VfForm>
</template>
vue
<script setup lang="ts">
import { defineSchema, defineSlot, useForm } from '@vueform/ui'

const schema = defineSchema({
  personal: {
    type: 'group',
    page: 'Personal',
    schema: {
      first_name: { type: 'text', label: 'First name' },
    },
  },
  contact: {
    type: 'group',
    page: 'Contact',
    schema: {
      email: { type: 'text', label: 'Email' },
    },
  },
  review: {
    type: 'group',
    page: 'Review',
    schema: {
      terms: { type: 'checkbox', text: 'I accept the terms' },
    },
  },
})

const [MyForm] = useForm({
  schema,
  stepped: true,
  hideErrors: true,
  slots: {
    'next-text': defineSlot('VfForm.next-text', {
      props: ['pager'],
      setup: (props) => () =>
        `Continue (${props.pager.index + 1}/${props.pager.pages.length})`,
    }),
    'finish-text': defineSlot('VfForm.finish-text', {
      setup: () => () => 'Complete',
    }),
  },
})
</script>

<template>
  <MyForm />
</template>
To replace the entire navigation bar, use the #nav slot — it receives the pager plus the resolved button labels and visibility props:
vue
<VfForm stepped>
  <template #nav="{ pager }">
    <div class="custom-nav">
      <button @click="pager.back()">Back</button>
      <button
        v-if="pager.nextPage"
        @click="pager.next()"
      >
        Next
      </button>
      <button v-else @click="pager.finish()">
        Submit
      </button>
    </div>
  </template>
  <VfGroup name="personal" page="Personal">
    <VfText name="first_name" label="First name" />
  </VfGroup>
  <VfGroup name="contact" page="Contact">
    <VfText name="email" label="Email" />
  </VfGroup>
</VfForm>
vue
<template>
  <VfForm stepped>
    <template #nav="{ pager }">
      <div class="custom-nav">
        <button @click="pager.back()">Back</button>
        <button
          v-if="pager.nextPage"
          @click="pager.next()"
        >
          Next
        </button>
        <button v-else @click="pager.finish()">
          Submit
        </button>
      </div>
    </template>
    <VfGroup name="personal" page="Personal">
      <VfText name="first_name" label="First name" />
    </VfGroup>
    <VfGroup name="contact" page="Contact">
      <VfText name="email" label="Email" />
    </VfGroup>
  </VfForm>
</template>
vue
<script setup lang="ts">
import { h } from 'vue'
import { defineSchema, defineSlot, useForm } from '@vueform/ui'

const schema = defineSchema({
  personal: {
    type: 'group',
    page: 'Personal',
    schema: {
      first_name: { type: 'text', label: 'First name' },
    },
  },
  contact: {
    type: 'group',
    page: 'Contact',
    schema: {
      email: { type: 'text', label: 'Email' },
    },
  },
})

const [MyForm] = useForm({
  schema,
  stepped: true,
  slots: {
    nav: defineSlot('VfForm.nav', {
      props: ['pager'],
      setup: (props) => () =>
        h('div', { class: 'custom-nav' }, [
          h('button', { onClick: () => props.pager.back() }, 'Back'),
          props.pager.nextPage
            ? h('button', { onClick: () => props.pager.next() }, 'Next')
            : h('button', { onClick: () => props.pager.finish() }, 'Submit'),
        ]),
    }),
  },
})
</script>

<template>
  <MyForm />
</template>
Multilingual ​
The multilingual prop renders a language switcher above the form. The languages prop defines the available languages as a { code: label } map. Elements with translate store per-language values in the model. See Multilingual Inputs for details.
Editing language: English
Editing language: English
vue
<VfForm
  multilingual
  :languages="{ en_US: 'English', fr_FR: 'Français' }"
>
  <VfText name="title" label="Title" translate />
  <VfTextarea name="body" label="Body" translate />
</VfForm>
vue
<template>
  <VfForm
    multilingual
    :languages="{ en_US: 'English', fr_FR: 'Français' }"
  >
    <VfText name="title" label="Title" translate />
    <VfTextarea name="body" label="Body" translate />
  </VfForm>
</template>
vue
<script setup lang="ts">
import { defineSchema, useForm } from '@vueform/ui'

const schema = defineSchema({
  title: {
    type: 'text',
    label: 'Title',
    translate: true,
  },
  body: {
    type: 'textarea',
    label: 'Body',
    translate: true,
  },
})

const [MyForm] = useForm({
  schema,
  multilingual: true,
  languages: { en_US: 'English', fr_FR: 'Français' },
})
</script>

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