Appearance

VfList ​

Basic ​

A dynamic list of repeatable inputs. The flat prop keeps the data model as a flat array of values instead of an array of objects.

Domains
vue
<VfList name="domains" label="Domains">
  <template #default="{ index }">
    <VfText :name="index" placeholder="Domain" />
  </template>
</VfList>
vue
<template>
  <VfList name="domains" label="Domains">
    <template #default="{ index }">
      <VfText :name="index" placeholder="Domain" />
    </template>
  </VfList>
</template>
vue
<script setup lang="ts">
import { defineSchema, useForm } from '@vueform/ui'

const schema = defineSchema({
  domains: {
    type: 'list',
    label: 'Domains',
    flat: true,
    schema: {
      domain: {
        type: 'text',
        placeholder: 'Domain',
      },
    },
  },
})

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

<template>
  <Form />
</template>
Multiple Elements ​
When each row contains more than one element, wrap them in a VfGroup with the nested prop. The group receives the index as its name. The wrap prop renders each list item inside a bordered container.
Contacts
vue
<VfList name="contacts" label="Contacts" wrap>
  <template #default="{ index }">
    <VfGroup :name="index" nested>
      <VfText name="first_name" placeholder="First name" />
      <VfText name="last_name" placeholder="Last name" />
    </VfGroup>
  </template>
</VfList>
vue
<template>
  <VfList name="contacts" label="Contacts" wrap>
    <template #default="{ index }">
      <VfGroup :name="index" nested>
        <VfText name="first_name" placeholder="First name" />
        <VfText name="last_name" placeholder="Last name" />
      </VfGroup>
    </template>
  </VfList>
</template>
vue
<script setup lang="ts">
import { defineSchema, useForm } from '@vueform/ui'

const schema = defineSchema({
  contacts: {
    type: 'list',
    label: 'Contacts',
    wrap: true,
    schema: {
      first_name: {
        type: 'text',
        placeholder: 'First name',
      },
      last_name: {
        type: 'text',
        placeholder: 'Last name',
      },
    },
  },
})

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

<template>
  <Form />
</template>
Sorting ​
The sort prop enables drag-and-drop reordering of list items.
Priorities
vue
<VfList name="priorities" label="Priorities" sort>
  <template #default="{ index }">
    <VfText :name="index" placeholder="Item" />
  </template>
</VfList>
vue
<template>
  <VfList name="priorities" label="Priorities" sort>
    <template #default="{ index }">
      <VfText :name="index" placeholder="Item" />
    </template>
  </VfList>
</template>
vue
<script setup lang="ts">
import { defineSchema, useForm } from '@vueform/ui'

const schema = defineSchema({
  priorities: {
    type: 'list',
    label: 'Priorities',
    sort: true,
    schema: {
      item: {
        type: 'text',
        placeholder: 'Item',
      },
    },
  },
})

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

<template>
  <Form />
</template>
Initial Count ​
The initial prop sets the number of rows rendered on mount.
Tasks
vue
<VfList name="tasks" label="Tasks" :initial="3">
  <template #default="{ index }">
    <VfText :name="index" placeholder="Task" />
  </template>
</VfList>
vue
<template>
  <VfList name="tasks" label="Tasks" :initial="3">
    <template #default="{ index }">
      <VfText :name="index" placeholder="Task" />
    </template>
  </VfList>
</template>
vue
<script setup lang="ts">
import { defineSchema, useForm } from '@vueform/ui'

const schema = defineSchema({
  tasks: {
    type: 'list',
    label: 'Tasks',
    initial: 3,
    schema: {
      task: {
        type: 'text',
        placeholder: 'Task',
      },
    },
  },
})

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

<template>
  <Form />
</template>
Item Limits ​
The min and max props control the allowed number of items. The add button is hidden when max is reached and the remove button is hidden when min is reached.
Emails
vue
<VfList name="emails" :min="1" :max="3" />
vue
<template>
  <VfList name="emails" label="Emails" :min="1" :max="3">
    <template #default="{ index }">
      <VfText :name="index" placeholder="Email" />
    </template>
  </VfList>
</template>
vue
<script setup lang="ts">
import { defineSchema, useForm } from '@vueform/ui'

const schema = defineSchema({
  emails: {
    type: 'list',
    label: 'Emails',
    min: 1,
    max: 3,
    initial: 1,
    schema: {
      email: {
        type: 'text',
        placeholder: 'Email',
      },
    },
  },
})

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

<template>
  <Form />
</template>
Placeholder ​
The placeholder prop defines text shown when the list has no items.
Tags
No tags added yet
vue
<VfList name="tags" :initial="0" placeholder="No tags added yet" />
vue
<template>
  <VfList
    name="tags"
    label="Tags"
    :initial="0"
    placeholder="No tags added yet"
  >
    <template #default="{ index }">
      <VfText :name="index" placeholder="Tag" />
    </template>
  </VfList>
</template>
vue
<script setup lang="ts">
import { defineSchema, useForm } from '@vueform/ui'

const schema = defineSchema({
  tags: {
    type: 'list',
    label: 'Tags',
    initial: 0,
    placeholder: 'No tags added yet',
    schema: {
      tag: {
        type: 'text',
        placeholder: 'Tag',
      },
    },
  },
})

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

<template>
  <Form />
</template>
Custom Labels ​
The addLabel and removeLabel props customize the text on the add and remove buttons.
Links
vue
<VfList name="links" add-label="New link" remove-label="Delete" />
vue
<template>
  <VfList
    name="links"
    label="Links"
    add-label="New link"
    remove-label="Delete"
  >
    <template #default="{ index }">
      <VfText :name="index" placeholder="URL" />
    </template>
  </VfList>
</template>
vue
<script setup lang="ts">
import { defineSchema, useForm } from '@vueform/ui'

const schema = defineSchema({
  links: {
    type: 'list',
    label: 'Links',
    addLabel: 'New link',
    removeLabel: 'Delete',
    schema: {
      url: {
        type: 'text',
        placeholder: 'URL',
      },
    },
  },
})

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

<template>
  <Form />
</template>
Disabled ​
The disabled prop prevents adding, removing, and sorting items. It also accepts Conditions.
Locked list
vue
<VfList name="locked" disabled />
vue
<template>
  <VfList
    name="locked"
    label="Locked list"
    disabled
  >
    <template #default="{ index }">
      <VfText :name="index" placeholder="Item" />
    </template>
  </VfList>
</template>
vue
<script setup lang="ts">
import { defineSchema, useForm } from '@vueform/ui'

const schema = defineSchema({
  locked: {
    type: 'list',
    label: 'Locked list',
    disabled: true,
    schema: {
      item: {
        type: 'text',
        placeholder: 'Item',
      },
    },
  },
})

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

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